WEB01_Day05(上)-jQuery框架介绍、JavaScript与jQuery对象转换、jQuery选择器

一、jQuery 框架介绍

1.1 什么是 jQuery

　　官网：https://jquery.com/

　　jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。它通过易于使用的 API 使 HTML 文档遍历和操作、事件处理、动画和 Ajax 等工作变得更加简单，该 API 可在多种浏览器上运行。jQuery 结合了多功能性和可扩展性，改变了数百万人编写 JavaScript 的方式。宗旨是写的少，做的多。jQuery是对JavaScript做的进一步封装

1.2 特点

  • 轻量级别

  • 符合CSS3标准

  • 跨浏览器

1.3 下载 jQuery

  • 拉动页面到最后，点击“jQuery CDN”

  • 点击“See all versions of jQuery Core” 查看所有版本

  • 选择自己想要的版本（uncompressed是未压缩版本，minified是压缩版本），在弹出的模态框中选择http地址，在浏览器新标签中打开然后另存为即可

1.4 压缩版和未压缩版的区别

带 min 的是压缩版的，我们可以直观的看到未压缩版的文件是 274KB ，而压缩版的是 87KB。

　　通过对比，我们可以直观的看到，未压缩版的注释和代码都非常的一目了然。而压缩版的是省略了注释，然后删除了所有的空格和换行，并把所有的代码整理成了一行。同时将一些长的变量名用简单的 a b c d 代替。除了这些，我们在使用的时候，这两者是没有区别的，也就是说，两者可以相互替换。不过我们平常使用的时候，一般用的是未压缩版的，因为可以很方便的看到 jQuery 的源码，而在上线的时候，会将其替换为压缩版的。

1.5 应用

  • Dom元素的操作和遍历

  • 事件处理

  • Ajax

1.6 体验使用jQuery

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>jQuery初体验</title>
 </head>
 <body>
     <table id="tb" border="1" cellspacing="0">
         <tr>
             <th>学号</th>
             <th>姓名</th>
             <th>性别</th>
             <th>住址</th>
             <th>电话</th>
         </tr>
         <tr>
             <td>1</td>
             <td>陈同学</td>
             <td>男</td>
             <td>中国XXX地区</td>
             <td>110</td>
         </tr>
         <tr>
             <td>2</td>
             <td>吴同学</td>
             <td>男</td>
             <td>中国XXX地区</td>
             <td>119</td>
         </tr>
         <tr>
             <td>3</td>
             <td>常同学</td>
             <td>男</td>
             <td>中国XXX地区</td>
             <td>112</td>
         </tr>
         <tr>
             <td>4</td>
             <td>谷同学</td>
             <td>女</td>
             <td>中国XXX地区</td>
             <td>120</td>
         </tr>
     </table>
     <!-- jQuery库文件的引入 -->
     <script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
     <script type="text/javascript">
         /* 使用js方式实现表格的隔行变色 */
         //1.获取表格中的tr标签,返回的是数组对象
         //var trs = tb.getElementsByTagName("tr");
         //2.取出当前获取tr标签中为偶数的表格行数，设置颜色为蓝色
         //for (var index = 0; index < trs.length; index++) {
             //表格中第一行，在数组中的下标为0
           //  if (index % 2 != 0) {
                // trs[index].style.backgroundColor = "#aaccff";
            // }
       //  }
 ​
         /* 
         使用jQuery方式实现表格的隔行变色 
         jQuery提供了相关的选择器，当前选择使用过滤选择器进行对偶数行设置背景色为蓝色
         */
        $("#tb tr:odd").css("background-color","#aaccff");
 ​
     </script>
 </body>
 </html>

通过输入框中的内容进行更改div中的文本信息

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>jQuery二次体验</title>
 </head>
 <body>
     <div id="d1">今天是星期二</div>
     <input type="text" id="txt" value="天天都是星期日">
     <input type="button" value="赋值" id="btn">
 ​
     <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
 ​
     <script type="text/javascript">
         /* 动态绑定:js方案 */
         // btn.onclick = fn1;
 ​
         /* 动态绑定:jQuery方案 */
         $("#btn").click(function() {
             /*
             $("#txt").val()   相当于js中document.getElementById("txt").value
             $("#d1").html()   相当于js中document.getElementById("d1").innerHTML
             $("#d1").text()   相当于js中document.getElementById("d1").innerText
              */
             $("#d1").text($("#txt").val());
            
         });
        
     </script>
 </body>
 </html>

 

