定义:jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();
实例:
1 $("#test").html() ?2 ????3 ?????????意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法 ?4 ?5 ?????????这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML; ?6 ?7 ?????????虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错 8 ?9 ?????????约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$. 10 11 var $variable = jQuery 对象12 var variable = DOM 对象13 14 $variable[0]：jquery对象转为dom对象 ?????$("#msg").html(); $("#msg")[0].innerHTML1.选择器和筛选器
?1 <!DOCTYPE html> ?2 <html lang="en"> ?3 <head> ?4 ????<meta charset="UTF-8"> ?5 ????<title>Title</title> ?6 ????<script src="jquery-3.3.1.js"></script> ?7 </head> ?8 <body> ?9 ?10 <div class="c2"> 11 ????<p class="c4">111</p> 12 ????<p class="c4">222</p> 13 ????<div><p class="c4">123</p></div> 14 ????<a id="a1" href="">click</a> 15 </div> 16 <p class="c4">234</p> 17 <p class="c4">234</p> 18 ?19 <div ?alex="dsb" peiqi="678" class="c21">alex和配齐</div> 20 <div alex="dsb">alex</div> 21 <div peiqi="678">8888</div> 22 ?23 ?24 <div class="p1"> 25 ?????<p class="c3" id="i3">222</p> 26 ?????<p class="c3">333</p> 27 ?????<p class="c3" id="i2">444</p> 28 ?????<p class="c3">555</p> 29 ?????<p class="c3 c8">666</p> 30 ?????<p class="c3">777</p> 31 </div> 32 ?33 <div class="c5"> 34 ????<input type="checkbox"> 35 ????<input type="checkbox"> 36 ????<input type="checkbox"> 37 </div> 38 ?39 ?40 <div class="c9"> 41 ????<p>111</p> 42 ????<p>222</p> 43 ????<div class="c10"> 44 ????????<p>333</p> 45 ????</div> 46 ????<a href="">click</a> 47 </div> 48 ?49 <script> 50 ????/* 51 ????// 01 选择器 52 ????// 1.1 基本选择器 53 ????//$("*").css("color","red") 54 ????// $(".c2").css("color","red") 55 ????// $("#a1").css("color","red") 56 ????// $("p").css("color","green") 57 // 1.2 层级选择器 58 ????//$(".c2 div").css("color","green") 59 ????//$(".c2 p").css("color","green") ?//子孙后代 60 ????//$(".c2>p").css("color","green") //仅限儿子们 61 ????//$(".c2+p").css("color","red") //同级下一个 剩下的不要 62 ????//$(".c2~p").css("color","red") //同级下面P标签全要 63 ?64 // 1.3 基本筛选器 65 ????//$(".c3:first").css("color","red"); 66 ????//$(".c3:eq(2)").css("color","red"); // eq(索引号) 67 ????//$(".c3:gt(1)").css("color","red"); ?//gt(1)索引大于1的标签 68 ????//$(".c3:lt(4)").css("color","red"); ?//lt(1)索引小于4的标签 69 ????//$(".c3:even").css("color","red"); //偶数 70 ????//$(".c3:odd").css("color","red"); ?//奇数 71 ?72 //1.4 属性选择器 73 ????//$("[peiqi]").css("color","red"); 74 ????//$("[alex=‘dsb‘][peiqi]").css("color","red"); 75 ?76 //1.5 表单选择器 77 ????????//以下三种写法效果一样 78 ????//$("[type=‘checkbox‘]").attr("checked","checked"); 79 ????//$(":checkbox").attr("checked","checked") 80 ????//$("input:checkbox").attr("checked","checked") ?//仅限input标签 81 ?82 ?????*/ 83 ?84 ????/* 85 ????// 02 进阶筛选器 86 ????// $(".c3").first().css("color","red"); 87 ????// var index=3; 88 ????// $(".c3:"+"eq("+index+")").css("color","red"); //这种写法不方便赋值,不推荐 89 ????// $(".c3").eq(index).css("color","red"); 90 ?????// 判断某个标签是否拥有某个class名 91 ?// ???console.log($("[alex]").hasClass("c21")); 92 ?93 ?????*/ 94 ?95 ????/* 96 ????// 03 导航选择器 97 ????????//3.1 查找兄弟标签 98 ????// ?$("#i2").next().css("color","red"); 99 ????// ?$("#i2").nextAll().css("color","red");100 ????// ?$("#i2").nextUntil(".c8").css("color","red");101 ????// ?$("#i2").prev().css("color","red");102 ????// ?$("#i2").prevAll().css("color","red");103 ????// ?$("#i2").prevUntil("#i3").css("color","red");104 ????// ?$("#i2").siblings().css("color","red"); //除选中标签外的兄弟标签 很重要105 106 ????// 3.2 查找子孙标签107 ????// console.log($(".c9").children()); ?//结果:jQuery.fn.init(4) [p, p, div.c10, a, prevObject: jQuery.fn.init(1)]108 // ????$(".c9").children().first().css("color","red");109 // ????$(".c9").children("p").css("color","red"); //只查找到儿子那一代的p110 // ????$(".c9").find("p").css("color","red"); //查找子孙所有P111 // ????$(".c9").children(".c10").css("color","red");112 113 ????// 3.3查找父类标签114 ????// console.log($(".c10").parent()); //只查找到父亲115 ????// console.log($(".c10").parents()); //父亲,爷爷.....116 ?????// $(".c10").parentsUntil()117 ?????*/118 119 120 121 122 123 124 125 126 </script>127 128 </body>129 </html>2.事件绑定
1 <ul class="box"> 2 ????<li>123</li> 3 ????<li>234</li> 4 ????<li>456</li> 5 ????<li>567</li> 6 ????<li class="c1">678</li> 7 </ul> 8 <button class="add">ADD</button> 9 10 <script src="jquery-3.3.1.js"></script>11 <script>12 ????//基本形式 $().事件(function(){})13 ????// 01 普通绑定事件14 ????// $(".box li").click(function(){15 ????// ????alert($(this).html())16 ????// })17 18 ????// 委托绑定 ?绑定父类.on(指定事件类型,指定子标签,指定函数)19 ????// ?$(".box").on("click","li",function(){20 ????// ??????alert($(this).html())21 ????// ?})22 ????//23 ????// $(".add").click(function(){24 ????// ????$(".box").append("<li>789</li>")25 ????// })3.jquery操作
1 <p><a href="">123</a></p> 2 ?3 <script> 4 ????// 01 文本操作 5 ????// console.log($("p").html()); 6 ????// console.log($("p").text()); 7 ????// $("p").text("<a href=‘‘>456</a>"); 8 ????// $("p").html("<a href=‘‘>456</a>"); 9 10 ????//02 属性操作11 ????// $().attr("")12 ????// $().attr("","")13 ????// $("p").attr("alex")14 ????// $("p").attr("alex","dsb")15 ????// $("p").removeAttr("class")16 17 ????// 03 class操作18 ????// $("p").addClass("c1")19 ????// $("p").removeClass("c1")20 21 ????//04 jquery 获取索引值4补充:jquery索引获取
1 ul> 2 <li id="foo">foo</li> 3 <li id="bar">bar</li> 4 <li id="baz">baz</li> 5 </ul> 6 ?7 <script> 8 ????i1 = $(‘li‘).index(document.getElementById(‘bar‘)); //1，传递一个DOM对象，返回这个对象在原先集合中的索引位置 9 ????i2 = $(‘li‘).index($(‘#baz‘)); //1，传递一个jQuery对象10 ????i3 = $(‘li‘).index($(‘li:gt(0)‘)); //1，传递一组jQuery对象，返回这个对象中第一个元素在原先集合中的索引位置11 ????i4 = $(‘#baz‘).index(‘li‘); //1，传递一个选择器，返回#bar在所有li中的索引位置12 ????i5 = $(‘#baz‘).index(); //1，不传递参数，返回这个元素在同辈中的索引位置。13 ????console.log(i1,i2,i3,i4,i5)14 </script>15 16 17 <!--//用于二级或者三级联动 -->18 <div id="nav">19 <a href="http://www.jbxue.com/">建站素材</a>20 <a href="http://www.jbxue.com/">jquery特效</a>21 <a href="http://www.jbxue.com/">脚本学堂</a>22 <a href="http://www.jbxue.com/wb/">网站编程</a>23 </div>24 25 <script>26 ????$("#nav a").click(function(){27 ????//四个经典的用法28 ????????var index1 = $("#nav a").index(this);29 ????????var index2 = $("#nav a").index($(this));30 ????????var index3 = $(this).index()31 ????????var index3 = $(this).index("a")32 ????????alert(index3);33 ????????return false;34 ????});35 </script>参考自:https://www.cnblogs.com/yuanchenqi/articles/6936986.html?tdsourcetag=s_pctim_aiomsg
jquery选择器和基本操作
原文地址：https://www.cnblogs.com/Mixtea/p/10454486.html