Jquery百宝箱

引入jquery

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

获取标签对象

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

通过id

$("#pidx")

通过标签名

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

通过class

$(".pclassx")

组合，进行深度查找

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

组合，进行广度查找

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

属性选择查找

$("[dong]")
$('[type="checkbox"]')

DOM操作

标签包裹内容操作

得到信息

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

$(".cdiv1").text()

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

$(".cdiv1").html()

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

替换

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

追加到标签内

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

在原内容前插入，标签内

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

插入到标签前

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

插入到标签后

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

属性操作

得到信息

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

修改/添加属性

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

一次性修改/添加多个

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

删除属性

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

属性操作补充（prop）

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

Value属性操作

得到信息

$("input").val()

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

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

Class属性操作

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

Css样式的改变

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

一次性设置多个属性

$(".cdiv2").css({
    "100px",
    height:"100px",
    backgroundColor:"green"
});

事件

事件的绑定与解绑

function clickfun1(e){
    alert("东小东1");
}
function clickfun2(e){
    alert("东小东2");
}
//对应有bind、unbind ，用法一致
$(".pclassx").on("click",clickfun1);//绑定事件
$(".pclassx").on("click",clickfun2);
//$(".pclassx").unbind("click");//解除所有点击事件
$(".pclassx").off("click",clickfun2);//只解除事件2

事件绑定2

$("#divid").click(function(){
       //*******
});

事件的阻止

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

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

页面加载完毕

$(document).ready(function(){
    alert("页面加载完毕2");
});

$符属性的解除和替换

将$符替换为dong

var dong=$.noConflict();

Cookie操作

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

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

滚动条操作

侧边

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

底部

alert($(window).scrollLeft());
……

标签节点操作

删除标签

$(".cdiv2").remove()

清空标签包裹的内容

$(".cdiv2").empty()

子级元素

只能是下一级

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

可以指定任意下级

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

标签对象内容循环

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

父级元素

上一级

parent()

全部父级

parents()

区间

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

同级元素

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

$("#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")

添加条件

其中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(function(){
    $(this).hide();
});

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

滑动显示

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

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

滑动隐藏

隐藏后不占位

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

滑动显示与隐藏切换

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

多效果顺序执行

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

底部和顶部判断

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

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