Jquery百宝箱

引入jquery

<@H_404_5@script @H_404_5@src@H_404_5@="https://blog-static.cnblogs.com/files/dongxiaodong/jquery-3.3.1.min.js"@H_404_5@></@H_404_5@script@H_404_5@>@H_404_5@

获取 标签对象

字符串内容与css相似确定样式组相似

通过id

$("#pidx")

通过标签名

1@H_404_5@ $("div") //@H_404_5@查找到所有@H_404_5@
2@H_404_5@ $("p").eq(0) 查找到第0个@H_404_5@

通过class

$(".pclassx")

组合，进行深度查找

$("#div4id p") id为div4id标签下的p标签@H_404_5@

组合，进行广度查找

$("p,span")   查找p标签和span标签@H_404_5@

属性选择查找

1@H_404_5@ $("[dong]")
@H_404_5@2@H_404_5@ $('[type="checkBox"]')

DOM操作

标签包裹内容操作@H_404_5@

得到信息

得到标签包裹的所有文本内容，包括子标签的文本内容

$(".cdiv1").text()

得到所有包裹信息，以源代码展示

$(".cdiv1").html()

修改信息，参数为要修改的值

替换

$(".cdiv1").text("123<br/>456")无换行效果@H_404_5@
$(".cdiv1").html("123<br/>456")有换行效果，解释HTML@H_404_5@

追加到标签内

$(".cdiv2").append("东小东<br/>dong")有换行效果@H_404_5@

在原内容前插入，标签内

$(".cdiv2").prepend("东小东<br/>dong")有换行效果@H_404_5@

插入到标签前

$(".cdiv2").before("东小东<br/>dong")有换行效果@H_404_5@

插入到标签后

$(".cdiv2").after("东小东<br/>dong")有换行效果@H_404_5@

属性操作@H_404_5@

得到信息

$("div").attr("class")

修改/添加属性

$("div").attr("class","cdiv2")

一次性修改/添加多个

$("input").attr({
    @H_404_5@"class":"cdiv2",@H_404_5@"value":"dddxxxddd"
})@H_404_5@

删除属性

$("div").removeAttr("style");

属性操作补充（prop）

alert($("div").prop("id"));获取属性值@H_404_5@
$("div").prop("style","Color:green");设置属性值@H_404_5@

Value属性操作

得到信息

$("input").val()

修改信息，参数为要修改的值

$("input").val("dongxiaodong")

Class属性操作@H_404_5@

$("div").addClass("c2");添加样式@H_404_5@
$("div").removeClass("c1");移除样式 @H_404_5@
$("div").toggleClass("c1");添加和移除切换@H_404_5@
alert($("div").hasClass("c1"));得到是否存在某个class，返回bool@H_404_5@

Css样式的改变@H_404_5@

$(".cdiv1").css("backgroundColor","red");

一次性设置多个属性

$(".cdiv2").css({
    width:@H_404_5@"100px"404_5@"100px"404_5@"green"
});@H_404_5@

事件

