文章目录

概述jQuery选择器jQuery属性操作CSS类操作CSS样式设置节点遍历文档处理jQuery特效

---

概述

jQuery是一个JavaScript的库，里面封装了很多已经实现的CSS内容，大大提高了开发效率 如果要使用jQuery，需要在html文件里进行导入

<script src="./jquery-3.5.0.min.js"></script>

---

jQuery选择器

HTML DOM里获取HTML元素内容的写法过于冗长，jQuery里提供了更高效的写法

基本选择器：

// document.getElementById("hid"); //获取id值为hid元素节点 //等价于上面语句,获取id值为hid元素节点，并设置css样式 $("#hid").css("color","blue"); //document.getElementsByTagName("li"); //获取网页中所有li元素节点 //获取网页中所有li元素节点，并设置css样式 //$("li").css("color","red"); //获取class属性值为cc所有元素节点，并设置css样式 $(".cc").css("color","red"); //选择器组，统一设置指定css样式 $("h1,h2,h3,h4,h5,h6").css("background-color","#ddd");

层级选择器：

//获取ul中所有子元素节点li（包括后代节点），并设置样式 //$("ul li").css("color","red"); //获取ul中所有直接子元素节点li（包括后代节点），并设置样式 //$("ul>li").css("color","red"); //获取ul同级紧邻后面的第一个兄弟节点li，并设置样式 //$("ul+li").css("color","red"); //获取ul后面所有同级兄弟li元素节点，并设置样式 $("ul~li").css("color","red");

基本筛选器：

//获取所有li节点并设置样式 //$("li").css("color","red"); //获取第一个li节点并设置样式 //$("li:first").css("color","red"); //获取最后一个li节点并设置样式 //$("li:last").css("color","red"); //获取偶数索引号对应的所有li节点并设置样式 //$("li:even").css("color","red"); //获取奇数索引号对应的所有li节点并设置样式 //$("li:odd").css("color","red"); //获取class属性值为cc的所有li节点并设置样式 //$("li.cc").css("color","red"); //获取class属性值不为cc的所有li节点并设置样式 //$("li:not(.cc)").css("color","red"); //获取索引位置为2的li节点并设置样式 //$("li:eq(2)").css("color","red"); //获取前2个li节点并设置样式 //$("li:lt(2)").css("color","red");

内容选择器：

//获取包含John内容的标签 $("div:contains('John')").css("color","red");

属性选择器：

//获取所有含有value属性的input元素标签，并设置样式 //$("input[value]").css("border","1px solid red"); //获取name属性值为phone的input元素标签，并设置样式 //$("input[name='phone']").css("border","1px solid red"); //获取name属性值不为phone的input元素标签，并设置样式 //$("input[name!='phone']").css("border","1px solid red"); //获取name属性值是以a字符开头的所有input元素标签，并设置样式 //$("input[name^='a']").css("border","1px solid red"); //获取name属性值是以e字符结尾的所有input元素标签，并设置样式 //$("input[name$='e']").css("border","1px solid red"); //获取name属性值中含有m字符的所有input元素标签，并设置样式 $("input[name*='m']").css("border","1px solid red");

表单选择器：

//获取所有多选框中选择中的元素节点 //var list = $("input[type='checkbox']:checked"); var list = $(":checkbox:checked"); alert(list.length); //获取li元素节点（条件是里面的多选框必须选中），并设置样式 $("li:has(input:checked)").css("color","red");

---

jQuery属性操作

<a id="aid" href="http://www.baidu.com" title="百度链接">百度</a><br/><br/> var a = $("#aid"); console.log(a.attr("href")); //获取 console.log(a.prop("href")); //获取 console.log(a.attr("title")); console.log(a.prop("title")); a.attr("href","http://news.baidu.com"); //添加或更改 a.removeAttr("title"); //删除属性 //a.attr("aa","bb"); //添加属性 //a.prop("aa","bb"); //添加属性 prop方法不可以添加不能存在的属性 a.prop("title","百度新闻"); //只支持HTML DOM的属性操作

attr()这个方法在传入一个参数时是获取，两个参数时是添加或修改 prop()与attr()方法的区别在于，prop()方法在传入两参的时候不可以添加不存在的属性

---

CSS类操作

