1.jQuery中的和和和()使用
//点击按钮进行图片隐藏jQuery和js的区别 <head> <script src="js/jquery-3.6.4.js"></script> </head> <body> <button id="btn">jQuery</button> <div id="oDiv1"></div> <button id="btn2">原生js</button> <div id=“oDiv2”></div> <script> //获取btn设置点击事件 隐藏oDiv1 //链式编程 //jQuery $("#btn").click(function()){ $("#oDiv1").hide(3000); }); //js document.getElementById("btn2").onclick=function(){ document.getElementById("oDiv2").style.dispaly="none"; } </script> </body>
1.1.jQuery文件的结构
//沙箱结构，自执行函数
（function（）｛｝）（）
或
（function（）｛｝（））
列：
（function（）｛ elert（123）； ｝）（）
1.2.任何使用$的地方都可以用jQuery替代
1.3.jQuery文件中对外提供了两个属性：$和jQuery
1.4.$这个符号可以当做函数使用，也可以当做对象使用
$.type(值) 等价于js中的typeof（） //查看类型
“（）可以叫做
的构造函数
；（）可以叫做jQuery的构造函数”；（）可以叫做jQuery的构造函数”；(function（）｛｝)，（
选择器），（“选择器”），（“选择器”），（“标签”）， $（DOM对象）
2.jQuary选择器的使用
<head> <script src=“js/jQuery-3.6.4.js"></script> <script> //1.载入函数--如果代码写在body中，必须有 $(document).ready(function(){ alert(123); }); //简写 $(function(){ alert(456); }); </script> </head> <body> <ul id="oUl"> <li class="a">item1</li> <li>item2</li> <li>item3</li> <li class="a">item4</li> <li>item5</li> <p>haha</p> <span>hehe</span> <p>haha</p> <ol> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <ul> <li>xx1</li> <li>xx2</li> <li>xx3</li> <li>xx4</li> </ul> </ol> </ul> <table id="tab" border="1" width="100%"> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> <h2>表单选择器的使用</h2> <input checked type="radio" name="sex" value="男">男 <input type="radio" name="sex" value="女">女 <input checked type="checkbox" name="hobby" value="唱歌">唱歌 <input type="checkbox" name="hobby" value="跳舞">跳舞 <input type="checkbox" name="hobby" value="rap">rap <input checked type="checkbox" name="hobby" value="喝水">喝水 <input type="checkbox" name="hobby" value="撸铁">撸铁 <script> //基本选择器的使用 //基本语法：$("选择器的名称");===》返回结果标签对象 //id 选择器+ " # " //class 类选择器+ " . " //元素 元素选择器 直接编写标签名称即可 $(function(){ //css方法 设置标签的样式 以键值对的形式进行编写 //一个属性的设置 $("#oUl").css("background","red"); //多个属性 $("#oUl").css({"background":"red","color":"yellow"}); //类选择器 $(".a").css("background","red"); //元素选择器 $("li").css("background","red"); //通配符选择器 $("*").css("background","red"); //组合选择器 $(".a,p").css("background","red"); //层次选择器 //后代选择器 $("#oUl li").css("background","red"); //子代选择器 $("#oUl>li").css("background","red"); //过滤选择器 //获取oUl下的第一个li标签 $("#oUl>li:first").css("background","red"); //获取oUl下最后一个li标签 $("#oUl>li:last").css("background","red"); //eq(index) 根据标签的下标获取 $("#oUl>li:eq(2)").css("background","red"); //获取偶数下标的标签 even $("#oUl>li:even").css("background","red"); //获取奇数下标的标签 odd $("#oUl>li:odd").css("background","red"); //表格隔行换颜色 $("#tab>tbody>tr>li:even").css("background","red"); $("#tab>tbody>tr>li:odd").css("background","yellow"); //gt大于 lt小于 //获取oUl下的所li 求出索引大于2的li $("#oUl>li:gt(2)").css("background","yellow"); //获取oUl下的所li 求出索引2,3,4 $("#oUl>li:gt(0):lt(4)").css("background","yellow"); // }); </script> //通过表单选择器 获取被选中的值 //同一行代码中 js与jQuery不能混合使用 console.log($("input:checked").val()); //获取被选中的复选框value值 console.log($("input:checkbox:checked")); //i代表下标 n代表对象 $("input:checkbox:checked").each(function(i,n)){ console.log(i,n,$.type(n)); console.log($(this).val()); } //$.each(遍历的数组或者对象，function(){}); <body>
