08-jQuery学习与使用

为甚嚒要学习jQuery?

因为JS中有很多痛点:
  • window.onload事件只能出现一次,如果出现多次,后面的事件会覆盖掉前面的事件;
  • 代码容错性差,如果获取标签发生错误,会影响后续代码执行;
  • 浏览器兼容性问题:如innerText等;
  • 简单功能实现很繁琐,如渐变的动画效果。

jQuery是什么?

jQuery描述(理解)
  • jQuery是js的一个库,封装了我们开发过程中常用的一些功能,方便我们来调用,提高了我们的开发效率;
  • Js库是把我们常用的功能放到一个单独的文件中,我们用的时候,直接引用到页面里面来就可以了。
学习jQuery,主要学习什么内容?
  • 目前这个阶段,主要学习如何来使用jQuery操作DOM,其实就是学习jQuery封装好的那些功能方法,这些方法叫做API(Application Programming Interface应用程序编程接口)。
  • 这些API的共同特点是:几乎全都是方法。所以,在使用jQuery的API时,都是方法调用,也就是说要加小括号(),小括号里面是相应的参数,参数不同,功能不同

jQuery网站

  • 官网:http://jquery.com/
  • 汉化:http://www.css88.com/jqapi-1.9/
  • 在线API:http://api.jquery.com/
jQuery特点
  • 链式编程;
  • 隐式迭代(遍历)。

如何使用jQuery重点

三个步骤:
  • 引包
<script src="XXX"></script> 
  • 入口函数
  • 功能实现代码(事件处理)