//获取上面所有的li节点并添加点击事件 $("ul.uu li").click(function(){ //切换class类属性 $(this).toggleClass("active"); /* //判断当前节点li是否含有active class属性 if($(this).hasClass('active')){ //删除class类属性 $(this).removeClass("active"); }else{ //添加class类属性 $(this).addClass("active"); } */ });

jQuery里有对CSS类进行简易操作的方法，其中toggleClass()这个方法可以代替下面写的 if-else语句里的内容

<ul class="uu"> <li><input type="checkbox" name="likes[]" value="1"/> 苹果</li> <li><input type="checkbox" name="likes[]" value="2"/> 橘子</li> <li><input type="checkbox" name="likes[]" value="3"/> 哈密瓜</li> <li><input type="checkbox" name="likes[]" value="4"/> 菠萝</li> <li><input type="checkbox" name="likes[]" value="5"/> 芒果</li> </ul> <button>全选</button> <button>全不选</button> <button>反选</button> switch($(this).html()){ case "全选": //获取所有多选框并设置选中 $("ul.uu input:checkbox").prop("checked",true); break; case "全不选": $("ul.uu input:checkbox").prop("checked",false); break; case "反选": $("ul.uu input:checkbox").each(function(){ $(this).prop("checked",!$(this).prop("checked")); }); break; }

对多选框、下拉框的操作应该使用prop()方法更符合规范，

---

CSS样式设置

//获取标题并设置css样式 //$("#hid").css("color","red"); //单个属性设置 $("#hid").css({"color":"green","background-color":"#ddd"}); console.log($("#hid").css("color")); //获取css属性 //获取div层的位置 var offset = $("#inner").offset(); console.log(offset.left,offset.top); //获取偏移位置 var position = $("#inner").position(); console.log(position.left,position.top); //获取尺寸 console.log($("#inner").width(),$("#inner").height()); $("#inner").width(300)

---

节点遍历

$("button").click(function(){ //$("li").css("color","red"); //获取li节点并遍历执行操作 $("li").each(function(i){ //alert(i); //索引位置 $(this).html($(this).html()*2); }); });

jQuery里对节点的遍历非常便捷

---

文档处理

内部插入：

$("button").click(function(){ //获取输入框中的内容 var tname = $("input[name='tname']").val(); //获取上的内容判断执行对应的操作 switch($(this).html()){ case "前添加": //$("ul.uu").prepend("<li>"+tname+"</li>"); $("<li>"+tname+"</li>").prependTo("ul.uu"); break; case "后追加": //$("ul.uu").append("<li>"+tname+"</li>"); $("<li>"+tname+"</li>").appendTo("ul.uu"); break; } });

将元素添加到HTML li表格里

外部插入：

//获取所有按钮并绑定点击事件 $("button").click(function(){ //获取输入框中的内容 var tname = $("input[name='tname']").val(); //获取按钮上的文本并判断执行对应操作 switch($(this).html()){ case "前添加": //$("li.active").before("<li>"+tname+"</li>"); $("<li>"+tname+"</li>").insertBefore("li.active"); break; case "后追加": //$("li.active").after("<li>"+tname+"</li>"); $("<li>"+tname+"</li>") .insertAfter("li.active") .click(function(){ $("ul.uu li").removeClass("active"); $(this).addClass("active"); }); break; } });

删除：

//获取所有的输入框并绑定获得和失去焦点事件 $("input:text").focus(function(){ //获得焦点事件处理 var title = $(this).attr("title"); $("<span> 请输入正确的"+title+"信息</span>").insertAfter(this).css("color","#ddd"); }).blur(function(){ //失去焦点事件处理 $(this).next("span").remove(); });

失去输入框的焦点时，将span标签内的提示信息进行删除

---

jQuery特效

switch($(this).html()){ case "显示": //$("img").show("slow"); //$("img").slideDown("slow"); $("img").fadeIn("slow"); break; case "隐藏": //$("img").hide("slow"); //$("img").slideUp("slow"); $("img").fadeOut("slow"); break; case "切换": //$("img").toggle("slow"); //$("img").slideToggle("slow"); //$("img").fadeToggle("slow"); $("img").stop().toggle("slow"); break; }

show()是以一个点为坐标的显示和隐藏特效 slide()是类似画布一样的滑动地显示和隐藏特性 fade()是整体缓慢出现或者缓慢消失，类似隐身

---