什么是jQuery对象？
jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();
$("#test").html()
//意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法
// 这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML;
//虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错
//约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$.
var $variable = jQuery 对象
var variable = DOM 对象
$variable[0]：jquery对象转为dom对象 $("#msg").html(); $("#msg")[0].innerHTML
jquery的基础语法：$(selector).action()
寻找元素(选择器和基本筛选器)
基本选择器
$("*") $("#id") $(".class") $("element") $(".class,p,div")
层级选择器
$(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")
$(".outer div"):outer下的div标签
$(".outer>div"):子节点
$(".outer+div"):挨着向下的兄弟节点
$(".outer~div"):向下找兄弟节点
基本筛选器
$("li:first") $("li:last") $("li:eq(2)") $("li:even") $("li:gt(1)")
$("li:first"):第一个li标签
$("li:last"):最后一个li标签
$("li:eq(2)"):第三个li标签
$("li:even"):偶数
$("li:odd"):奇数
$("li:gt(1)"):大于1
$("li:lt(1)"):小于1
属性选择器
$('[id="div1"]') $('["alex="sb"][id]')
表单选择器
扫描二维码关注公众号，回复：
5585941 查看本文章
$("[type='text']")----->$(":text") 注意只适用于input标签 : $("input:checked")
筛选器
过滤筛选器
$("li").eq(2) $("li").first() $("ul li").hasclass("test")
$("li").eq(2).css("color","red");
查找筛选器
$("div").children(".test"):找到子代标签[class为test]
$("div").find(".test") :找到所有子孙标签[class为test]
$(".test").next()：下一个同级标签
$(".test").nextAll()：下面所有同级标签
$(".test").nextUntil():
$("div").prev()：上一个同级标签
$("div").prevAll()：上面所有同级标签
$("div").prevUntil()：
$(".test").parent()：找到父级标签
$(".test").parents() ：找到所有父级标签
$(".test").parentUntil() ：
$("div").siblings():兄弟标签
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> </title> <style> .outer{ height: 1000px; width: 100%; } .menu{ float:left; background-color:beige; width:30%; height: 500px; } .content{ float:left; background-color:darkslateblue; width:70%; height: 500px; } .title{ background-color:wheat; line-height: 40px; } .hide{ display: none; } </style> </head> <body> <div class="outer"> <div class="menu"> <div class="item"> <div class="title" onclick="show(this);">菜单一</div> <div class="con hide"> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div> </div> <div class="item"> <div class="title" onclick="show(this);">菜单二</div> <div class="con hide"> <ul> <li>4</li> <li>5</li> <li>6</li> </ul> </div> </div> <div class="item"> <div class="title" onclick="show(this);">菜单三</div> <div class="con hide"> <ul> <li>7</li> <li>8</li> <li>9</li> </ul> </div> </div> </div> <div class="content"></div> </div> <script src="js/jquery-3.3.1.min.js"></script> <script> //self为我们点击的标签对象 function show(self){ //点击移除hide class，则出现内容 $(self).next().removeClass('hide'); //点击给别的增加hide，隐藏别的内容 $(self).parent().siblings().children('.con').addClass('hide'); } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab</title> <script src="js/jquery-3.3.1.min.js"></script> <script> function tab(self){ var index=$(self).attr("xxx"); $("#"+index).removeClass("hide").siblings().addClass("hide"); $(self).addClass("current").siblings().removeClass("current"); } </script> <style> *{ margin: 0px; padding: 0px; } .tab_outer{ margin: 0px auto; width: 60%; } .menu{ background-color: #cccccc; /*border: 1px solid red;*/ line-height: 40px; } .menu li{ display: inline-block; } .menu a{ border-right: 1px solid red; padding: 11px; } .content{ background-color: tan; border: 1px solid green; height: 300px; } .hide{ display: none; } .current{ background-color: darkgray; color: yellow; border-top: solid 2px rebeccapurple; } </style> </head> <body> <div class="tab_outer"> <ul class="menu"> <li xxx="c1" class="current" onclick="tab(this);">菜单一</li> <li xxx="c2" onclick="tab(this);">菜单二</li> <li xxx="c3" onclick="tab(this);">菜单三</li> </ul> <div class="content"> <div id="c1">内容一</div> <div id="c2" class="hide">内容二</div> <div id="c3" class="hide">内容三</div> </div> </div> </body> </html>
操作元素(属性，css，文档处理)
属性操作
--------------------------属性
固有属性
$("").attr();
$("").removeAttr();
自定义属性
$("").prop();
$("").removeProp();
--------------------------CSS类
$("").addClass(class|fn)
$("").removeClass([class|fn])
--------------------------HTML代码/文本/值
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])
---------------------------CSS属性
$("").css("color","red")
$("").css({"color":"red","background-color":"green"})
<input id="chk1" type="checkbox" />是否可见 <input id="chk2" type="checkbox" checked="checked" />是否可见 <script> //对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。 //对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。 //像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此 //需要使用prop方法去操作才能获得正确的结果。 // $("#chk1").attr("checked") // undefined // $("#chk1").prop("checked") // false // ---------手动选中的时候attr()获得到没有意义的undefined----------- // $("#chk1").attr("checked") // undefined // $("#chk1").prop("checked") // true console.log($("#chk1").prop("checked"));//false console.log($("#chk2").prop("checked"));//true console.log($("#chk1").attr("checked"));//undefined console.log($("#chk2").attr("checked"));//checked </script> attr和prop
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.11.3.min.js"></script> <script> function selectall(){ $("table :checkbox").prop("checked",true) } function cancel(){ $("table :checkbox").prop("checked",false) } function reverse(){ // var idlist=$("table :checkbox") // for(var i=0;i<idlist.length;i++){ // var element=idlist[i]; // // var ischecked=$(element).prop("checked") // if (ischecked){ // $(element).prop("checked",false) // } // else { // $(element).prop("checked",true) // } // // } // jquery循环的两种方式 //方式一 // li=[10,20,30,40] // dic={name:"yuan",sex:"male"} // $.each(li,function(i,x){ // console.log(i,x) // }) //方式二 // $("tr").each(function(){ // console.log($(this).html()) // }) $("table :checkbox").each(function(){ $(this).prop("checked",!$(this).prop("checked")); // if ($(this).prop("checked")){ // $(this).prop("checked",false) // } // else { // $(this).prop("checked",true) // } // 思考:如果用attr方法可以实现吗? }); } </script> </head> <body> <button onclick="selectall();">全选</button> <button onclick="cancel();">取消</button> <button onclick="reverse();">反选</button> <table border="1"> <tr> <td><input type="checkbox"></td> <td>111</td> </tr> <tr> <td><input type="checkbox"></td> <td>222</td> </tr> <tr> <td><input type="checkbox"></td> <td>333</td> </tr> <tr> <td><input type="checkbox"></td> <td>444</td> </tr> </table> </body> </html>