全栈架构师之路

Appearance

jQuery入门 ​

案例目标 ​

  • 定时广告

  • 表格隔行换色

  • 全选全不选

jQuery简介 ​

jQuery概述 ​

jquery 是一个优秀的 javascript 的轻量级框架，兼容 css3 和各大浏览器，提供了 dom、events、animate、ajax 等简易的操作。并且 jquery 的插件非常丰富，大多数功能都有相应的插件解决方案。jquery 的宗旨是write less do more。

下载&使用 ​

下载 ​

下载地址：https://code.jquery.com/；

1527729786578

【版本说明】

现在官网上有3个系列的版本：1.x、2.x、3.x
1.x系列:
 该系列为浏览器兼容版，主要是兼容IE9以下的浏览器，正因如此，该系列是企业开发中的主流版本
从1.9.0开始，jquery在整体的设计上有了重大变革，几乎相当于重写了！主要是为了解决查询性能下降的问题
  
2.x系列：
 专门为新一代浏览器设计，不再兼容IE9以下的浏览器！  

3.x系列：
 该系列只是版本的全新命名法，在功能上没有太大的变化，主要是为了解决jquery版本太多太乱的问题！
该系列有2组不同的发布文件：现在的1.x版本的继任者将称为jQuery Compat 3.x，而jQuery 2.x则由jQuery 3.x接棒。
可是，所谓的兼容版jQuery Compat 3.x的下载地址并没有出现在官网上，这点着实让jquery的爱好者有些失望！只能静观其变了。。。

【注意】本课程使用的 jQuery 版本是 jquery-3.3.1。

【软件包说明】

下载的软件包有两种：生产版（压缩版，迷你版）和开发版（未压缩版、完整版）

1531322189388

两种软件包的运行效果是一样的，发布版只是把开发版中多余的空白符(空格、制表符)和注释去掉了， 并且缩短了一些变量名称、方法中的参数名称和函数名称的定义，这样做的目的是压缩软件包的体积， 从而加快网页的加载和脚本的执行速度。

使用 ​

我们使用的 jquery 属于第三方技术，所以使用它的功能需要导入类库。

引入方式：在需要使用 jquery 的 html 中使用 js 的引入方式进行引入

html
<script type="text/javascript" src="../js/jquery-3.3.1.js" ></script>

jQuery核心语法 ​

jq 的核心语法：$("选择器")， $(callback)，$(html)。

jQuery和JS的区别 ​

jQuery 本质上虽然也是 js，但如果使用 jquery 的属性和方法那么必须保证对象是 jquery 对象而不是 js 对象。使用 js 获取的对象是 js 对象，使用 jquery 方式获取的对象是 jquery 对象。两者的关系与区别总结如下：

jQuery对象和JS对象 ​

【案例】：对比 jQuery 对象和 JS 对象

  1. 分别使用 document 对象和$(selector)获取素材中的 span 标签；
  2. 使用 console.log()方法打印获取的两个对象，并观察；

【素材】

html
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title></title>
</head>
<body>
 <span id="mySpan">点墨星河</span>
</body>
</html>

【参考代码】

html
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
 </head>
 <body>
  <span id="mySpan">点墨星河</span>
 </body>
 <script type="text/javascript">
  var domSpan = document.getElementById("mySpan");
  var jSpan = $("#mySpan");
 </script>
</html>

【在控制开打印这两个对象】

【结论】：

  1. JS 对象（DOM）:

    通过 dom 操作获取，本质上是一个标签对象；

  2. jQuery 对象:

    通过 jQuery 的方法获取，本质上是一个数组。这个数组中包含了标签对象和一些操作方法；

JS和jQuery对象互转 ​

jQuery对象转JS对象 ​

jQuery 对象是一个类数组的对象，其中保存的第一个元素就是 dom 对象，所以我们可以使用以下两种方式从 jQuery 对象中获取 dom 对象；

  1. jQuery 对象[0]；
  2. jQuery 对象.get(0)；
JS对象转jQuery对象 ​

​ JS 对象转 jQuery 对象很简单，只需要使用$将 JS 对象包裹即可：$(dom)

1527732923807

JS & jQuery方法不通用 ​

虽然JS对象和jQuery对象之间可以相互转换，但是两个对象的方法不通用，即：

JS对象和jq对象之间的方法和属性不通用 。

JS & jQuery事件绑定 ​

js 的事件的写法：js 对象.onclick = function(){ ... ... } jquery 的事件的写法：jquery 对象.click( function(){ ... ... } )

【案例】给 button 绑定点击事件，点击后弹出"Hello jQuery"

【素材】

html
<!DOCTYPE html>
<html>

 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>

 <body>
  <input id="myinput" onclick = "clickBtn()" type="button" value="按钮" />
 </body>
  <script>
    
  </script>
</html>

【参考代码】

html
<!DOCTYPE html>
<html>

 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>

 <body>
  <input id="myinput" type="button" value="按钮" />
 </body>
 <script type="text/javascript" src="../js/jquery-3.3.1.js" ></script>
 <script type="text/javascript">
  //dom对象绑定点击事件
//  document.getElementById("myinput").onclick = function(){
//   alert("Hello jQuery!");
//  }
  
  //jQuery对象绑定事件
  $("#myinput").click(function(){
   alert("Hello jQuery!");
  })
  
 </script>
</html>

onload事件 ​

js 的页面加载完毕：window.onload = function()

jquery 的页面加载完毕：$(document).ready(function(){... ... })

html
<!DOCTYPE html>
<html>

 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>

 <script type="text/javascript" src="../js/jquery-3.3.1.js" ></script>
 <script type="text/javascript">

      //1.js中的onload事件
      window.onload = function(){
          alert("js的onload事件1............");
      }

      window.onload = function(){
          alert("js的onload事件2............");
      }


      //2.jQuery的onload事件
      jQuery(document).ready(function(){
          alert("jQuery的onload事件1......");
      })

      jQuery(document).ready(function(){
          alert("jQuery的onload事件2......");
      })

      //jQuery的onload事件的简写方式
      $(function(){
          alert("jQuery的onload事件的简写方式.................");
      })
 
 </script>

</html>

【注意事项】jQuery 的 onload 事件之后都使用简写方式：

javascript
//jQuery的onload事件的简写方式
$(function(){
    alert("jQuery的onload事件的简写方式.................");
})

jQuery常用事件 ​