二、JavaScript和 jQuery 对象之间相互转换

  • JavaScript和jQuery对象可以出现在一起混合书写。

  • JavaScript和jQuery对象不可以进行混合使用(js不能调用jq所提供的API，jq不能调用js所提供的API)

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>JavaScript和JQuery对象之间的转换</title>
 </head>
 <body>
     <input type="text" id="txt">
     <input type="button" value="js转jq" id="sq">
     <input type="button" value="jq转js" id="qs">
 ​
     <script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
     <script type="text/javascript">
         /* js转换jq */
         $("#sq").click(function() {
             //1.获取js对象
             var jsObj = window.document.getElementById("txt");
             //2.将js对象转换为jq对象
             var jqObj = $(jsObj);
             console.log(jsObj.value + '    ' + jqObj.val());
         });
 ​
         /* jq转换js */
         $("#qs").click(function() {
             //1.获取jq对象
             var jqObj = $("#txt");
             //2.将jq对象转换为js对象
             var jsObj = jqObj[0];
             console.log(jsObj.value + '    ' + jqObj.val());
         });
 ​
 ​
 ​
     </script>
 </body>
 </html>

 

三、jQuery 选择器

3.1 基础选择器

  • 标签选择器 $("div")

  • id 选择器 $("#id")

  • 类选择器 $(".class")

  • 分组选择器 $("div,#id,.class")

  • 任意选择器 $("*")

不存在优先级,此处是选择器，CSS 样式是有优先级的

3.2 层级选择器

  • $("div span") 匹配div里面的所有span元素包括子孙后代

  • $("div>span") 匹配div里面所有的span子元素

  • $("div+span") 匹配div的弟弟span

  • $("div~span") 匹配div的弟弟们span

层级相关的方法:

  • $("#abc").siblings("div") 匹配id为abc元素的所有兄弟

  • $("#abc").prev() 匹配id为abc元素的哥哥元素

  • $("#abc").prevAll() 匹配id为abc元素的哥哥们元素

  • $("#abc").next () 匹配id为abc元素的弟弟元素

  • $("#abc").nextAll() 匹配id为abc元素的弟弟们元素

  • $("#abc").parent() 匹配id为abc元素的父元素

  • $("#abc").children() 匹配id为abc元素的子元素们

3.3 过滤选择器

  • $("div:first") 匹配所有div中的第一个

  • $("div:last") 匹配所有div中的最后一个

  • $("div:eq(n)") 匹配所有div中下标等于n的

  • $("div:lt(n)") 匹配所有div中下标小于n的 n从0开始

  • $("div:gt(n)") 匹配所有div中下标大于n的

  • $("div:not(.abc)") 匹配所有div中class值不等于abc的

  • $("div:even") 匹配所有div中下标为偶数的

  • $("div:odd") 匹配所有div中下标为奇数的

3.4 可见选择器

  • $("div:visible") 匹配所有显示的div (display 属性none)

  • $("div:hidden") 匹配所有隐藏的div

隐藏显示相关的方法

  • $("#abc").show() 让隐藏的元素显示

  • $("#abc").hide() 让显示的元素隐藏

  • $("#abc").toggle() 隐藏显示状态切换

3.5 内容选择器

  • $("div:has(p)") 匹配包含p子元素的div

  • $("div:empty") 匹配空的div

  • $("div:parent") 匹配非空的div

  • $("div:contains('xxx')") 匹配包含xxx文本的div

3.6 属性选择器

  • $("div[属性名]") 匹配包含某个属性的所有div

  • $("div[属性名='值']") 匹配某个属性名=值的所有div

  • $("div[属性名!='值']") 匹配某个属性名不等于值的所有div

3.7 子元素选择器

  • $("div:first-child") 匹配是div并且是第一个并且是子元素

  • $("div:last-child") 匹配是div并且是最后一个并且是子元素

  • $("div:nth-child(n)") 匹配是div并且是第n个并且是子元素 n从1开始

3.8 表单选择器

  • $(":input") 匹配所有的控件 还包括 select 和 textarea文本域

  • $(":password") 匹配所有的密码框

  • $(":radio") 匹配所有的单选

  • $(":checkbox") 匹配所有的多选

  • $(":checked") 匹配所有选中的单选、多选和下拉选

  • $("input:checked") 匹配所有选中的单选和多选

  • $(":selected") 匹配所有选中的下拉选

 

四、拓展

如何进行设置浏览器页面title的左侧图标

 <head>
     <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>

 

posted @ 2021-08-18 23:32  Coder_Cui  阅读(214)  评论(0)    收藏  举报