html+js+Jquery（四）-阿里云开发者社区

Jquery

1. Jquery的基本介绍

1>.概念

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

（选择器，事件，DOM,动画，基本操作，插件，ajax）

JavaScript框架：本质上就是一些js文件，封装了js的原生代码而已

部署：<script src="jq.....js">

注意：不管什么时候，都要把js放在最前面

2>. JQuery快速入门

jquery-xxx.js 与 jquery-xxx.min.js区别：(掌握)

（1）. jquery-xxx.js：开发版本。给程序员看的，有良好的缩进和注释。体积大一些

（2）. jquery-xxx.min.js：生产版本。程序中使用，没有缩进。体积小一些。程序加载更快

- 步骤：
  1. 下载JQuery
  * 目前jQuery有三个大版本：
    1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，
     功能不再新增。因此一般项目来说，使用1.x版本就可以了，
     最终版本：1.12.4 (2016年5月20日)
    2.x：不兼容ie678，很少有人使用，官方只做BUG维护，
     功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，
     最终版本：2.2.4 (2016年5月20日)
    3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，
     一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。
     目前该版本是官方主要更新维护的版本。最新版本：3.2.1（2017年3月20日）
  * jquery-xxx.js 与 jquery-xxx.min.js区别：
    1. jquery-xxx.js：开发版本。给程序员看的，有良好的缩进和注释。体积大一些
    2. jquery-xxx.min.js：生产版本。程序中使用，没有缩进。体积小一些。程序加载更快
 - 导入JQuery的js文件：导入min.js文件
 - 使用
  var div1 = $("#div1");
  alert(div1.html());

- 步骤：
  1. 下载JQuery
  * 目前jQuery有三个大版本：
    1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，
     功能不再新增。因此一般项目来说，使用1.x版本就可以了，
     最终版本：1.12.4 (2016年5月20日)
    2.x：不兼容ie678，很少有人使用，官方只做BUG维护，
     功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，
     最终版本：2.2.4 (2016年5月20日)
    3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，
     一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。
     目前该版本是官方主要更新维护的版本。最新版本：3.2.1（2017年3月20日）
  * jquery-xxx.js 与 jquery-xxx.min.js区别：
    1. jquery-xxx.js：开发版本。给程序员看的，有良好的缩进和注释。体积大一些
    2. jquery-xxx.min.js：生产版本。程序中使用，没有缩进。体积小一些。程序加载更快
 - 导入JQuery的js文件：导入min.js文件
 - 使用
  var div1 = $("#div1");
  alert(div1.html());

3>. JQuery对象和JS对象区别与转换

①. JQuery对象在操作时，更加方便。

②. JQuery对象和js对象方法不通用的.

③. 两者相互转换

* jq -- > js : jq对象[索引] 或者 jq对象.get(索引)
* js -- > jq : $(js对象)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuer对象和js对象的转换</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
    <div id="div1">div1....</div>
    <div id="div2">div2....</div>
<script>
  //1. 通过js方式来获取名称叫div的所有html元素对象
    var divs = document.getElementsByTagName("div");
    alert(divs.length);//可以将其当做数组来使用
    //对divs中所有的div 让其标签体内容变为"aaa"
  for (var i = 0; i < divs.length; i++) {
      //divs[i].innerHTML = "aaa";
      $(divs[i]).html("ccc");
  }
    //2. 通过jq方式来获取名称叫div的所有html元素对象
    var $divs = $("div");
  alert($divs.length);//也可以当做数组使用
  //对divs中所有的div 让其标签体内容变为"bbb"  使用jq方式
    //$divs.html("bbb");
   // $divs.innerHTML = "bbb";
  $divs[0].innerHTML = "ddd";
  $divs.get(1).innerHTML = "eee";
    /*
        1. JQuery对象在操作时，更加方便。
        2. JQuery对象和js对象方法不通用的.
        3. 两者相互转换
            * jq -- > js : jq对象[索引] 或者 jq对象.get(索引)
            * js -- > jq : $(js对象)
     */