$(document).ready(function (){  //入口函数     //功能实现代码(事件处理)     //获取元素和绑定事件(通过方法实现)     事件源.事件(function(){         //事件处理程序     }); }); 
  • 体验:
<script src="jquery-1.11.1.js"></script>  //引包 <script type="text/javascript">     $(document).ready(function () { //入口函数         //使用$获取元素,通过标签获取直接写标签名;通过类名获取写.XXX;通过id获取写#XXX。         var jqBtn = $("button");         var jqDiv = $("div");          jqBtn.click(function () {             jqDiv.show(1000);   //可以设置开始显示到结束显示的时间间隔             jqDiv.html(12345);  //设置显示内容         });     }); </script> 
入口函数
  • 入口函数一:文档加载完毕,图片没有加载时就可以调用:
$(document).ready(function () {     //code; }); 
  • 入口函数二:是入口函数一的简写,作用和入口函数一相同:
$(fucntion (){     //code }); 
  • 入口函数三:文档加载完毕,图片也加载完毕时候执行:
$(window).ready(function (){     //code; }); 
  • 原生js入口函数,页面上所有内容加载完毕时候执行(不仅文本加载完毕,而且图片也要加载完毕时候才执行函数):
window.onload = function (){     //code; }; 
  • jQuery入口函数和js入口函数的区别(理解)
  • 书写个数不同:js入口函数只能出现一次,出现多次会存在事件覆盖的问题(其它函数也都会出现覆盖的问题,除了addEventListener、attachEvent方法);jQuery的入口函数可以出现任意多次,并不会存在事件覆盖问题。
  • 执行时机不同:js入口函数是在所有的文件资源加载完成后,才执行(这些文件资源包括:页面文档、外部的js文件、外部的css文件、图片等);jQuery的入口函数,是在文档加载完成后,就执行。文档加载完成指的是:DOM树加载完成后,就可以操作DOM了,不用等到所有的外部资源都加载完成,如果想要所有的资源都加载完毕后再执行就用入口函数三。
jQuery的$符号重点
  • js命名规范允许出现的字符有:数字、字母、下划线、$(不能以数字开头);
  • jQuery中$是一个函数,和jQuery的值基本一样$===jQuery的值为true;
  • jQuery中使用$的原因:书写简洁,相对于其它字符更容易被记住。
  • 怎么理解jQuery中的$符号:
  • $实际上是一个函数名;
$(); //调用我们自定义的函数$ $(document).ready(function(){});    //调用入口函数 $(function(){});    //调用入口函数 $(window).ready(function(){});  //调用入口函数 $("#btnStyle"); //获取id属性为btnStyle的元素 $("div");   //获取所有的div元素 $(".content");  //获取类名为content(包含即可)的元素 
jQuery对象(jQuery中的DOM对象)和js中的DOM对象的区别和联系重点!!!难点
  • jQuery对象是一个数组,数组中包含着原生js中的DOM对象;

  • jQuery中有css()方法,原生js没有,因为jQuery有一层功能皮肤,jqDiv.css({"width":100});;

  • jQuery中DOM对象和js中DOM对象的转换:

  • js中DOM对象转换为jQuery中DOM对象,使其皮肤上有功能,然后可以直接使用相应方法,使用$就可以实现转换:$(js对象),如:box = $(box);

  • jQuery对象转换为js对象:通过索引值就可以进行转换:

    • 方法一:jQuery对象[索引值];,如:jqDiv[0].style.backgroundColor = "red";
    • 方法二:jQuery对象.get(索引值);,如:jqDiv.get(3).style.backgroundColor = "pink";
  • 如果想要使用哪种方式(jQuery或者js)设置属性或者方法,必须转换成对应的类型(jQuery类型或者js类型)才能调用。

  • 练习:

  • 隔行变色;

<body> <ul>     <li>马老大今天很漂亮---1---贼老美啦</li>     <li>马老大今天很漂亮---2---贼老美啦</li>     <li>马老大今天很漂亮---3---贼老美啦</li>     <li>马老大今天很漂亮---4---贼老美啦</li>     <li>马老大今天很漂亮---5---贼老美啦</li>     <li>马老大今天很漂亮---6---贼老美啦</li>     <li>马老大今天很漂亮---7---贼老美啦</li>     <li>马老大今天很漂亮---8---贼老美啦</li>     <li>马老大今天很漂亮---9---贼老美啦</li>     <li>马老大今天很漂亮---10---贼老美啦</li> </ul>  <script src="jquery-1.11.1.js"></script> <script type="text/javascript">      $(function () {         var jqLi = $("li");         for(var i=0; i<jqLi.length; i++){             if (i%2===0){                 jqLi[i].style.backgroundColor = "green";             }else {                 jqLi.get(i).style.backgroundColor = "pink";             }         }     });  </script> </body> 
  • 开关灯
<body> <!--开关灯--> <input type="button" value="开灯"> <input type="button" value="关灯"> <div>     ![](images/coder.jpg) </div>  <script src="jquery-1.11.1.js"></script> <script type="text/javascript">     //通过js获取     var btns = document.getElementsByTagName("input");     //通过js获取     var bd = $("body");     $(btns[0]).click(function () {         bd[0].style.backgroundColor = "white";     });     $(btns[1]).click(function () {         bd.get(0).style.backgroundColor = "rgba(0,0,0,0.3)";     });  </script> </body> 

jQuery版本

  • v1.11.3和v2.1.4是两个大版本的最新版;
  • 版本一:1.x版本;版本二:2.x版本;
  • 两个版本的最大区别:2.x版本不再支持IE678。

选择器

基本选择器重点

  • id选择器:$("#id名")
  • 类选择器:$(".类名")
  • 标签选择器:$("标签名")
  • jqDiv.css(参数1,参数2);:如果只有一个参数是获取属性值,如果有两个参数是设置属性值。

层级选择器重点,基本过滤选择器

层级选择器
  • 空格:后代选择器(所有后代选择器,可以隔代),用法:$("#jiang li").css("background-color","red");,选择id为jiang的元素的所有后代元素li;
  • >:子代选择器,只能是直接下一代。
基本过滤选择器
  • :eq(index):选择匹配到的元素中索引号为index的一个元素,index从0开始;
  • :odd:选择匹配到的元素中索引号为奇数的所有元素;
  • :even:选择匹配到的元素中索引号为偶数的所有元素;
  • 其它的有::first/:last/:not()/...

筛选选择器(方法)重点

  • 元素.find(selector):查找指定元素的所有后代元素(子子孙孙),必须指定参数,如$("#jiang").find("li").css("color","red");:设置id为jiang的元素的所有后代元素li的颜色;

  • children():查找指定元素的所有直接子元素(亲儿子元素),如$("jiang").children("ul").css("color","red");

  • siblings():查找所有兄弟元素(不包括自己),如$("jiang").siblings().css("color","red");

  • parent():查找亲父亲元素;

  • eq(index):查找指定元素的第index个元素,如$("li").eq(2).css("color","red");:选择所有li元素中的第2个;

  • next():该元素的下一个兄弟元素。

  • 练习:

  • 下拉菜单(this);

    • jQuery对象绑定的事件中的this也代指js中的对象。
<head>     <style type="text/css">         *{             margin: 0;             padding: 0;         }         .wrap{             width: 340px;             height: 30px;             margin: 80px auto 0;             background-image: url('https://read.html5.qq.com/image?src=forum&q=4&r=0&imgflag=7&imageUrl="images/bg.jpg"');         }         .wrap li{             background-image: url('https://read.html5.qq.com/image?src=forum&q=4&r=0&imgflag=7&imageUrl="images/libg.jpg"');         }         .wrap>ul>li{             float: left;             margin-left: 10px;             position: relative;         }         ul,li{             list-style: none;         }         .wrap a {             display: inline-block;             width: 100px;             height: 30px;             line-height: 30px;             text-decoration: none;             text-align: center;         }         .wrap>ul>li>ul{             position: absolute;             display: none;         }     </style> </head>  <body>     <div class="wrap">         <ul>             <li><a href="">一级标签1</a>                 <ul>                     <li><a href="">二级标签11</a></li>                     <li><a href="">二级标签12</a></li>                     <li><a href="">二级标签13</a></li>                 </ul>             </li>              <li><a href="">一级标签2</a>                 <ul>                     <li><a href="">二级标签21</a></li>                     <li><a href="">二级标签22</a></li>                     <li><a href="">二级标签23</a></li>                 </ul>             </li>              <li><a href="">一级标签3</a>                 <ul>                     <li><a href="">二级标签31</a></li>                     <li><a href="">二级标签32</a></li>                     <li><a href="">二级标签33</a></li>                 </ul>             </li>         </ul>     </div>      <script src="jquery-1.11.1.js"></script>     <script type="text/javascript">         $(function () {             var jqLi = $(".wrap>ul>li");             jqLi.mouseover(function () {                 console.log(this);                 $(this).children("ul").show();             });             jqLi.mouseout(function () {                 $(this).children("ul").hide();             });         });     </script> </body> 
  • 鼠标进入高亮,离开恢复(隔行变色);
<head>     <style type="text/css">         *{             margin: 0;             padding: 0;         }         .box{             width: 350px;             background-color: #999;             margin: 60px auto ;         }         li{             list-style: none;         }     </style> </head>  <body>     <div class="box">         <ul>             <li>今天天气真好,我和马老大去放风筝</li>             <li>今天天气真好,我和马老大去放风筝</li>             <li>今天天气真好,我和马老大去放风筝</li>             <li>今天天气真好,我和马老大去放风筝</li>             <li>今天天气真好,我和马老大去放风筝</li>             <li>今天天气真好,我和马老大去放风筝</li>             <li>今天天气真好,我和马老大去放风筝</li>             <li>今天天气真好,我和马老大去放风筝</li>             <li>今天天气真好,我和马老大去放风筝</li>             <li>今天天气真好,我和马老大去放风筝</li>         </ul>     </div>      <script src="jquery-1.11.1.js"></script>     <script type="text/javascript">         $(document).ready(function () {             //获取奇数行             var jqLiOdd = $("ul li:odd");             //获取偶数行             var jqLiEven = $("ul li:even");             jqLiEven.css("background-color","red");             jqLiOdd.css("background-color","green");              var jqLi = $("li");             var color = "";             jqLi.mouseenter(function () {                 color = this.style.backgroundColor;                 this.style.backgroundColor = "yellow";             });             jqLi.mouseout(function () {                 this.style.backgroundColor = color;             });         });      </script> </body> 
  • 突出展示案例;
<head>     <meta charset="UTF-8">     <title>练习</title>      <style type="text/css">         *{             margin: 0;             padding: 0;         }         body{             background-color: #333;         }         .wrap{             width: 630px;             height: 598px;             margin: 60px auto 0;             border: 1px solid #ffffff;             padding: 10px 10px 0 0;         }         li{             list-style: none;             float: left;             margin: 0 0 10px 10px;         }     </style> </head>  <body>     <div class="wrap">         <ul>             <li><a href="">![](images/01.jpg)</a></li>             <li><a href="">![](images/02.jpg)</a></li>             <li><a href="">![](images/03.jpg)</a></li>             <li><a href="">![](images/04.jpg)</a></li>             <li><a href="">![](images/05.jpg)</a></li>             <li><a href="">![](images/06.jpg)</a></li>             <li><a href="">![](images/03.jpg)</a></li>             <li><a href="">![](images/02.jpg)</a></li>             <li><a href="">![](images/01.jpg)</a></li>         </ul>     </div>      <script src="jquery-1.11.1.js"></script>     <script type="text/javascript">         //为每一个li元素绑定方法         $(".wrap").find("li").mouseover(function () {             $(this).css("opacity",1).siblings().css("opacity",0.3);         });         //当鼠标离开时,全部li为全透明         $(".wrap").mouseleave(function () {             $(this).find("li").css("opacity",1);         });     </script> </body> 
  • 手风琴;
  • 淘宝精品服饰。

jQuery操作DOM

为甚嚒要使用jQuery操作DOM

  • 对比js操作DOM和jQuery操作DOM发现,使用jQuery的方式来操作DOM更加的简洁、方便,统一的调用方式方便我们学习,降低我们的学习成本。

重点内容

  • 样式和类的操作;
  • jQuery动画;
  • 节点操作。

样式操作

样式属性操作.css()
  • 作用:设置或获取元素的样式属性值;
  • 设置样式属性操作:
  • 设置单个样式:
$("div").css("background-color","red"); 
- 第一个参数表示样式属性名称; - 第二个参数表示样式属性值。 
  • 设置多个样式:(此种方式也可以用来设置单个)
$("div").css({"background-color":"red","margin":"10px"}); 
- 参数是{}(`对象`)。 
  • 获取样式属性值的操作:
$("div").css("background-color"); 
  • 参数表示要获取的样式属性名称
类操作
  • 添加类样式:addClass(className)
  • 为指定元素添加类className:
$(selector).addClass("liItem"); 
  • 注意:此处类名不带点,所有类操作的方法类名都不带点;

  • 移除类样式:
    removeClass(className)

  • 为指定元素移除类 className:

    • 指定参数(类名):
$(selector).removeClass(“liItem”); 
- 不指定参数:表示移除被选中元素的所有类: 
$(selector).removeClass(); 
  • 判断有没有类样式:
    hasClass(calssName)
  • 判断指定元素是否包含类 className
$("div").hasClass(“liItem”); 
  • 此时,会返回true或false;

  • 有一个div有liItem时就返回true,只有所有的div都没有类liItem时才返回false。

  • 练习:切换背景色(点击一次变换一下,再次点击恢复,可判断也可用toggle实现)。

  • 切换类样式:
    toggleClass(className):

  • 为指定元素切换类 className,该元素有类则移除,没有指定类则添加:

$(selector).toggleClass(“liItem”); 
  • 注意点:

  • 操作类样式的时候,所有的类名,都不带点(.);

  • 经验:

  • 操作的样式非常少,那么可以通过.css()这个 方法来操作;

  • 操作的样式很多,那么要通过使用类的方式来操作;

  • 如果考虑以后维护方便(把CSS从js中分离出来)的话,推荐使用类的方式来操作。类比CSS书写位置(把css从html中分离出来)。

  • 前面内容特色总结:简约、“粗暴”、干净利落、直截了当

  • 案例:图片京东Table栏

jQuery动画

  • jQuery提供的一组网页中常见的动画效果,这些动画是标准的、有规律的效果;同时还提供给我们了自定义动画的功能。
隐藏显示动画(通过改变宽高和透明度display来实现)
  • show方法:让匹配的方法展示出来
  • 用法一:参数为数值类型,表示执行动画时长(从开始到结束的时间)(底层是改变宽高和透明度);
$("div").show(2000);    //从开始展示到展示结束花费2秒时间() 
  • 用法二:参数是字符串类型,是jQuery预设的值,共有三个,分别为:slow(600ms)、normal(400ms)、fast(200ms),如果传入其它字符串默认为normal;
$("div").show("fast"); 
  • 用法三:参数一可以是数值类型或者字符串类型表示动画执行时间,参数二表示动画执行完毕之后立刻执行的回调函数;
$("div").show(1000,function (){}); 
  • 用法四:不带参数,作用等同于css("display","block");(底层是通过改变display:block来实现的),此时没有动画效果
$("div").show(); 
  • hide方法:使得匹配元素隐藏
  • 四种用法如下:
//方法一 $("div").hide(1000); //方法二 $("div").hide("slow"); //方法三 $("div").hide("normal",function (){}); //方法四 $("div").hide(); 
  • 显示隐藏进行切换toggle,用法完全一致。
滑入滑出动画(通过改变高度display来实现)
  • 滑入动画效果(联想生活中的卷帘门):让元素以下拉动画效果展示出来,也有四种用法,这里展示常用的两种
  • 用法一:
$("div").slideDown(speed,callback); 
  • 用法二:
$("div").slideDown(); 
  • 注意:省略参数或者传入不合法的参数,就会使用默认值400ms(同样适用于slideUp、fadeIn)。

  • 滑出动画效果:让元素以上拉动画效果形式隐藏,也有四种方法,这里不再全部展示

$("div").slideUp(speed,callback); 
  • 滑入滑出切换动画效果slideToggle
  • 如果元素已经隐藏,该方法就相当于slideDown;如果元素已经展示,该方法就相当于slideUp
$("div").slideToggle(speed,callback); 
淡入淡出动画(通过改变透明度display来实现)
  • 淡入动画效果:让元素以淡淡的的进入视线的方式展示出来,有四种方法;
$("div").fadeIn(speed,callback); 
  • 淡出动画效果:让元素以渐渐消失的方式隐藏起来,有四种方法
$("div").fadeOut(speed,callback); 
  • 淡入淡出切换动画效果:通过改变透明度,切换匹配元素的显示和隐藏(完全透明时隐藏)状态;
$("div").fadeToggle("fast",callback); 
  • 改变透明度到具体的某个值fadeTo
  • 与淡入淡出的区别:淡入淡出只能控制元素的不透明度从 完全不透明 到完全透明;而fadeTo可以指定元素不透明度的具体值。并且时间参数是必需的
  • 用法有别于其它动画效果;第一个参数表示时长;第二个参数表示透明度,范围:0-1,0为全透明,1为不透明;可以有第三个参数(回调函数);
$("div").fadeTo(100,0.4); 
  • 第一个参数为0时,此时的作用相当于:.css("opacity",.4);
$("div").fadeTo(0,.4); 
  • 注意:
  • jQuery预设的三组动画效果的语法几乎一致:参数可以有两个,第一个是动画的执行时长,第二个是动画执行完成后的回调函数;第一个参数是:可以是指定字符或者毫秒数(fadeTo()除外);
  • 展示隐藏:
    • 表示展示:show()、fadeIn()、slideDown();
    • 表示隐藏:hide()、fadeOut()、slideUp()。
自定义动画
  • 注意:所有能够执行动画的属性必须只有一个数字类型的值,如要改变字体的大小,要使用:fontSize(font-size),不要使用font。
$("div").animate(params,speen,callback); 
<head>     <meta charset="UTF-8">     <title>Title</title>      <style>         div{             width: 100px;             height: 100px;             background-color: #96c;             position: absolute;         }     </style> </head>  <body> <button>点我</button> <div></div>  <script src="jquery-1.11.1.js"></script> <script>     var btn = $("button");     btn.click(function () {         var json1 = {"width":"500px","height":"500px","left":"200px","top":"200px","border-radius":100 };         var json2 = {"width":300,"height":300,"left":100,"top":100};         $("div").animate(json1,1000,function () {             $("div").animate(json2,1000,function () {                 alert("动画2执行完毕");             });         });     }); </script> </body> 
  • 作用:执行一组CSS属性的自定义动画;
  • 第一个参数表示要执行动画的CSS属性(必选)(JSON串),不支持背景色;第二个参数表示执行动画时长(可选);第三个参数表示动画执行完毕之后立即执行的回调函数(可选)
停止动画stop():停止当前正在执行的动画
  • 如果一个以上的动画方法在同一个元素上调用,那么对这个元素来说,后面的动画将被放到效果队列中。这样就形成了动画队列。(联想:排队进站)

  • 动画队列里面的动画不会全部执行,直到第一个动画执行完成;

  • 第一个参数表示后续动画是否要执行true:后续动画不执行 ;false:后续动画会执行

  • 第二个参数表示当前动画是否执行完true:立即执行完成当前动画 ;false:立即停止当前动画,一定要注意,是当前动画

$(selector).stop(clearQueue,jumpToEnd); 
  • 都不给,默认false;

  • 解释:

  • 当调用stop()方法后,队列里面的下一个动画将会立即开始。但是,如果参数clearQueue被设置为true,那么队列面剩余的动画就被删除了,并且永远也不会执行。

  • 如果参数jumpToEnd被设置为true,参与动画的每一个CSS属性将被立即设置为它们的目标值。比如:slideUp()方法,那么元素会立即隐藏掉。如果存在回调函数,那么回调函数也会立即执行。

  • 注意:如果元素动画还没有执行完,此时调用stop()方法,那么动画将会停止。并且动画没有执行完成,那么回调函数也不会被执行。

  • 常用方式:

$(selector).stop(); 
  • 练习:
  • 右下角弹出的广告(打开页面广告先滑入再滑出;再淡入,点击关闭按钮后再淡出);两种方式实现:一种是链式编程,一种是通过函数回调实现。

jQuery节点操作

创建节点
  • 回顾一下js中创建节点的三种方式:

  • 方式一:document.write();,容易层叠掉已有的元素;

  • 方式二:使用innerHTML或者html属性;

  • 方式三:document.createElement();

  • $()函数的另外一个作用:动态创建元素;

  • 方式一:

var $spanNode = $(“<span>我是一个span元素</span>”); 
  • 类比js中的document.createElement("span")
  • 方式二:html创建元素(推荐使用,重点
var node = $(“#box”).html(“<li>我是li</li>”); 
  • 作用:设置或返回所选元素的html内容(包括 HTML 标记);
  • 设置内容的时候,如果是html标记,会动态创建元素,此时可类比js里面的 innerHTML属性,因为此属性识别html标签;
  • 获取html内容
$(selector).html(); 
添加元素append()(重点)
  • 在元素的最后一个子元素后面追加元素;
  • 作用:在被选元素内部的最后一个子元素(或内容)后面插入内容(存在或者创建出来的元素都可以);
  • 如果是页面中存在的元素,那么调用append()后,会把这个元素放到相应的目标元素里面去;但是,原来的这个元素,就不存在了;
  • 如果是给多个目标追加元素,那么方法的内部会复制多份这个元素,然后追加到多个目标里面去;
  • 常用参数:htmlString 或者 jQuery对象;
  • 在$(selector)中追加$node
$(selector).append($node); 
  • 在$(selector)中追加div元素,参数为htmlString
$(selector).append('<div></div>'); 
  • 不常用操作:(用法跟append()方法基本一致)
  • appendTo(),作用:同append();
node.appendTo($(selector)); 
  • prepend(),作用:在元素的第一个子元素前面追加内容或节点;
//方式一: $(selector).prepend(node); //方式二: node.prependTo($(selector)); 
  • after(),作用:在被选元素$(selector)之后,作为兄弟元素插入内容或节点
$(selector).after(node); 
  • before(),作用:在被选元素$(selector)之前,作为兄弟元素插入内容或节点
$(selector).before(node); 
清空元素
  • 清空指定元素的所有子元素(光杆司令);
  • 方法一:没有参数;
$(selector).empty();    //方式一 $(selector).html("");   //方式二 
  • “自杀” 把自己(包括所有内部元素)从文档中删除掉;
$(selector).remove(); 
复制元素
  • 作用:复制匹配的元素
  • 复制$(selector)所匹配到的元素;
  • 返回值为复制的新元素,只有深层复制;
$(selector).clone(); 
  • 总结:
    推荐使用html("<span></span>")方法来创建元素或者html(“”)清空元素。

  • 练习:

  • 选择水果;

  • 动态创建表格;

  • 动态添加数据;

重点内容

  • val()属性操作;
  • 时间绑定;
  • 事件解绑;
  • 事件触发;
  • 插件基本使用。

操作form表单

属性操作
  • 设置属性
$(selector).attr("title","卡内基梅陇"); 
  • 第一个参数表示:要设置的属性名称;

  • 第二个参数表示:该属性名称对应的值。

  • 获取属性:返回指定属性的值

$(selector).attr("title"); 
  • 参数为:要获取属性的名称,该操作会返回指定属性对应的值。

  • 移除属性操作

$(selector).removeAttr("title"); 
  • 参数为:要移除的属性的名称;

  • 注意:

  • checked、selected、disabled要使用.prop()方法;

  • prop方法通常用来影响DOM元素的动态状态,而不是改变的HTML属性;

  • 例如:input和button的disabled特性,以及checkbox的checked特性;

  • 细节参考:http://api.jquery.com/prop/

  • 案例:表格案例全选反选;

值和内容
  • val()方法:
  • 作用:设置或者返回表单元素的值,例如:input、select、textarea的值;
//获取匹配元素的值,只匹配第一个元素 $(selector).val(); 
//设置所有匹配到的元素的值 $(selector).val("具体值"); 
  • text()方法:
  • 作用:设置或者获取匹配元素的文本内容;
  • 方法一:获取操作不带参数(注意:这时候会把所有匹配到的元素内容拼接为一个字符串,不同于其他获取操作!)
$(selector).text(); 
  • 设置操作带参数,参数表示要设置的文本内容
// 如果设置的内容包含html标签(<span>我要动态创建span</span>),那么text这个方法会把他们当作文本内容输出,而不会创建元素。这个text()和html()方的主要区别 $(selector).text(“我是内容”); 
  • 案例:红鲤鱼与绿鲤鱼

尺寸位置操作

高度和宽度操作
  • 高度操作height() :
  • 作用:设置或获取匹配元素的高度值;
  • 带参数表示设置高度
$(selector).height(200); 
  • 不带参数获取高度
$(selector).height(); 
  • 宽度操作width() :
  • 作用:设置或获取匹配元素的宽度值;
  • 带参数表示设置宽度;
  • 不带参数获取宽度;
$(selector).width(200); 
  • css()获取高度和height获取高度的区别:
  • 方式一:height()方法返回值为number类型,例如:30;
$("div").height(); 
  • 方式二:css()方法返回值为string类型,例如:”30px”;
$("div").css("height"); 
  • 区别:方式一常用于参与数学计算的情况。
坐标值操作
  • offset():
  • 作用:获取或设置元素相对于文档的位置;
  • 无参数表示获取,返回值为:{left:num, top:num},值是相对于document的位置;
$(selector).offset(); 
  • 有参数表示设置,参数推荐使用数值类型;
$(selector).offset({left:100, top: 150}); 
  • 注意点:设置offset后,如果元素没有定位(默认值:static),则被修改为relative

  • position():

  • 作用:获取相对于其最近的具有定位的父元素的位置;

  • 获取,返回值为对象:{left:num, top:num};

$(selector).position(); 
  • 注意:只能获取,不能设置。

  • scrollTop():

  • 作用:获取或者设置元素垂直方向滚动的位置;

  • 无参数表示获取偏移;

  • 有参数表示设置偏移,参数为数值类型;

$(selector).scrollTop(100); 
  • scrollLeft():
  • 作用:获取或者设置元素水平方向滚动的位置;
$(selector).scrollLeft(100); 
  • 对scrollTop的理解:
    垂直滚动条位置 是可滚动区域 在 可视区域上方的 被隐藏区域的高度。
    如果滚动条在最上方没有滚动 或者 当前元素没有出现滚动条,那么这个距离为0。

  • 案例:固定导航栏

jQuery事件机制

  • jQuery的事件机制,指的是:jQuery对JavaScript操作DOM事件的封装,包括了:事件绑定、事件解绑、事件触发。
jQuery事件的发展历程(了解)
  • 简单事件绑定 >> bind事件绑定 >> delegate事件绑定 >> on重点

  • 简单事件绑定:

事件 事件描述
click(handler) 单击事件
blur(handler) 失去焦点事件
mouseenter(handler) 鼠标进入事件
mouseleave(handler) 鼠标离开事件
dbclick(handler) 双击事件
change(handler) 改变事件,如:文本框值改变,下拉列表值改变等
focus(handler) 获得焦点事件
keydown(handler) 键盘按下事件
  • 其他参考:http://www.w3school.com.cn/jquery/jquery_ref_events.asp

  • bind方式(不推荐,1.7以后的jQuery版本被on取代)

  • 作用:给匹配到的元素直接绑定事件

// 绑定单击事件处理程序 $("p").bind("click", function(e){     //事件响应方法 }); 
  • 第一个参数:事件类型;

  • 第二个参数:事件处理程序;

  • 比简单事件绑定方式的优势:

    • 可以同时绑定多个事件,比如:bind(“mouseenter mouseleave”, function(){});
    • 缺点:要绑定事件的元素必须存在文档中。
  • delegate方式(特点:性能高,支持动态创建的元素)

  • 作用:给匹配到的元素绑定事件,对支持动态创建的元素有效;

$(".parentBox").delegate("p", "click", function(){     //为 .parentBox下面的所有的p标签绑定事件 }); 
  • 第一个参数:selector,要绑定事件的元素;

  • 第二个参数:事件类型;

  • 第三个参数:事件处理函数。

  • 与前两种方式最大的优势:减少事件绑定次数提高效率,支持动态创建出来的元素绑定事件

on方式(最现代的方式,兼容zepto(移动端类似jQuery的一个库),强烈建议使用的方式)重点
  • jQuery1.7版本后,jQuery用on统一了所有的事件处理的方法;
  • 作用:给匹配的元素绑定事件,包括了上面所有绑定事件方式的优点;
  • 语法:
  • 第一个参数:events,绑定事件的名称可以是由空格分隔的多个事件(标准事件或者自定义事件);
  • 第二个参数:selector, 执行事件的后代元素;
  • 第三个参数:data,传递给处理函数的数据,事件触发的时候通过event.data来使用;
  • 第四个参数:handler,事件处理函数;
$(selector).on(events[,selector][,data],handler); 
  • 表示给$(selector)绑定事件,当必须是它的内部元素span才能执行这个事件;
$(selector).on( "click",“span”, function() {}); 
  • 绑定多个事件
  • 表示给$(selector)匹配的元素绑定单击和鼠标进入事件;
$(selector).on(“click mouseenter”, function(){}); 
事件解绑
  • unbind() 方式
  • 作用:解绑 bind方式绑定的事件;
  • 解绑所有的事件:
$(selector).unbind(); 
  • 解绑指定的事件
$(selector).unbind(“click”); 
  • undelegate() 方式
  • 作用:解绑delegate方式绑定的事件;
  • 解绑所有的delegate事件;
$( selector ).undelegate(); 
  • 解绑所有的click事件;
$( selector).undelegate("click"); ```  - off解绑on方式绑定的事件`重点`  - 解绑匹配元素的所有事件: ```js $(selector).off(); 
  • 解绑匹配元素的所有click事件:
$(selector).off("click"); 
  • 解绑所有代理的click事件,元素本身的事件不会被解绑:
$(selector).off("click", "**" ); 
事件触发
  • 简单事件触发
  • 触发 click事件:
$(selector).click(); 
  • trigger方法触发事件,触发浏览器行为:
$(selector).trigger(“click”); 
  • triggerHandler触发 事件响应方法,不触发浏览器行为,比如:文本框获得焦点的默认行为:
$(selector).triggerHandler(“focus”); 
jQuery事件对象介绍
事件对象 说明
event.data 传递给事件处理程序的额外数据
event.currentTarget 等同于this,当前DOM对象
event.pageX 鼠标相对于文档左部边缘的位置
event.target 触发事件源,不一定===this
event.stopPropagation(); 阻止事件冒泡
event.preventDefault(); 阻止默认行为
event.type 事件类型:click,dbclick…
event.which 鼠标的按键类型:左1 中2 右3
event.keyCode 键盘按键代码
  • 案例:按键变色

jQuery补充

链式编程
  • 链式编程原理:return this;

  • 通常情况下,只有设置操作才能把链式编程延续下去。因为获取操作的时候,会返回获取到的相应的值,无法返回 this。

  • end();:结束当前链最近的一次过滤操作,并且返回匹配元素之前的状态。

隐式迭代
  • 隐式迭代的意思是:在方法的内部会为匹配到的所有元素进行循环遍历,执行相应的方法;而不用我们再进行循环,简化我们的操作,方便我们调用;
  • 如果获取的是多元素的值,大部分情况下返回的是第一个元素的值。
  • 案例【五角星评分控件】
each方法
  • 有了隐式迭代,为什么还要使用each函数遍历?

  • 大部分情况下是不需要使用each方法的,因为jQuery的隐式迭代特性;

  • 如果要对每个元素做不同的处理,这时候就用到了each方法;

  • 作用:遍历jQuery对象集合,为每个匹配的元素执行一个函数

  • 参数一表示当前元素在所有匹配元素中的索引号;

  • 参数二表示当前元素(DOM对象);

$(selector).each(function(index,element){}); 
  • element是一个 js对象,需要转换成jquery对象。

  • 【案例】 什么都看不见

多库共存
  • 此处多库共存指的是:jQuery占用了$jQuery这两个变量。当在同一个页面中引用了jQuery这个js库,并且引用的其他库(或者其他版本的jQuery库)中也用到了$或者jQuery这两个变量,那么,要保证每个库都能正常使用,这时候就有了多库共存的问题。

  • 模拟另外的库使用了 $ 这个变量,此时,就与jQuery库产生了冲突:

var $ = { name : “itecast” }; 
  • 解决方式:
    • 作用:让jQuery释放对$的控制权,让其他库能够使用$符号,达到多库共存的目的。此后,只能使用jQuery来调用jQuery提供的方法;$.noConflict(); //true两个都交出来,返回值是新的调用方法;
<script src="../jquery-1.8.2.min.js"></script> <script src="../jquery-1.11.1.js"></script> <script>     $.noConflict();     //打印当前jQuery的版本号     console.log($.fn.jquery);   //1.8.2     console.log(jQuery.fn.jquery);  //1.11.1 </script> 

jQuery插件机制

  • jQuery这个js库,虽然功能强大,但也不是面面俱到包含所有的功能。
  • jQuery是通过插件的方式,来扩展它的功能:
  • 当你需要某个插件的时候,你可以“安装”到jQuery上面,然后,使用;
  • 当你不再需要这个插件,那你就可以从jQuery上“卸载”它。(就好比如手机软件,安装的app就好比插件,用的时候安装上,不用的时候卸载掉)
第三方插件
  • jQuery.color.js
  • animate()自定义动画:不支持背景的动画效果;
  • animate动画支持的属性列表;
  • jQuery.lazyload.js
  • 使用步骤:
    • 引入jQuery文件
    • 引入插件
    • 使用插件
制作插件
  • 如何创建jQuery插件:http://learn.jquery.com/plugins/basic-plugin-creation/

  • 全局jQuery函数扩展方法:

$.pluginName = function() {}; 
  • jQuery对象扩展方法
$.fn.pluginName = function() {}; 
jQueryUI
  • jQueryUI专指由jQuery官方维护的UI方向的插件。
  • 官方API:http://api.jqueryui.com/category/all/
  • 其他教程:jQueryUI教程:http://www.runoob.com/jqueryui/jqueryui-intro.html
  • 基本使用:
  • 引入jQueryUI的样式文件;
  • 引入jQuery;
  • 引入jQueryUI的js文件;
  • 使用jQueryUI功能。

点赞