11. jqurey 是什么? jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 库。jQuery 极大地简化了 JavaScript 编程，它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
2. jqurey的 特性 ：具有独特的链式语法和短小清晰的多功能接口；
具有高效灵活的css选择器，并且可对CSS选择器进行扩展；
拥有便捷的插件扩展机制和丰富的插件。
jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等
3.下面给大家介绍一下选择器的使用
1.//选择器的使用
//基本语法： $("选择器的名称");===》返回结果标签对象// id 选择器中+
// id 选择器中+ #
// class 类选择器 + .
// 元素 元素选择器 直接编写标签名称即可
引入jquery库
<!-- 载入函数 --> <script src="js/jquery-3.6.4.js"></script> <script> //1.载入函数--如果代码写在head中 必须要有 // $(document).ready(function(){ // alert(123) // }); // //简写 // $(function(){ // alert(456); // });
body主题
<body> <!-- > <--> <h2>基本选择器的使用</h2> <ul id="oUl"> <li class="a">item1</li> <li>item2</li> <li>item3</li> <li class="a">item4</li> <li>item5</li> <ol> <li>刘鑫1</li> <li>刘鑫2</li> <li>刘鑫3</li> <li>刘鑫4</li> <ul> <li>刘智1</li> <li>刘智2</li> <li>刘智3</li> <li>刘智4</li> </ul> </ol> </ul> <p>haha</p> <span>hehe</span> <p>haha</p> <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> <!-- --> <h2>表单选择器的使用</h2> <input checked type="radio" name = "sex" value = "男">男 <input type="radio" name = "sex" value = "女">女 <hr> <input checked type="checkbox" name = "hobby" value = "唱歌">唱歌 <input type="checkbox" name = "hobby" value = "跳舞">跳舞 <input checked type="checkbox" name = "hobby" value = "RAP">RAP <input type="checkbox" name = "hobby" value = "撸铁">撸铁 <input checked type="checkbox" name = "hobby" value = "听歌">听歌 </table> </body>
2.各类选择器的介绍与实践
//类选择器 // $(".a").css("color","red"); //元素选择器 // $("li").css("color","yellow") //通配符选择器 // $("*").css("background","yellow"); //组合选择器 // $(".a,p").css("color","yellow") //后代选择器 // $("#oUl li").css("color","green"); // 子代选择器 // $("#oUl>li").css("color","green") //过滤选择器 //获取oUl下的第一个li标签 // $("#oUl>li:first").css("color","green"); //最后一个 //$("#oUl>li:last").css("color","green"); // eq(index) 根据标签的下标获取 // $("#oUl>li:eq(2)").css("color","red"); //even 获取偶数下标的标签 // $("#oUl>li:even").css("color","red"); //odd 获取奇数下标的标签 // $("#oUl>li:odd").css("color","blue"); //表格隔行换颜色 $("#tab>tbody>tr:even").css("background","red"); $("#tab>tbody>tr:odd").css("background","yellow"); // gt lt //获取oUl下的所有li 求出索引大于2的li // $("#oUl>li:gt(2)").css("color","red"); //下标小于4 // $("#oUl>li:lt(3)").css("color","red"); //获取2 3 4 //区间标签获取 优先：先小于 后大于。 //$("#oUl>li:lt(4):gt(0)").css("color","red"); //通过表单选择器 获取被选中的值 console.log($("input:checked").val()); //同一行代码中 js与jQUery不能混合使用 //被选中的复选框的vlaue值 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(){}); });
jquery大纲：
制作不易，望多鼓励。
