Jquery百宝箱
引入jquery
<script src="https://blog-static.cnblogs.com/files/dongxiaodong/jquery-3.3.1.min.js"></script>
获取标签对象
字符串内容与css相似确定样式组相似
通过id
$("#pidx")
通过标签名
1 $("div") //查找到所有 2 $("p").eq(0) //查找到第0个
通过class
$(".pclassx")
组合,进行深度查找
$("#div4id p") //id为div4id标签下的p标签
组合,进行广度查找
$("p,span") //查找p标签和span标签
属性选择查找
1 $("[dong]") 2 $('[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({ width:"100px", height:"100px", backgroundColor:"green" });
事件
事件的绑定与解绑
1 function clickfun1(e){ 2 alert("东小东1"); 3 } 4 function clickfun2(e){ 5 alert("东小东2"); 6 } 7 //对应有bind、unbind ,用法一致 8 $(".pclassx").on("click",clickfun1);//绑定事件 9 $(".pclassx").on("click",clickfun2); 10 //$(".pclassx").unbind("click");//解除所有点击事件 11 $(".pclassx").off("click",clickfun2);//只解除事件2
事件绑定2
$("#divid").click(function(){ //******* });
事件的阻止
在事件处理函数最后【return false;】就不会执行接下来的事件了,一般系统默认事件都会在自定义事件后执行,所以可以以此替换系统事件,如<a>、<submit>
1 e.stopImmediatePropagation();//阻止父级标签事件发生 2 e.stopImmediatePropagation();//阻止除当前事件外的所有事件发送
页面加载完毕
1 $(document).ready(function(){ 2 alert("页面加载完毕2"); 3 });
$符属性的解除和替换
将$符替换为dong
var dong=$.noConflict();
Cookie操作
封装有JS对cookie的操作,需要先引入jquery.cookie.js文件
$.cookie("namex","valuex"); //设置 alert($.cookie("namex")); //获取
滚动条操作
侧边
1 alert($(window).scrollTop());//得到浏览器滚动条位置 2 $(window).scrollTop(0);//设置为0,顶部 3 //$("div").scrollTop(10);//设置带有滚动条的其它标签
底部
1 alert($(window).scrollLeft()); 2 ……
标签节点操作
删除标签
$(".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("到底啦啦"); } });