</script>
</body>
</html>

4>. 基本操作学习

//为后面的内容做铺垫
 - 事件绑定
  //1.获取b1按钮
          $("#b1").click(function(){
              alert("abc");
          });
 - 入口函数
  $(function () {
        });
  window.onload  和 $(function) 区别
               * window.onload 只能定义一次,如果定义多次，后边的会将前边的覆盖掉
               * $(function)可以定义多次的。
 - 样式控制：css方法
  // $("#div1").css("background-color","red");
      $("#div1").css("backgroundColor","pink");

2. 选择器

1>. 基本选择器

①. 标签选择器（元素选择器）：$("[name]")

语法： $(“html标签名”) 获得所有匹配标签名称的元素

②. id选择器：#id

语法： $("#id的属性值") 获得与指定id属性值匹配的元素

③. 类选择器： .id

语法： $(".class的属性值") 获得与指定的class属性值匹配的元素

④. 并集选择器：

语法： $(“选择器1,选择器2…”) 获取多个选择器选中的所有元素

2>. 层级选择器

①. 后代选择器 $("A B ") 选择A元素内部的所有B元素

②. 子选择器 : $("A > B") 选择A元素内部的所有B子元素

3>. 属性选择器

①. 属性名称选择器：$("A[属性名]")

语法： $(“A[属性名]”) 包含指定属性的选择器

②. 属性选择器： $("A[属性名='值']")

语法： $(“A[属性名=‘值’]”) 包含指定属性等于指定值的选择器

③. 复合属性选择器：$("A[属性名='值'][ ]...")

语法： $(“A[属性名=‘值’][ ]…”) 包含多个属性条件的选择器

4>. 过滤选择器

①. 首元素选择器 : 语法： :first 获得选择的元素中的第一个元素

②. 尾元素选择器语法： :last 获得选择的元素中的最后一个元素

③. 非元素选择器语法： :not(selector) 不包括指定内容的元素

④. 偶数选择器语法： :even 偶数，从 0 开始计数

⑤. 奇数选择器语法： :odd 奇数，从 0 开始计数

⑥. 等于索引选择器语法： :eq(index) 指定索引元素

⑦. 大于索引选择器语法： :gt(index) 大于指定索引元素

⑧. 小于索引选择器语法： :lt(index) 小于指定索引元素

⑨. 标题选择器语法： :header 获得标题（h1~h6）元素，固定写法