事件使用方法说明
click()jq对象.click( function(){//...} )鼠标单击事件
blur()jq对象.blur( function(){//...} )失去焦点事件
change()jq对象.change( function(){//...} )内容改变事件
submit()jq对象.submit( function(){//...} )表单提交事件

选择器【重点】 ​

https://api.jquery.com/category/selectors/

http://hemin.cn/jq/

在我们的 css 中，我们已经学过了选择器。选择器的作用就是精确的选择标签。那么我们 js 中是通过 document 的方法来选择标签的。

这些方法名字太长，而且功能一般。但是我们的 jquery 提供了功能 非常强大的并且写法简单的 jquery 选择器。通过 jquery 选择器获取到这些标签，我们就可以通过 jquery 中的 dom 方法来操作这些标签。

jquery 常用的选择器有如下： 基本选择器，层级选择器，属性选择器，基本过滤选择器，表单属性选择器等

选择器示例说明
基本选择器$(element),$("#id"),$(".class"),$(element,element)元素，id，class，组合选择器
层级选择器$("A B "),$("A > B"),$("A + B"),$("A ~ B")根据标签之间的层级关系进行选择
属性过滤选择器$("A[属性名]"),$("A[属性名!=值]")根据标签的属性对选中的标签进行过滤
基本过滤选择器$("div:first"),$("div:even")根据标签所处的位置及特性进行过滤
表单对象属性过滤选择器$(":selected"),$("input:disabled")根据表单对象的属性对选中的标签进行过滤
可见性过滤选择器$("input:visible"),$("input:hidden")根据表单是否可见进行过滤。不可见的元素包括：1.隐藏域；2.style="display:none"
内容过滤选择器$("div:has('selector')")根据元素中包含的内容过滤
表单过滤选择器$(":input")$(":text")根据表单的特性进行过滤

基本选择器【重点】 ​

基本选择器主要有：标签名（元素）选择器，id 选择器，class 选择器和组合选择器；如下：

选择器使用示例说明
#id$("#idVal")根据标签的id属性值选择
element$("p"),$("div")根据标签名选择具有相同标签名的标签
.class$(".classVal")根据标签的class属性值，选择具有相同class属性值的元素
*$("*")选择页面上的所有标签
selector1,selector2,selectorN$(div,p)将多个选择器选中的标签合并返回

【案例】基本选择器练习

【需求】根据按钮上的提示信息，完成相关功能；

【参考代码】

html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>01-基本选择器.html</title>
  <!--   引入jQuery -->
  <script src="../js/jquery-1.11.0.min.js"></script>
  <script src="../js/assist.js"></script>
  <link rel="stylesheet" type="text/css" href="../css/style.css" />
  <script type="text/javascript">
   $(function(){
    //<input type="button" value="选择 id为 one 的元素." id="btn1" />
    //派发单击事件
    $("#btn1").click(function(){
     //执行功能
     $("#one").css("background-color","yellow");
    })
    
    //<input type="button" value="选择 class 为 mini 的所有元素." id="btn2" />
    //派发单击事件
    $("#btn2").click(function(){
     //执行功能
     $(".mini").css("background-color","green");
    })
    
    
    //<input type="button" value="选择 元素名是 div 的所有元素." id="btn3" />
    //派发单击事件
    $("#btn3").click(function(){
     //执行功能  :元素选择器
     $("div").css("background-color","pink");
    })
    
    //<input type="button" value="选择 所有的元素." id="btn4" />
    //派发单击事件
    $("#btn4").click(function(){
     //执行功能  :元素选择器
     $("*").css("background-color","yellow");
    })
    
    //<input type="button" value="选择 所有的span元素和id为two的元素." id="btn5" />
    //派发单击事件
    $("#btn5").click(function(){
     //执行功能  :元素选择器
     $("span,#two").css("background-color","red");
    })
   });
  </script>
 </head>

 <body>
  <button id="reset">手动重置页面元素</button>
  <input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
  <h3>基本选择器.</h3>

  <!-- 控制按钮 -->
  <input type="button" value="选择 id为 one 的元素." id="btn1" />
  <input type="button" value="选择 class 为 mini 的所有元素." id="btn2" />
  <input type="button" value="选择 元素名是 div 的所有元素." id="btn3" />
  <input type="button" value="选择 所有的元素." id="btn4" />
  <input type="button" value="选择 所有的span元素和id为two的元素." id="btn5" />
  <br /><br />

  <!-- 测试的元素 -->
  <div class="one" id="one">
   id为one,class为one的div
   <div class="mini">class为mini</div>
  </div>
  <div class="one" id="two" title="test">
   id为two,class为one,title为test的div.
   <div class="mini" title="other">class为mini,title为other</div>
   <div class="mini" title="test">class为mini,title为test</div>
  </div>
  <div class="one">
   <div class="mini">class为mini</div>
   <div class="mini">class为mini</div>
   <div class="mini">class为mini</div>
   <div class="mini">class为mini</div>
  </div>
  <div class="one">
   <div class="mini">class为mini</div>
   <div class="mini">class为mini</div>
   <div class="mini">class为mini</div>
   <div class="mini" title="tesst">class为mini,title为tesst</div>
  </div>
  <div style="display:none;" class="none">style的display为"none"的div</div>
  <div class="hide">class为"hide"的div</div>
  <div>
   包含input的type为"hidden"的div<input type="hidden" size="8" />
  </div>
  <span id="mover">正在执行动画的span元素.</span>
 </body>
</html>

层级选择器【掌握】 ​

根据元素之间的层级关系进行选择。

选择器名称
$("ancestor空格descendant")后代元素【重点】
$("parent>child")子代元素【重点】
$("A").find("B")后代元素
$("A").children("B")子代元素
$("prev").next()后一个同胞元素
$("prev").nextAll()后所有同胞元素
$("prev").prev()前一个同胞元素
$("prev").prevAll()前所有同胞元素
$("A").siblings("B")一般同胞元素

【案例】层级选择器练习

【需求】根据按钮上的提示信息，完成相关功能

【素材】

html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>02-层次选择器.html</title>
  <!--   引入jQuery -->
  <script src="../js/jquery-1.11.0.min.js"></script>
  <script src="../js/assist.js"></script>
  <link rel="stylesheet" type="text/css" href="../css/style.css" />
  <script type="text/javascript">
   $(function(){
    //<input type="button" value="选择 body内的所有div元素." id="btn1" />
    $("#btn1").click(function(){
     //执行功能  :div span
     $("body div").css("background-color","#FFFF00");
     
    })
    
    
    //<input type="button" value="在body内,选择子元素是div的。" id="btn2" />
    $("#btn2").click(function(){
     //执行功能  :div>span
     $("body>div").css("background-color","green");
     
    })
    
    //<input type="button" value="选择 id为one的所有后面的同胞div元素" id="btn3" />
    $("#btn3").click(function(){
     //执行功能  :div~span
     $("#one~div").css("background-color","blue");
     
    })
    
    
    //<input type="button" value="选择 id为two的第一个同胞div元素" id="btn4" />
    $("#btn4").click(function(){
     //执行功能  :div+span
     $("#two+div").css("background-color","yellow");
     
    })
    
    //<input type="button" value="选择 id为two的所有同胞div元素" id="btn5" />
    $("#btn5").click(function(){
     //执行功能  :div+span
     $("#two").siblings("div").css("background-color","yellow");
    })
   });
  </script>
 </head>

 <body>
  
  <h3>层次选择器.</h3>
  <button id="reset">手动重置页面元素</button>
  <input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />

  <input type="button" value="选择 body内的所有div元素." id="btn1" />
  <input type="button" value="在body内,选择子元素是div的。" id="btn2" />
  <input type="button" value="选择 id为one的所有后面的同胞div元素" id="btn3" />
  <input type="button" value="选择 id为two的第一个同胞div元素" id="btn4" />
  <input type="button" value="选择 id为two的所有同胞div元素" id="btn5" />

  <br />
  <br />

  <!-- 测试的元素 -->
  <div class="one" id="one">
   id为one,class为one的div
   <div class="mini">class为mini</div>
  </div>

  <div class="one" id="two" title="test">
   id为two,class为one,title为test的div.
   <div class="mini" title="other">class为mini,title为other</div>
   <div class="mini" title="test">class为mini,title为test</div>
  </div>

  <div class="one">
   <div class="mini">class为mini</div>
   <div class="mini">class为mini</div>
   <div class="mini">class为mini</div>
   <div class="mini"></div>
  </div>

  <div class="one">
   <div class="mini">class为mini</div>
   <div class="mini">class为mini</div>
   <div class="mini">class为mini</div>
   <div class="mini" title="tesst">class为mini,title为tesst</div>
  </div>

  <div style="display:none;" class="none">style的display为"none"的div</div>

  <div class="hide">class为"hide"的div</div>

  <div>
   包含input的type为"hidden"的div<input type="hidden" size="8" />
  </div>

  <span id="mover">正在执行动画的span元素.</span>

 </body>

</html>

属性过滤选择器【掌握】 ​

属性过滤选择器的作用：1.先选中；2.再根据属性过滤出想要的元素；

过滤器使用示例说明
[attribute]$("input[name]")过滤拥有指定属性的元素【重点】
[attribute=value]$("input[name=userName]")过滤出属性值 == value的元素【重点】
[attribute!=value]$("input[name!=password]")过滤出属性值 != value的元素
[attribute^=value]$("input[name^=myClass]")过滤出属性值以value开始的元素
[attribute$=value]$("input[name$=myClass]")过滤出属性值以value结束的元素
[attribute*=value]$("input[class*=myClass]")过滤出属性值含有value的元素
[attr1][attr2][attr3]...$("input[name=username][value!=张三]...")过滤指定的多个属性同时满足条件的元素，以上属性过滤的任意组合

【案例】属性过滤选择器

【需求】根据按钮上的需求完成指定的功能

【素材】

html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>06-属性选择器.html</title>
  <!--   引入jQuery -->
  <script src="../js/jquery-1.11.0.min.js"></script>
  <script src="../js/assist.js"></script>
  <link rel="stylesheet" type="text/css" href="../css/style.css" />
  <script type="text/javascript">
   $(function() {
    //<input type="button" value="选取含有 属性title 的div元素." id="btn1" />
    $("#btn1").click(function(){ 
     $("div[title]").css("background-color","yellow");
    })
    //<input type="button" value="选取 属性title值等于“test”的div元素." id="btn2" />
     $("#btn2").click(function(){
     $("div[title='test']").css("background-color","yellow");
    })
    
   });
  </script>

  <body>
   <button id="reset">手动重置页面元素</button>
   <input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label>
   <h3> 属性选择器.</h3>
   <input type="button" value="选取含有 属性title 的div元素." id="btn1" />
   <input type="button" value="选取 属性title值等于“test”的div元素." id="btn2" />
   <br /><br />
   <div class="one" id="one">
    id为one,class为one的div
    <div class="mini">class为mini</div>
   </div>
   <div class="one" id="two" title="test">
    id为two,class为one,title为test的div.
    <div class="mini" title="other">class为mini,title为other</div>
    <div class="mini" title="test">class为mini,title为test</div>
   </div>
   <div class="one">
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini"></div>
   </div>
   <div class="one">
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini" title="tesst">class为mini,title为tesst</div>
   </div>
   <div style="display:none;" class="none">style的display为"none"的div</div>
   <div class="hide">class为"hide"的div</div>
   <div>
    包含input的type为"hidden"的div<input type="hidden" size="8" />
   </div>
  </body>
</html>

基本过滤选择器【掌握】 ​

过滤方法使用示例说明
:odd$("tr:odd")奇数位置【重点】
:even$("tr:even")偶数位置【重点】
:not(selector)$("tr:not(tr:eq(2))")排除选择器以外的元素【重点】
:first$("tr:first")第一个位置
:last$("tr:last")最后一个位置
:eq(index)$("tr:eq(0)")选取指定索引的元素
:gt(index)$("tr:gt(1)")选取索引大于指定索引的元素
:lt(index)$("tr:lt(3)")选取索引小于指定索引的元素
:header$(":header")匹配所有标题元素(h1到h6)
:animated$(":animated")匹配所有正在执行动画效果的元素
:focus$("input:focus")匹配所有获取焦点的元素

【案例】基本过滤选择器练习

【需求】按照素材中按钮上的问题信息完成相应功能

html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>03-基本过滤选择器.html</title>
  <!--   引入jQuery -->
  <script src="../js/jquery-1.11.0.min.js"></script>
  <script src="../js/assist.js"></script>
  <link rel="stylesheet" type="text/css" href="../css/style.css" />
  <script type="text/javascript">
   $(function() {
    //<input type="button" value="选择第一个div元素." id="btn1" />
    
    $("#btn1").click(function(){
     //执行功能  :
     $("div:first").css("background-color","yellow");
     
    })
    //<input type="button" value="选择最后一个div元素." id="btn2" />
    $("#btn2").click(function(){
     //执行功能  :
     $("div:last").css("background-color","yellow");
     
    })
    //<input type="button" value="选择索引值为偶数 的div元素." id="btn3" />
    $("#btn3").click(function(){
     //执行功能  :
     $("div:even").css("background-color","blue");
     
    })
    
    
    //<input type="button" value="选择索引值为奇数 的div元素." id="btn4" />
    $("#btn4").click(function(){
     //执行功能  :
     $("div:odd").css("background-color","yellow");
     
    })
    
    //<input type="button" value="选择索引值等于3的div元素." id="btn5" />
    $("#btn5").click(function(){
     //执行功能  :
     $("div:eq(3)").css("background-color","aqua");
    })
    //<input type="button" value="选择索引值大于3的div元素." id="btn6" />
    $("#btn6").click(function(){
     //执行功能  :
     $("div:gt(3)").css("background-color","aqua");
    })
    
    
    //<input type="button" value="选择class不为one的 所有div元素." id="btn7" />
     $("#btn7").click(function(){
     //执行功能  :
     $("div:not('.one')").css("background-color","yellow");
    })
    
    
   });
  </script>
 </head>

 <body>
  <h3>基本过滤选择器.</h3>
  <button id="reset">手动重置页面元素</button>
  <input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />

  <input type="button" value="选择第一个div元素." id="btn1" />
  <input type="button" value="选择最后一个div元素." id="btn2" />
  <input type="button" value="选择索引值为偶数 的div元素." id="btn3" />
  <input type="button" value="选择索引值为奇数 的div元素." id="btn4" />
  <input type="button" value="选择索引值等于3的div元素." id="btn5" />
  <input type="button" value="选择索引值大于3的div元素." id="btn6" />
  <input type="button" value="选择class不为one的 所有div元素." id="btn7" />

  <br /><br />

  <!-- 测试的元素 -->
  <div class="one" id="one">
   id为one,class为one的div
   <div class="mini">class为mini</div>
  </div>

  <div class="one" id="two" title="test">
   id为two,class为one,title为test的div.
   <div class="mini" title="other">class为mini,title为other</div>
   <div class="mini" title="test">class为mini,title为test</div>
  </div>

  <div class="one">
   <div class="mini">class为mini</div>
   <div class="mini">class为mini</div>
   <div class="mini">class为mini</div>
   <div class="mini"></div>
  </div>

  <div class="one">
   <div class="mini">class为mini</div>
   <div class="mini">class为mini</div>
   <div class="mini">class为mini</div>
   <div class="mini" title="tesst">class为mini,title为tesst</div>
  </div>

  <div style="display:none;" class="none">style的display为"none"的div</div>

  <div class="hide">class为"hide"的div</div>

  <div>
   包含input的type为"hidden"的div<input type="hidden" size="8" />
  </div>

  <span id="mover">正在执行动画的span元素.</span>

 </body>

</html>

表单对象属性过滤选择器【了解】 ​

表单对象属性过滤选择器是根据表单元素的某些属性来进行过滤选择的。

过滤器使用示例说明
:enabled$("input:enabled")过滤可用的元素
:disabled$("input:disabled")过滤不可用的元素
:checked$("input[type=checkbox]:checked")或
$(":checkbox:checked")		过滤被选中元素(复选框、单选框等，不包括select中的option)
:selected$("select option:selected")过滤被选中的元素（select的option）
  • 没有被选中的 radio 或 checkbox

input:not(':checked')

【案例】表单对象属性过滤选择器练习

【需求】按照素材中按钮上的文字完成相应需求

【素材】

html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>表单对象属性过滤选择器.html</title>
  <script src="../js/jquery-1.11.0.min.js"></script>
  <link rel="stylesheet" type="text/css" href="../css/style.css" />
  <script type="text/javascript">
   $(function() {
    //<button id="btn1">对表单内 可用input 赋值操作.</button>
    $("#btn1").click(function(){
     $("input:enabled").val("我是可用的标签"); 
    })
    
    //<button id="btn2">对表单内 不可用input 赋值操作.</button>
    $("#btn2").click(function(){
     $("input:disabled").val("我是不可用的标签--------------"); 
    })
    
    //<button id="btn3">获取多选框选中的个数.</button>
    $("#btn3").click(function(){
     var len = $("input[type='checkbox']:checked").length;
     alert(len);
    })
    
    
    
    
    //<button id="btn4">获取下拉框选中的个数.</button>
    $("#btn4").click(function(){
     alert($("select option:selected").length)
     
    })
    
   });
  </script>
 </head>

 <body>
  <h3> 表单对象属性过滤选择器.</h3>
  <br />
  <button id="btn1">对表单内 可用input 赋值操作.</button>
  <button id="btn2">对表单内 不可用input 赋值操作.</button>
  <button id="btn3">获取多选框选中的个数.</button>
  <button id="btn4">获取下拉框选中的个数.</button>
  <br /> 
  可用元素：<input name="add" value="可用文本框" /> <br/> 
  不可用元素：<input name="email" disabled="disabled" value="不可用文本框" /><br/> 
  可用元素： <input name="che" value="可用文本框" /><br/> 
  不可用元素：<input name="name" disabled="disabled" value="不可用文本框" /><br/>
  多选框：
  <br/>
  <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
  <input type="checkbox" name="newsletter" value="test2" />test2
  <input type="checkbox" name="newsletter" value="test3" />test3
  <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
  <input type="checkbox" name="newsletter" value="test5" />test5
  <br/><br/> 下拉列表1：
  <br/>
  <select name="test" multiple="multiple" style="height:100px">
   <option>浙江</option>
   <option selected="selected">湖南</option>
   <option>北京</option>
   <option selected="selected">天津</option>
   <option>广州</option>
   <option>湖北</option>
  </select>

  <br/><br/> 下拉列表2：
  <br/>
  <select name="test2">
   <option>浙江</option>
   <option>湖南</option>
   <option selected="selected">北京</option>
   <option>天津</option>
   <option>广州</option>
   <option>湖北</option>
  </select>
  <br/><br/>
 </body>

</html>

可见性过滤选择器【了解】 ​

可见性过滤选择器是根据标签是否可见进行过滤的，页面上能够看见的标签都是可见的。不可见的标签主要包括以下两种：

  1. 隐藏域：<input type="hidden" name="id" value="520"> ；
  2. diaplay 属性隐藏：<div style="display:none"></div> ;
过滤器使用示例说明
:visible$("input:visible")过滤可见的元素
:hidden$("input:hidden")过滤不可见的元素

【案例】可见性过滤选择器练习

html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>05-可见性过滤选择器.html</title>
  <!--   引入jQuery -->
  <script src="../js/jquery-1.11.0.min.js"></script>
  <script src="../js/assist.js"></script>
  <link rel="stylesheet" type="text/css" href="../css/style.css" />
  <style>
   div.hide{
    display: none;
    height: 200px;
    width: 200px;
    border: 1px solid red;
   }
   
   
  </style>
  <script type="text/javascript">
   $(function() {
    //<input type="button" value=" 选取所有可见的div元素" id="b1" />
    $("#b1").click(function(){
     
     $("div:visible").css("background-color","yellow");
    })
    //<input type="button" value=" 选取所有不可见的div元素, 利用 jQuery 中的 show() 方法将它们显示出来" id="b2" />
    $("#b2").click(function(){
     
     $("div:hidden").show();
    })
   });
  </script>
 </head>

 <body>
  <h3>可见性过滤选择器.</h3>
  <button id="reset">手动重置页面元素</button>
  <input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label>
  <br/><br/>
  <input type="button" value=" 选取所有可见的div元素" id="b1" />
  <input type="button" value=" 选取所有不可见的div元素, 利用 jQuery 中的 show() 方法将它们显示出来" id="b2" />

  <br /><br />

  <div class="one" id="one">
   id为one,class为one的div
   <div class="mini">class为mini</div>
  </div>

  <div class="one" id="two" title="test">
   id为two,class为one,title为test的div.
   <div class="mini" title="other">class为mini,title为other</div>
   <div class="mini" title="test">class为mini,title为test</div>
  </div>

  <div class="one">
   <div class="mini">class为mini</div>
   <div class="mini">class为mini</div>
   <div class="mini">class为mini</div>
   <div class="mini" title="tesst">class为mini,title为tesst</div>
  </div>

  <div style="display:none;" class="none">style的display为"none"的div</div>

  <div class="hide">class为"hide"的div</div>

 </body>

</html>

内容过滤选择器【了解】 ​

过滤器使用示例说明
:has(过滤选择器)$("input:has(.cls)")过滤包含class为cls的input
选中的是第一个选择器，这个选择器，必须要有子元素
子元素的条件是has里面的子选择器指定的

has 与 not 相对应

内容过滤选择器是根据标签中时候包含有某些内容，来对选择的标签进行过滤的。语法格式：$("div:has(selector)") 。例如：

【案例】内容过滤选择器练习

【素材】

html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>04-内容过滤选择器.html</title>
  <!--   引入jQuery -->
  <script src="../js/jquery-1.11.0.min.js"></script>
  <script src="../js/assist.js"></script>
  <link rel="stylesheet" type="text/css" href="../css/style.css" />
  <script type="text/javascript">
   $(function() {
    //<input type="button" value="选取含有class为mini元素 的div元素." id="btn1" />
    $("#btn1").click(function(){
     
     $("div:has('.mini')").css("background-color","yellow");
    })
   });
  </script>
 </head>

 <body>
  <h3>内容过滤选择器.</h3>
  <button id="reset">手动重置页面元素</button>
  <input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />

  <input type="button" value="选取含有class为mini元素 的div元素." id="btn1" />

  <br /><br />

  <!-- 测试的元素 -->
  <div class="one" id="one">
   id为one,class为one的div
   <div class="mini">class为mini</div>
  </div>

  <div class="one" id="two" title="test">
   id为two,class为one,title为test的div.
   <div class="mini" title="other">class为mini,title为other</div>
   <div class="mini" title="test">class为mini,title为test</div>
  </div>

  <div class="one">
   <div class="mini">class为mini</div>
   <div class="mini">class为mini</div>
   <div class="mini">class为mini</div>
   <div class="mini"></div>
  </div>

  <div class="one">
   <div class="mini">class为mini</div>
   <div class="mini">class为mini</div>
   <div class="mini">class为mini</div>
   <div class="mini" title="tesst">class为mini,title为tesst</div>
  </div>

  <div style="display:none;" class="none">style的display为"none"的div</div>

  <div class="hide">class为"hide"的div</div>

  <div>
   包含input的type为"hidden"的div<input type="hidden" size="8" />
  </div>

  <span id="mover">正在执行动画的span元素.</span>

 </body>

</html>

表单选择器【了解】 ​

根据表单子标签的 type 属性进行过滤。目前只需要大家知道:input选择器选中的标签有哪些。其余的都可以使用属性过滤选择器来代替。

选择器使用方法说明
:input$(":input")过滤出所有的表单子标签，包括：input，select，textarea，button
:text$(":text")过滤出表单子标签中type="text"的标签
:password$(":password")过滤出表单子标签中type="password"的标签
:radio$(":radio")过滤出表单子标签中type="radio"的标签
:checkbox$(":checkbox")过滤出表单子标签中type="checkbox"的标签
:file$(":file")过滤出表单子标签中type="file"的标签
:hidden$(":hidden")过滤出表单子标签中type="hidden"的标签
:button$(":button")过滤出表单子标签中type="button"的标签，和<button></button>标签
:reset$(":reset")过滤出表单子标签中type="reset"的标签
:submit$(":submit")过滤出表单子标签中type="submit"的标签
:image$(":image")过滤出表单子标签中type="image"的标签

【案例】表单选择器练习

【素材】

html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>09-表单选择器.html</title>
  <!--   引入jQuery -->
  <script src="../js/jquery-1.11.0.min.js"></script>
  <script src="../js/assist.js"></script>
  <link rel="stylesheet" type="text/css" href="../css/style.css" />
  <script type="text/javascript">
   $(function() {
    //<input type="button" value="选取所有的表单子元素" id="btn1" /><br />
    $("#btn1").click(function(){
     alert($(":input").length )
    })
   });
  </script>
 </head>

 <body>
  <input type="button" value="选取所有的表单子元素" id="btn1" /><br />

  <form id="form1" action="#">
   <input type="button" value="Button" /><br/>
   <input type="checkbox" name="c" />1
   <input type="checkbox" name="c" />2
   <input type="checkbox" name="c" />3<br/>
   <input type="file" /><br/>
   <input type="hidden" /><br/>
   <input type="image" src="1.jpg" /><br/>
   <input type="password" /><br/>
   <input type="radio" name="a" />1
   <input type="radio" name="a" />2<br/>
   <input type="reset" /><br/>
   <input type="submit" value="提交" /><br/>
   <input type="text" /><br/>
   <select>
    <option>Option</option>
   </select><br/>
   <textarea rows="5" cols="20"></textarea><br/>
   <button>Button</button><br/>
  </form>

  <div></div>
 </body>

</html>

jQuery操作方法 ​

jQuery的dom操作 ​

jQuery 当中，大部分的方法，都支持重载

设置函数如果有 2 个参数的话，那么第 1 个参数是键，第 2 个参数是值；如果只给了一个参数的话，那么就不是设置，而是获取

设置函数如果有 1 个参数的话，那么这个参数就是值；如果没有给参数的话，那么就是获取

方法作用说明
html()/text()/val()设置或者获取：html代码/文本/值方法不传参数为取值；方法传入参数为设置值
attr()/prop()设置或者获取标签的属性方法不传入参数为获取属性值，方法传入参数为设置属性值
addClass()/ removeClass()添加或者移除标签的class属性addClass()为添加class属性；removeClass()为移除class属性；
css()设置或者获取css样式方法传入一个参数（样式名）为获取指定样式；方法传入两个参数为设置样式
$("<p>点墨星河</p>")创建新的标签参数为完整的html标签
append()/prepend()/after()/before()给父标签添加子标签append（）：在父标签的子节点后面追加；prepend（）：在父标签的子节点前面追加；
remove()/empty()移除标签（文本和子标签）/清空标签体（文本和子标签）remove()：移除标签（当前标签及其子标签）；empty()：清空当前标签中的内容（保留原标签）；

html代码/文本/值操作 ​

【案例】html 代码/文本/值操作练习

【需求】在控制台中操作：

  1. 使用 html()方法，text（）方法获取 div 中的内容；
  2. 使用 html（）方法，text（）方法给 div 中设置内容；
  3. 使用 val（）方法获取 input 中的值；
  4. 使用 val（）方法给 input 文本框中设置值；

【素材】

html
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>

 <body>
  <input id="myinput" type="text" name="username" value="张三" /><br />
  <div id="mydiv">
   <p>
    <a href="#">标题标签</a>
   </p>
  </div>
 </body>
</html>

【操作】

  1. 在素材中导入 1.8 的 jQuery 类库；
  2. 使用浏览器打开页面，在控制台中操作：
javascript
$("#mydiv").html();
"
   <p>
    <a href="#">标题标签</a>
   </p>
  "
$("#mydiv").text();
"
   
    标题标签
   
  "
$("#mydiv").html("<h1>点墨</h1>");
$("#mydiv").text("星河");
javascript
$("#myinput").val();
"张三"
$("#myinput").val("点墨星河");

【结论】

  1. html()方法与 dom 中的 innerHTML 操作结果一样，获取的是标签中的 html 内容；
  2. text()方法与 dom 中的 innerText 操作的结果一样，获取的是标签中的文本内容；
  3. val()方法与 dom 中的 value 操作的结果一样，获取的是标签的 vlaue 属性值；
  4. html(),text()和 val()方法如果不传入参数则为取值，如果传入参数则为赋值操作；

属性操作：attr()和prop()和class属性操作 ​

【案例】attr()和 prop()属性操作

【结论】

  1. 对标签的普通属性的操作使用 attr()方法更准确；
  2. 在获取 checked 或者 selected 属性值的时候建议使用 prop()方法，其余都使用 attr()方法；
javascript
   /*
      * js中操作标签属性：
      *       1、js对象.getAttribute("name");
      *       2、js对象.属性名；
      *
      * jq中操作标签属性：
      *       方法一： attr() 操作普通标签属性
      *           作用：
      *               获取属性值：
      *                           jq对象.attr("name")
      *               设置属性值：
      *                           设置一个属性： jq对象.attr(属性名,属性值);
      *                           设置多个属性：
      *                                        jq对象.attr({
      *                                           属性名：属性值,
      *                                           属性名：属性值,
      *                                           属性名：属性值
      *                                        });
      *         删除标签属性：
      *               jq对象.removeAttr("name");
      *
      *         操作class属性：
      *               addClass()
      *               removeClass()
      *       方法二：prop() 版本升级的产物，操作特殊属性：checked  selected
      *               使用方法与attr()一样
      *
      * */

css样式操作 ​

  • css 属性操作：
    • css(cssName)：获取标签的 css 样式；
    • css(cssName,cssValue)：给标签添加 css 样式；

【案例】class 属性操作和 css 样式操作练习

【需求】按照素材按钮上的文字完成相应需求

【参考代码】

html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
 <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
 <style type="text/css">
  .textClass {
   background-color: #ff0;
  }
 </style>
 <script type="text/javascript">
  $(document).ready(function(){
      /*
      * jq的css样式操作：jq对象.css()
      *   css()方法：
      *     作用：
      *         1，获取css样式值    jq对象.css("color");
      *            2，设置css样式值：
      *                        单一样式：jq对象.css("样式名","样式值");
      *                        多种样式：jq对象.css({
      *                                        "样式名":"样式值",
      *                                        "样式名":"样式值",
      *                                        "样式名":"样式值"
      *                                  })
      *
      *
      * */
   //1 给div添加边框样式
            $("div").css("border","1px solid red");
   //2 获取div的边框样式
            var divCss = $("div").css("border");
            alert(divCss);
   
   //3 给div添加多种样式
            $("div").css({
                "width": "300px",
                "height":"300px"
            });
   //4 获取div的高和宽: width()  height()
            var width = $("div").width();
            var height = $("div").height();
            alert(width+";"+height)
  }); 
 </script>
</head>
<body>
 <h3>表单</h3>
 <form action="">
  <table border="1">
   <tr id="tr1">
    <td><label>姓名</label></td>
    <td><input type="text" name="username"/></td>
   </tr>
   <tr>
    <td><span>密码</span></td>
    <td><input type="password" name="password" /></td>
   </tr>
   <tr>
    <td>性别</td>
    <td>
     <input type="radio" name="gender" value="男" />男
     <input type="radio" name="gender" value="女" />女
    </td>
   </tr>
   
   <tr>
    <td></td>
    <td>
     <button type="button">普通按钮</button>
     <input type="submit" value="提交按钮" />
     <input type="reset" value="重置按钮" />
    </td>
   </tr>
  </table>
 </form>
 
 
 <h3>公告信息</h3>
 <div>
  未满18慎进
 </div>
 <span id="sp">外span<a href='#'>内超链</a></span>
</body>
</html>

html元素创建与插入 ​

  1. html 元素创建：$(html 代码)；
  2. html 元素插入：（注：a 和 b 都是 jq 对象）

【内部插入】父子关系

方法使用示例说明
append()a.append(b)a把b插入到自己内部的后面（追加）
appendTo()a.appendTo(b)a把自己插入到b的内部的后面
prepend()a.prepend(b)a把b插入到自己内部的前面
prependTo()a.prependTo(b)a把自己插入到b的内部的前面

【外部插入】同胞关系

方法使用示例说明
after()a.after(b)a把b插入到自己的后面
insertAfter()a.insertAfter(b)a把自己插入到b的后面
before()a.before(b)a把b插入到自己的前面
insertBefore()a.insertBefore(b)a把自己插入到b的前面
  • 在 a 的附近添加 b

$("#a").before("<div>...</div>")$("#div").prepend("<div>...</div>")$("#div").append("<div>...</div>")$("#div").after("<div>...</div>")

  • 在 a 的附近添加 b $("<div>...</div>").insertBefore($("#a"))$("<div>...</div>").prependTo($("#a"))$("<div>...</div>").appendTo($("#a"))$("<div>...</div>").insertAfter($("#a"))

// 这个 div，就是下图中的红框

1527773099316

【案例】html 元素创建与插入练习

【素材】

html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>内部插入脚本</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <script language="JavaScript" src="../js/jquery-1.11.0.min.js"></script>
 <style type="text/css">
    div{
       width: 200px;
       height: 340px;
      margin: 60px;
       background: #9999CC;
       border: #000 1px solid;
    float:left;
       font-size: 17px;
       font-family:Roman;
   }
   
   span{
    width: 140px;
       height: 20px;
       margin-top: 30px;
       margin-left: 20px;
       background: #9999CC;
       border: #000 1px solid;
    float:left;
       font-size: 17px;
       font-family:Roman;
   }
   
   #span1{
     margin-top: 100px;
   }
   
  </style>
 </head>
  
 <body>
 
 <input type="button"  id="b1" value="点击按钮，创建一个span，加在第二个div中的span后面" />
 <input type="button"  id="b2" value="点击按钮，创建一个span，加在第二个div中的span前面" />
 <input type="button"  id="b3" value="点击按钮，创建一个div，加在第二个div前面" />
 <input type="button"  id="b4" value="点击按钮，创建一个div，加在第二个div后面" />
  <div id="div1">
   第一个div
  </div>
  
  
  <div id="div2">
   <span id="span1">
    第二个div的span
   </span>
  </div>
  
       <div id="div3">
         第三个div
       </div>
 </body>
 
</html>

【参考代码】

html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>内部插入脚本</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <script language="JavaScript" src="../js/jquery-1.11.0.min.js"></script>
 <style type="text/css">
    div{
       width: 200px;
       height: 340px;
      margin: 60px;
       background: #9999CC;
       border: #000 1px solid;
    float:left;
       font-size: 17px;
       font-family:Roman;
   }
   
   span{
    width: 140px;
       height: 20px;
       margin-top: 30px;
       margin-left: 20px;
       background: #9999CC;
       border: #000 1px solid;
    float:left;
       font-size: 17px;
       font-family:Roman;
   }
   
   #span1{
     margin-top: 100px;
   }
   
  </style>
 </head>
  
 <body>
 
 <input type="button"  id="b1" value="点击按钮，创建一个span，加在第二个div中的span后面" />
 <input type="button"  id="b2" value="点击按钮，创建一个span，加在第二个div中的span前面" />
 <input type="button"  id="b3" value="点击按钮，创建一个div，加在第二个div前面" />
 <input type="button"  id="b4" value="点击按钮，创建一个div，加在第二个div后面" />
  <div id="div1">
   第一个div
  </div>
  
  
  <div id="div2">
   <span id="span1">
    第二个div的span
   </span>
  </div>
  
       <div id="div3">
         第三个div
       </div>
 </body>
 
 <script type="text/javascript" src="../js/jquery-3.3.1.js" ></script>
 <script type="text/javascript">
  /**
   *   parent.append(child);
   * 
   *  parent.prepend(new);
   * 
  */
  //<input type="button"  id="b1" value="点击按钮，创建一个span，加在第二个div中的span后面" />
  $("#b1").click(function(){
   //获取第二个div
   var div2 = $("#div2");
   //创建一个新的span
   var newSpan = $("<span>在span后面追加</span>");
   
   div2.append(newSpan);
   
  })
  
  // <input type="button"  id="b2" value="点击按钮，创建一个span，加在第二个div中的span前面" />
  $("#b2").click(function(){
   //获取div2
   var div2 = $("#div2");
   //创建新的span
   var newSpan2 = $("<span>在span前面追加</span>");
   //在div2的内部元素的前面开始添加
   div2.prepend(newSpan2);
   
  })
  
  //<input type="button"  id="b3" value="点击按钮，创建一个div，加在第二个div前面" />
  $("#b3").click(function(){
   //获取第二个div
   var div2 = $("#div2");
   //创建一个新的div
   var newDiv = $("<div>新的div，在div2的前面添加</div>");
   div2.before(newDiv);
   
  })
  
  // <input type="button"  id="b4" value="点击按钮，创建一个div，加在第二个div后面" />
  $("#b4").click(function(){
   //获取第二个div
   var div2 = $("#div2");
   //创建一个新的div
   var newDiv = $("<div>新的div，在div2的后面添加</div>");
   div2.after(newDiv);
  })
 </script>
   
</html>

html元素的删除操作 ​

删除元素主要用到以下两个方法：remove() 和 empty()方法，两者的区别：

  • $("#div").remove()

把 div 以及 div 当中的所有内容，全部删除掉

  • $("#div").empty()

清空，也就是 div 依然还会存在，但是 div 里面的内容，被全部清除掉了

  • remove()方法：移除当前元素及其所有子元素；
  • empty()方法：将当前元素的所有子元素清空，保留当前元素；

【案例】html 元素的删除与清空练习

【需求】

  1. 使用 remove()方法删除素材中的 select 标签，并观察删除后的效果；
  2. 使用 empty()方法清空素材中的 select 标签，并观察效果；

【素材】

html
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <select name="city" id="city">
   <option value="">---请选择城市---</option>
   <option value="bj">北京</option>
   <option value="sh">上海</option>
   <option value="sz">深圳</option>
   <option value="gz">广州</option>
  </select>
 </body>
 <script type="text/javascript" src="../js/jquery-3.3.1.js" ></script>
 
</html>

【操作】

$("#city").remove();
$("#city").empty();

【应用场景】

  1. remove()方法适用于完全删除元素及其子元素；
  2. empty()方法适用于将元素中的文本及其子元素清空，保留当前元素；如：清空 select 中的 option。

小结

  • 内容/值
    • html()/text()/val()
  • 属性/类
    • attr/addClass/removeClass
  • 样式
    • css()
    • 多个键值通过,分隔，键和值通过:，整体通过{}包裹
  • 元素的创建和插入
    • $(“
      ”)
    • 里面的第 1 个，prepend
    • 里面的最后 1 个，append
    • 外面的上边，before
    • 外面的下边，after
  • 删除
    • remove
      • 标签及标签内容
    • empty
      • 标签内容

jQuery效果 ​

元素的显示与隐藏 ​

元素的显示与隐藏主要用到以下 3 个方法：

方法使用示例说明
show(speed,fn)$("#_div").show(3000,function(){ alert("Hello World") })参数speed：元素显示的速度；参数fn：元素显示后执行的方法；
hide(speed,fn)$("#_div").hide(3000,function(){ alert("Hello World") })同上
toggle(speed,fn)$("#_div").toggle(3000,function(){ alert("Hello World") })同上

元素的滑动显示与隐藏 ​

元素的滑动显示与隐藏主要用到以下 3 个方法：

方法使用示例说明
slideUp(speed,fn)$("#_div").slideUp(3000,function(){ alert("Hello World") })通过高度变化（向上减少）参数speed：元素显示的速度；参数fn：元素显示后执行的方法；
slideDown(speed,fn)$("#_div").slideDown(3000,function(){ alert("Hello World") })同上
slideToggle(speed,fn)$("#_div").slideToggle(3000,function(){ alert("Hello World") })同上

元素的淡入淡出显示效果 ​

元素的淡入淡出显示效果主要使用到以下 3 个方法：

方法使用示例说明
fadeIn(speed,fn)$("#_div").fadeIn(3000,function(){ alert("Hello World") })参数speed：元素显示的速度；参数fn：元素显示后执行的方法；
fadeOut(speed,fn)$("#_div").fadeOut(3000,function(){ alert("Hello World") })同上
fadeToggle(speed,fn)$("#_div").fadeToggle(3000,function(){ alert("Hello World") })同上

【案例】演示 jQuery 动画效果

【需求】

给按钮添加点击事件，完成相应的功能；

【素材】

html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Insert title here</title>
  <style type="text/css">
   div {
    border: 1px solid #000;
    width: 100px;
    height: 100px;
   }
  </style>
 </head>

 <body>
  <input type="button" id="b1" value="显示/隐藏 b1Div" />
  <div id="b1Div"></div> <br/>
  <input type="button" id="b2" value="滑出/滑入b2Div" />
  <div id="b2Div"></div> <br/>
  <input type="button" id="b3" value="淡出/淡入b3Div" />
  <div id="b3Div"></div>

 </body>
</html>

【代码示例】

html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Insert title here</title>
  <style type="text/css">
   div {
    border: 1px solid #000;
    width: 100px;
    height: 100px;
   }
  </style>

  <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
  <script type="text/javascript">
   $(function() {
    //<input type="button" id="b1" value="显示/隐藏 b1Div" />
    $("#b1").click(function() {
     //隐藏
     //$("#b1Div").hide(1000);
     //显示
     //$("#b1Div").show(1000);
     $("#b1Div").toggle(1000);

    })
    //<input type="button" id="b2" value="滑出/滑入b2Div" />
    $("#b2").click(function() {
     //向上收起
     //$("#b2Div").slideUp(1000);
     $("#b2Div").slideToggle(1000);
    })

    //<input type="button" id="b3" value="淡出/淡入b3Div" />
    $("#b3").click(function() {
     //$("#b3Div").fadeOut(1000);
     $("#b3Div").fadeToggle(1000);
    })

   })
  </script>
 </head>

 <body>
  <input type="button" id="b1" value="显示/隐藏 b1Div" />
  <div id="b1Div" style="display: none;"></div> <br/>
  <input type="button" id="b2" value="滑出/滑入b2Div" />
  <div id="b2Div"></div> <br/>
  <input type="button" id="b3" value="淡出/淡入b3Div" />
  <div id="b3Div" style="background-color: red;"></div>

 </body>

</html>

案例 ​

案例一：弹出广告案例 ​

【需求】：

  1. 页面加载完成后，每隔 4 秒周期性地弹出广告；
  2. 广告弹出 2 秒后隐藏；
  3. 共弹出 3 次；

【参考代码】

html
<script>
        /*1.页面加载完成之后，4秒周期性弹出广告；
          2.弹出后2秒，隐藏；
          3.总共弹出3次；

          //确定事件：
               页面加载事件   setInterval()   setTimeOut()   show() hide()
          //实现步骤：

                var setIntervalId = setInterval(fn1,4000);
                弹出广告
                fn1:showImg(
                    //计数 count
                    if(count>3){
                        //结束弹出
                        clearInterval(setIntervalId);
                    }
                    //2秒之后隐藏
                    setTimeOut(fn2,2000);
                );
                隐藏广告
                fn2:hideImg(){

                }
        * */

        var setIntervalId = setInterval("showImg();",4000);
        var count=0;
        function showImg() {
            count++;
            //控制次数
            if(count>3){
                //弹出3次后   结束周期性执行的函数
                clearInterval(setIntervalId);
                //弹出3次后  不再往下执行
                return;
            }

            //ad 显示广告
            $("#ad").show();

            //2秒后隐藏
            setTimeout("hideImg();", 2000);
        }

        //隐藏广告
        function hideImg() {
            //ad
            $("#ad").hide();
        }
</script>

案例二：表格隔行换色 ​

【需求】页面加载后表格奇数行变为黄色，偶数行变为红色；

javascript
  <script>
   $(function(){
       //原理：
                //1.获取所有的tr； jq选择器获取所有的tr；       $("#")
                //2.判断tr的奇偶 ，改变背景颜色； jq css操作；
                $("tr:gt(0):even").css("background-color","green");
                $("tr:gt(0):odd").css("background-color","red");
   })
  </script>

案例三：全选全不选 ​

html
<script type="text/javascript">
  $(function() {
      /*
      分析需求：
       1.获取selectAll标签的checked属性，赋值给class=itemSelect的所有的checkbox
      *事件：
      * selectAll绑定单击事件
      * */
            $("#selectAll").click(function () {
               // var checkFlag = $("#selectAll").prop("checked");
                //操作itemSelect
                $(".itemSelect").prop("checked", this.checked);
            });
  });
 </script>

学习目标总结 ​

  • 能够理解 js 框架的概念
  • 能够引入 jQuery
  • 能够使用 jQuery 的基本选择器
  • 能够使用 jQuery 的层级选择器
  • 能够使用 jQuery 的属性选择器
  • 能够使用 jQuery 的基本过滤选择器
  • 能够使用 jQuery 的属性过滤选择器
  • 能够使用 jQuery 的 DOM 操作的方法
  • 能够完成隔行换色案例
  • 能够完成全选全不选案例