一:What?是什么？
- JavaScript库：封装了很多JS代码
- JavaScript库：jQuery(90%)、Ext JS
- 官方地址：http://jquery.com/
二:Why?为什么要学习？
- 查看官方jQueryLOGO：write less，do more
- 为了简化JavaScript开发：选择器、CSS、HTML事件处理、JS动画、浏览器兼容、丰富插件
三:Where?哪些情况下用？
- 中大型网站开发
- 是一些前端框架的基础，比如EasyUI，Bootstrap
四:How?怎么用？
- 工具：HBuilder
- 案例1：点击按钮获取输入框中的值（JS对比jQuery）
js方式① <script> window. Onload=function(){ //根据id拿到按钮 let btn=document.getElementById("btna"); //给按钮添加点击事件 匿名函数 btn.onclick=function( ){ //根据id拿到文本框的值 let str=document.getElementById("aa").value; //弹出 alert(str); } } </script> jQuery方式② <!-- 引入外部js=jQuery的类库 --> <script src="jquery-3.6.4.js"></script> <!-- 另起一个script块 --> <script> //页面载入的函数=加载DOM // $(document).ready(function( ){ // alert(1); // }) //简便写法 $=jQuery $(function(){ //相当于window.onload 案例一 let btn=$("#btnb"); btn.click(function(){ let str=$("#aa").val( ); alert(str); }) <body> <h2>jQuery入门&选择器</h2> <h3>一.jQuery入门</h3> <h4>1.点击按钮弹出文本框的值</h4> <input type="text" id="aa"/> <input type="button" id="btna" value="点击[纯js方式]"/> <input type="button" id="btnb" value="点击[jQuery方式]"/> <body/>
- 3.使用jQuery步骤
3.1.1.下载jQuery库 开发版本：jquery-3.3.1.js 生产版本：jquery-3.3.1.min.js
3.1.2.生产版本：jquery-3.3.1.min.js
3.1.3.使用
五:jQuery选择器& 层次选择器
一.基本选择器
- ID选择器：#ID
- 类选择器：.class
- 元素选择器:element
- 通配符：*
- 多个选择器(并集)：selector1,selector2
- 多个选择器(交集)：selector1 selector2
- 查找所有元素，查询子元素
案例2：分别使用基本选择器，改变元素的背景颜色和字体颜色（div、p、span）
<h3>二.jQuery选择器</h3> <h4>2.1-2.2 基本选择器 & 层次选择器</h4> <div id="xx"> <p>这是第一个div的段流 <span>啦啦啦啦啦</span></p> <span>瑶瑶天天开心</span> <h3>-------------</h3> <span>很好喝</span> </div> <div class="yy"> 这是第二个div </div> <p>这是外面的段流</p> <span>瑶瑶很厉害</span> // 2.1-2.2 基本选择器 & 层次选择器 //单个样式 // $("#xx").css("background","yellow");//id选择器 # //多个样式 //背景是粉红色 字体是红色 类选择器 . // $(".yy").css({"background":"pink","color":"red"}); //标签选择器 // $("div").css("background","yellow"); //通配符 // $("*").css("background","yellow"); //并集 所有的p和span // $("p,span").css("color","red"); //找后代标签 // $("div span").css("color","pink"); //找儿子 父子关系 // $("p>span").css("color","pink") //紧跟着p的span标签 同级 // $("p+span").css("color","green"); //找p后面所有的span标签 同级 // $("p~span").css("color","green");
二.过滤选择器
- 参考jQuery文档
- 获取第一个元素:first
- 最后一个元素:last
- 获取偶数下标的元素:even
- 获取奇数下标的元素:odd
- 获取某一范围元素 :gt大于 :lt小于
案例4：使用过滤选择器，选择li中的元素
<h4>2.3 过滤选择器</h4> <ul> <li>0-瑶瑶</li> <li>0-欣欣</li> <li>0-慧慧</li> <li>0-辉辉</li> <li>0-哈哈</li> <li>0-简介</li> </ul> //过滤选择器 //第一个 // $("ul>li:first").css("color","green"); //最后一个 // $("ul>li:last").css("color","green"); //第3个 // $("ul>li:eq(2)").css("color","green"); //倒数第2个 // $("ul>li:eq(-2)").css("color","green"); // 下标为偶数 奇数行 // $("ul>li:even").css("color","green"); // 下标为奇数 偶数行 // $("ul>li:odd").css("color","pink"); //大于0 // $("ul>li:gt(0)").css("color","pink"); //小于6 // $("ul>li:lt(6)").css("color","pink"); //0>x>6 先小于后大于 // $("ul>li:lt(5):gt(0)").css("color","pink");
案例5：表格隔行换色
<h4>案例5:表格隔行换色</h4> <table border="1px" width="400px"> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table> //案例5:表格隔行换色 $("table tr:even").css("background","pink"); $("table tr:odd").css("background","green");
三.表单选择器
- 参考jQuery文档
- 获取选择单选框的值
- 获取选择多选框的值
- 获取选择下拉值
案例6：获取表单中的单选、多选、下拉值
<h4>2.4表单选择器</h4> <form action="" id="myForm"> 性别:<input type="radio" checked="checked" name="ssex" value="男"/>男 <input type="radio" name="ssex" value="女"/>女<br/> 爱好:<input type="checkbox" value="唱歌"/>唱歌 <input type="checkbox" value="跳舞"/>跳舞 <input type="checkbox" value="打游戏"/>打游戏<br/> 地址:<select> <option value="河南省">河南省</option> <option value="湖南省">湖南省</option> <option value="湖北省">湖北省</option> </select><br/> <input type="button" value="提交" id="ok"/> </form> // 2.4表单选择器 $("#ok").click(function(){ // 拿性别的值 let sex=$("#myForm input:radio:checked").val(); console.info(sex); // 拿爱好的值 $("#myForm input:checkbox:checked").each(function(){ console.log($(this).val()); }) // 拿地址 :selected:被选中的 let address=$("#myForm select option:selected").val(); console.log(address); });