<!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  src="../js/jquery-3.3.1.min.js"></script>
  <style type="text/css">
    div,span{
       width: 180px;
       height: 180px;
       margin: 20px;
       background: #9999CC;
       border: #000 1px solid;
    float:left;
       font-size: 17px;
       font-family:Roman;
    }
    div .mini{
       width: 50px;
       height: 50px;
       background: #CC66FF;
       border: #000 1px solid;
       font-size: 12px;
       font-family:Roman;
    }
    div .mini01{
       width: 50px;
       height: 50px;
       background: #CC66FF;
       border: #000 1px solid;
       font-size: 12px;
       font-family:Roman;
    }
  </style>
  <script type="text/javascript">
  $(function () {
            // <input type="button" value=" 改变第一个 div 元素的背景色为 红色"  id="b1"/>
    $("#b1").click(function () {
    $("div:first").css("backgroundColor","pink");
            });
            // <input type="button" value=" 改变最后一个 div 元素的背景色为 红色"  id="b2"/>
            $("#b2").click(function () {
                $("div:last").css("backgroundColor","pink");
            });
            // <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色"  id="b3"/>
            $("#b3").click(function () {
                $("div:not(.one)").css("backgroundColor","pink");
            });
            // <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色"  id="b4"/>
            $("#b4").click(function () {
                $("div:even").css("backgroundColor","pink");
            });
            // <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色"  id="b5"/>
            $("#b5").click(function () {
                $("div:odd").css("backgroundColor","pink");
            });
            // <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色"  id="b6"/>
            $("#b6").click(function () {
                $("div:gt(3)").css("backgroundColor","pink");
            });
            // <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色"  id="b7"/>
            $("#b7").click(function () {
                $("div:eq(3)").css("backgroundColor","pink");
            });
            // <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色"  id="b8"/>
            $("#b8").click(function () {
                $("div:lt(3)").css("backgroundColor","pink");
            });
            // <input type="button" value=" 改变所有的标题元素的背景色为 红色"  id="b9"/>
            $("#b9").click(function () {
                $(":header").css("backgroundColor","pink");
            });
        });
  </script>
  </head>
  <body>
   <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
   <input type="button" value=" 改变第一个 div 元素的背景色为 红色"  id="b1"/>
   <input type="button" value=" 改变最后一个 div 元素的背景色为 红色"  id="b2"/>
   <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色"  id="b3"/>
   <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色"  id="b4"/>
   <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色"  id="b5"/>
   <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色"  id="b6"/>
   <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色"  id="b7"/>
   <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色"  id="b8"/>
   <input type="button" value=" 改变所有的标题元素的背景色为 红色"  id="b9"/>
   <h1>有一种奇迹叫坚持</h1>
   <h2>自信源于努力</h2>
      <div id="one">
       id为one  
   </div>
   <div id="two" class="mini" >
         id为two   class是 mini 
         <div  class="mini" >class是 mini</div>
  </div>
   <div class="one" >
        class是 one 
         <div  class="mini" >class是 mini</div>
      <div  class="mini" >class是 mini</div>
   </div>
   <div class="one" >
      class是 one 
         <div  class="mini01" >class是 mini01</div>
      <div  class="mini" >class是 mini</div>
  </div>  
  </body>
</html>

5>. 表单过滤选择器

①. 可用元素选择器（:enabled 获得可用元素）

②. 不可用元素选择器（:disabled 获得不可用元素）

③. 选中选择器（:checked 获得单选/复选框选中的元素）

④. 选中选择器（:selected 获得下拉框选中的元素）

3. DOM操作

1>. 内容操作

①. html( ): 获取/设置元素的标签体内容 <a>内容</a> --> 内容

②. text( ): 获取/设置元素的标签体纯文本内容 <a>内容</a> --> 内容

③. val( ) ：获取/设置元素的value属性值

2>. 属性操作

1. 通用属性操作

①.attr(): 获取/设置元素的属性

②. removeAttr():删除属性

③. prop():获取/设置元素的属性

④. removeProp():删除属性

* attr和prop区别？
  1. 如果操作的是元素的固有属性（如 input中的name等 ），则建议使用prop
  2. 如果操作的是元素自定义的属性，则建议使用attr

（1）元素. attr(属性名) //获取属性的值（取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回 undefined ）

（2）attr(属性名, 属性值) //设置属性的值** （为所有匹配的元素设置一个属性值。）attr(“td”,1)

（3）attr(properties) //给指定元素设置多个属性值，即 {属性名一:“属性值一” , 属性名二: “属性值二” , … … }。attr（{value：" zhi"，value：" zhi"}）;(这是一种在所有匹配元素中批量设置很多属性的最佳方式。注意，如果你要设置对象的class属性，你必须使用’className’ 作为属性名。或者你可以直接使用’class’或者’id’。)

var dd = $(this).attr("num");
  $(this).attr("num", dd)
  $(this).attr("value", "我喜欢你")
  $(":input").attr({"xiaozhi":"XIAOZHI","xiaoxing":"XIAOXING"});

2. 对class属性操作

①. addClass( ):添加class属性值

②. removeClass( ):删除class属性值

③. toggleClass( ):切换class属性

toggleClass(“one”):