事件的绑定与解绑

 1@H_404_5@ function@H_404_5@ clickfun1(e){
@H_404_5@ 2@H_404_5@     alert("东小东1");
@H_404_5@ 3@H_404_5@ }
@H_404_5@ 4@H_404_5@  clickfun2(e){
@H_404_5@ 5@H_404_5@     alert("东小东2" 6@H_404_5@  7@H_404_5@ 对应有bind、unbind ，用法一致@H_404_5@
 8@H_404_5@ $(".pclassx").on("click",clickfun1);绑定事件@H_404_5@
 9@H_404_5@ $(".pclassx").on("click"404_5@10@H_404_5@ $(".pclassx").unbind("click");//解除所有点击事件@H_404_5@
11@H_404_5@ $(".pclassx").off("click",clickfun2);只解除事件2@H_404_5@

事件绑定2

$("#divid").click((){
       @H_404_5@*******@H_404_5@
});

事件的阻止

在事件处理函数最后【return false;】就不会执行接下来的事件了，一般系统默认事件都会在自定义事件后执行，所以可以以此替换系统事件，如<a>、<submit>

1@H_404_5@ e.stopImmediatePropagation();阻止父级标签事件发生@H_404_5@
2@H_404_5@ e.stopImmediatePropagation();阻止除当前事件外的所有事件发送@H_404_5@

页面加载完毕

1@H_404_5@ $(document).ready((){
@H_404_5@2@H_404_5@     alert("页面加载完毕2"3@H_404_5@ });

$符属性的解除和替换

将$符替换为dong

var@H_404_5@ dong=$.noConflict();

Cookie操作

封装有JS对cookie的操作，需要先引入jquery.cookie.js文件

$.cookie("namex","valuex"); 设置@H_404_5@
alert($.cookie("namex")); 获取@H_404_5@

滚动条操作

侧边

1@H_404_5@ alert($(window).scrollTop());得到浏览器滚动条位置@H_404_5@
2@H_404_5@ $(window).scrollTop(0);设置为0，顶部@H_404_5@
3@H_404_5@ $("div").scrollTop(10);//设置带有滚动条的其它标签@H_404_5@

底部

1@H_404_5@ alert($(window).scrollLeft());
@H_404_5@2@H_404_5@ ……

标签节点操作

删除标签@H_404_5@

$(".cdiv2").remove()

清空标签包裹的内容@H_404_5@

$(".cdiv2").empty()

子级元素@H_404_5@

只能是下一级

$("#div2id").children().css("background","red");

可以指定任意下级

$("#div2id").find("#div4id").css("background","red");

标签对象内容循环

$('div').each((i){
   @H_404_5@alert(i);  //获取当前下标@H_404_5@
   if@H_404_5@(i==0){return@H_404_5@ true@H_404_5@;} 中断当次循环@H_404_5@
   $(this@H_404_5@).addClass("c1");
   @H_404_5@return false;  //终止循环@H_404_5@
    
});@H_404_5@

父级元素@H_404_5@

上一级

parent()

全部父级

parents()

区间

$("#div4id").parentsUntil("#div1id")

同级元素@H_404_5@

修改除自身的其他同级元素样式

$("#pid").siblings().css("background","red");

修改下一个元素样式

$("#pid").next().css("background","red");

修改下面的全部元素样式

$("#pid").nextAll().css("background","red");

区间修改

nextUntil参数为结束区间的标识，不包括自己，如果无参数则如同nextAll效果

$("#pid").nextUntil("#pid2").css("background","red");

对应有向上查找方法

prev();    prevAll();    prevUntil("#pid")

添加条件@H_404_5@

其中filter参数为必须满足的条件

$("div").filter("#div2id").css("backgroundColor","red");

其中not参数为不需要满足的条件

$("div").not("#div2id").css("backgroundColor","red");

效果

在每个效果函数里都可以添加一个函数名参数，为动画执行完毕的回调函数

淡入与淡出

淡入

单独使用时，需要先使用【display: none;】进行不占位隐藏，参数为动画时间，单位为秒，可以忽略

$(".cdiv1").fadeIn(1000);

淡出

淡出后不占位

$(".cdiv2").fadeOut(2000);

淡入淡出切换

$(".cdiv2").fadeToggle(1000);

透明度调节

参数（动画时间，0-1的透明度值）

$(".cdiv2").fadeTo(1000,0.8);

以左上角为起点的隐藏与显示

显示

单独使用时，需要先使用【display: none;】进行不占位隐藏，参数为动画时间，单位为秒，可以忽略

$(".cdiv1").show(2000);

隐藏

隐藏后不占位

$(".cdiv1").hide(2000);

显示与隐藏切换

$(".cdiv1").toggle(2000);

举个栗子

点击则隐藏，将所有的P标签元素添加点击事件，并实现点击某个就进行隐藏

$("p").click((){
    $(@H_404_5@this@H_404_5@).hide();
});@H_404_5@

以上边为起点的滑动效果的隐藏和显示

滑动显示

单独使用时，需要先使用【display: none;】进行不占位隐藏，参数为动画时间，单位为秒，可以忽略

$(".cdiv1").slideDown(2000);

滑动隐藏

隐藏后不占位

$(".cdiv1").slideUp(2000);

滑动显示与隐藏切换

$(".cdiv1").slideToggle(2000);

多效果顺序执行

$("@H_404_5@.cdiv1@H_404_5@"@H_404_5@).css(backgroundColor@H_404_5@"@H_404_5@,red@H_404_5@"@H_404_5@).hide(2000@H_404_5@).slideDown(2000@H_404_5@);

底部和顶部判断

判断页面滚动到顶部和底部@H_404_5@
$(window).scroll((){
    @H_404_5@var@H_404_5@ doc_height = $(document).height();
    @H_404_5@var@H_404_5@ scroll_top = $(document).scrollTop(); 
    @H_404_5@var@H_404_5@ window_height = $(window).height();

    @H_404_5@if@H_404_5@(scroll_top == 0){
        alert(@H_404_5@"到顶啦");
    }@H_404_5@else@H_404_5@ if@H_404_5@(scroll_top + window_height >= doc_height){
        alert(@H_404_5@"到底啦啦");
    }
});    @H_404_5@

Jquery百宝箱

引入jquery

获取标签对象

DOM操作

事件

$符属性的解除和替换

Cookie操作

滚动条操作

标签节点操作

效果

底部和顶部判断

猜你在找的jQuery相关文章