判断如果元素对象上存在class=“one”，则将属性值one删除掉。如果元素对象上不存在class=“one”，则添加

④. css( ):

<style type="text/css">
  .ab {
    width: 300px;
    height: 100px;
    background: red;
  }
  .abcd {
          width: 300px;
    height: 100px;
    background: yellow;
  }
  </style>
  <body>
  <div class="ab"></div>
  <input type="button" value="点击">
  <script src="../../base/js/jquery-1.11.3.min.js"></script>
  <script>
    $("input").click(function(){
    $("div").toggleClass("abcd"); 
    });
  </script>
  </body>

<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
  <title></title>
  </head>
  <style type="text/css">
  .ab {
    width: 300px;
    height: 100px;
    background: red;
  }
  .cd {
    width: 300px;
    height: 100px;
    background: blue;
  }
  .ef {
    width: 300px;
    height: 100px;
    background: yellow;
  }
  </style>
  <body>
  <div class=""> </div>
  <input class="d1" type="button" value="布局一">
  <input class="d2" type="button" value="布局二">
  <input class="d3" type="button" value="布局三">
  <script src="../../base/js/jquery-1.11.3.min.js"></script>
  <script>
    $(".d1").click(function() {
    $("div").removeClass("cd");
    $("div").removeClass("ef");
    $("div").addClass("ab");
    });
    $(".d2").click(function() {
    $("div").removeClass("ab");
    $("div").removeClass("ef");
    $("div").addClass("cd");
    });
    $(".d3").click(function() {
    $("div").removeClass("ab");
    $("div").removeClass("cd");
    $("div").addClass("ef");
    });
  </script>
  </body>
</html>

3. CRUD操作（掌握）

1>. 内部插入都是插入的子元素

①. append: $(a).append($(b)) 把b插入到a中 ( a里面内容的后面 )

②. prepend: $(a).prepend($(b)) 把b插入到a上面( a里面内容的前面 )

③. appendto:$(b).appendTo($(a ))（将b添加到a里面，并且在末尾）

④. prepend ：$(b).prepend($(a))（将b添加到a前面,并且在开头）

2>. 外部插入(兄弟级关系)

①. after ：$(a).after($(b)) 把b插入到a后面

②. before ：$(a).before($(b)) 把b插入到a前面

③. insertAfter：$(b).insertAfter($(a))把b插入到a后面

④. insertBefore：$(b).insertBefore($(a))把b插入到a前面

3>. 删除

①. remove( ): 删除的是整个标签，包括内容

②. empty( ): 删除的内容

③. clone（）：复制出一个一模一样的元素

4. 案列

①. 将数据行的奇数行背景色设置为 pink，偶数行背景色设置为 yellow

<script  src="../../js/jquery-3.3.1.min.js"></script>
    <script>
        //需求：将数据行的奇数行背景色设置为 pink，偶数行背景色设置为 yellow
        $(function () {
            //1. 获取数据行的奇数行的tr，设置背景色为pink
             $("tr:gt(1):odd").css("background","pink");
            //2. 获取数据行的偶数行的tr,设置背景色为yellow
             $("tr:gt(1):even").css("background","yellow");
        });
    </script>
</head>
<body>
<table id="tab1" border="1" width="800" align="center" >
    <tr>
        <td colspan="5"><input type="button" value="删除"></td>
    </tr>
    <tr style="background-color: #999999;">
        <th><input type="checkbox"></th>
        <th>分类ID</th>
        <th>分类名称</th>
        <th>分类描述</th>
        <th>操作</th>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>0</td>
        <td>手机数码</td>
        <td>手机数码类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>1</td>
        <td>电脑办公</td>
        <td>电脑办公类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>2</td>
        <td>鞋靴箱包</td>
        <td>鞋靴箱包类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>3</td>
        <td>家居饰品</td>
        <td>家居饰品类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
</table>
</body>
</html>

②. 全选和全不选

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script  src="../../js/jquery-3.3.1.min.js"></script>
    <script>
        //分析：需要保证下边的选中状态和第一个复选框的选中状态一致即可
        function  selectAll(obj) {
            //获取下边的复选框
            $(".itemSelect").prop("checked",obj.checked)
        }
    </script>
</head>
<body>
<table id="tab1" border="1" width="800" align="center" >
    <tr>
        <td colspan="5"><input type="button" value="删除"></td>
    </tr>
    <tr>
        <th><input type="checkbox" onclick="selectAll(this)" ></th>
        <th>分类ID</th>
        <th>分类名称</th>
        <th>分类描述</th>
        <th>操作</th>
    </tr>
    <tr>
        <td><input type="checkbox" class="itemSelect"></td>
        <td>1</td>
        <td>手机数码</td>
        <td>手机数码类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="itemSelect"></td>
        <td>2</td>
        <td>电脑办公</td>
        <td>电脑办公类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="itemSelect"></td>
        <td>3</td>
        <td>鞋靴箱包</td>
        <td>鞋靴箱包类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="itemSelect"></td>
        <td>4</td>
        <td>家居饰品</td>
        <td>家居饰品类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
</table>
</body>
</html>

5. 动画

三种方式显示和隐藏元素

参数：(这三个参数都是可选参数)

1. speed：动画的速度。三个预定义的值("slow","normal", "fast")或

表示动画时长的毫秒数值(如：1000)

2. easing：用来指定切换效果，默认是"swing"，可用参数"linear"

* swing：动画执行时效果是先慢，中间快，最后又慢

* linear(线性)：动画执行时速度是匀速的

3. fn：在动画完成时执行的函数，每个元素执行一次。

1>.默认显示和隐藏方式

①. show([speed,[easing],[fn]])

②. hide([speed,[easing],[fn]])

③. toggle([speed],[easing],[fn])

2>. 滑动显示和隐藏方式

①. slideDown([speed],[easing],[fn])

②. slideUp([speed,[easing],[fn]])

③.slideToggle([speed],[easing],[fn])

3>. 淡入淡出显示和隐藏方式

①. fadeIn([speed],[easing],[fn])

②. fadeOut([speed],[easing],[fn])

③. fadeToggle([speed,[easing],[fn]])

6. 遍历

1. jq对象.each(callback)
  1. 语法：
  jquery对象.each(function(index,element){});
    * index:就是元素在集合中的索引
    * element：就是集合中的每一个元素对象
    * this：集合中的每一个元素对象
  2. 回调函数返回值：
  * true:如果当前function返回为false，则结束循环(break)。
  * false:如果当前function返回为true，则结束本次循环，继续下次循环(continue)
2. $.each(object, [callback])

7. 事件绑定

1>. jquery标准的绑定方式

①. jq对象.事件方法(回调函数)；

注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。

②. 表单对象.submit(); //让表单提交

2>. on绑定事件/off解除绑定（动态绑定）

①. jq对象.on(“事件名称”,回调函数)

②. jq对象.off(“事件名称”)

如果off方法不传递任何参数，则将组件上的所有事件全部解绑

3>.事件切换：toggle（了解）

jq对象.toggle(fn1,fn2…)

当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2…

注意：1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。

<script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8">
</script>

4>. 事件总结

click()：点击事件
dblclick():双击事件
focus():得到焦点事件
blur():失去焦点事件
mouseover():鼠标进入元素事件
mouseout():鼠标离开元素事件
change():元素值改变事件
submit():提交事件，只能添加给表单元素，表示提交表单

8. 插件机制：增强JQuery的功能

①. $.fn.extend(object) : 增强通过Jquery获取的对象的功能 $("#id")

②. $.extend(object):增强JQeury对象自身的功能 $/jQuery

<script type="text/javascript">
       //使用jquery插件 给jq对象添加2个方法 check()选中所有复选框，uncheck()取消选中所有复选框
        //1.定义jqeury的对象插件
        $.fn.extend({
            //定义了一个check()方法。所有的jq对象都可以调用该方法
            check:function () {
               //让复选框选中
                //this:调用该方法的jq对象
                this.prop("checked",true);
            },
            uncheck:function () {
                //让复选框不选中
                this.prop("checked",false);
            }
        });
        $(function () {
           // 获取按钮
            //$("#btn-check").check();
            //复选框对象.check();
            $("#btn-check").click(function () {
                //获取复选框对象
                $("input[type='checkbox']").check();
            });
            $("#btn-uncheck").click(function () {
                //获取复选框对象
                $("input[type='checkbox']").uncheck();
            });
        });
    </script>
</head>
<body>
<input id="btn-check" type="button" value="点击选中复选框" onclick="checkFn()">
<input id="btn-uncheck" type="button" value="点击取消复选框选中" onclick="uncheckFn()">
<br/>
<input type="checkbox" value="football">足球
<input type="checkbox" value="basketball">篮球
<input type="checkbox" value="volleyball">排球
</body>
</html>

<script type="text/javascript">
        //对全局方法扩展2个方法，扩展min方法：求2个值的最小值；扩展max方法：求2个值最大值
        $.extend({
            max:function (a,b) {
                //返回两数中的较大值
                return a >= b ? a:b;
            },
            min:function (a,b) {
                //返回两数中的较小值
                return a <= b ? a:b;
            }
        });
        //调用全局方法
        var max = $.max(4,3);
        //alert(max);
        var min = $.min(1,2);
        alert(min);
    </script>
</head>
<body>
</body>
</html>

html+js+Jquery（四）

Jquery

1. Jquery的基本介绍

1>.概念

2>. JQuery快速入门

3>. JQuery对象和JS对象区别与转换

4>. 基本操作学习

2. 选择器

1>. 基本选择器

2>. 层级选择器

3>. 属性选择器

4>. 过滤选择器

5>. 表单过滤选择器

3. DOM操作

1>. 内容操作

2>. 属性操作

1. 通用属性操作

2. 对class属性操作

3. CRUD操作（掌握）

1>. 内部插入都是插入的子元素

2>. 外部插入(兄弟级关系)

3>. 删除

4. 案列

5. 动画

1>.默认显示和隐藏方式

2>. 滑动显示和隐藏方式

3>. 淡入淡出显示和隐藏方式

6. 遍历

7. 事件绑定

1>. jquery标准的绑定方式

2>. on绑定事件/off解除绑定（动态绑定）

3>.事件切换：toggle（了解）

4>. 事件总结

8. 插件机制：增强JQuery的功能

热门文章

最新文章

相关课程

相关电子书

相关实验场景

html+js+Jquery（四）

Jquery

1. Jquery的基本介绍

1>.概念

2>. JQuery快速入门

3>. JQuery对象和JS对象区别与转换

4>. 基本操作学习

2. 选择器

1>. 基本选择器

2>. 层级选择器

3>. 属性选择器

4>. 过滤选择器

5>. 表单过滤选择器

3. DOM操作

1>. 内容操作

2>. 属性操作

1. 通用属性操作

2. 对class属性操作

3. CRUD操作（掌握）

1>. 内部插入都是插入的子元素

2>. 外部插入(兄弟级关系)

3>. 删除

4. 案列

5. 动画

1>.默认显示和隐藏方式

2>. 滑动显示和隐藏方式

3>. 淡入淡出显示和隐藏方式

6. 遍历

7. 事件绑定

1>. jquery标准的绑定方式

2>. on绑定事件/off解除绑定 （动态绑定）

3>.事件切换：toggle（了解）

4>. 事件总结

8. 插件机制：增强JQuery的功能

热门文章

最新文章

相关课程

相关电子书

相关实验场景

2>. on绑定事件/off解除绑定（动态绑定）