jQuery

最新推荐文章于 2024-07-14 03:40:57 发布

卡卡_西

最新推荐文章于 2024-07-14 03:40:57 发布

阅读量186

点赞数 1

文章标签： jquery

本文链接：https://blog.csdn.net/m0_47224321/article/details/121105526

版权

一、什么是jquery

jquery就是一个js库，使用jq会比使用js更加方便简单。
Query is a fast, small, and feature-rich JavaScript library。
js库：把一些常用的方法写到了一个单独的js文件中，使用的时候直接将js库引入到代码里。（common.js）

二、jquery的版本

1.x版本：能够兼容IE6 7 8
2.x版本：不能兼容IE 6 7 8
3.x版本：不再兼容IE 6 7 8
（1）min.js ----- 压缩版，适用于生成环境
（2）js -----未压缩的，适用于开发环境

三、jquery的入口函数

js的入口函数与jq的入口函数的区别：
（1） js种的入口函数要等页面种的所有的内容加载完毕才去执行
（2）jq中的入口函数只会等文档树加载完毕就开始执行了，并不会等图片、文件的加载。

<script src="jquery-1.12.4.js"></script>
<script>
    认识
    $(document).ready(function () {
        console.log("这是jquery入口函数的第一种写法");
    });

    记住
    $(function () {
        console.log("这是jquery入口函数的第二种写法");
    });
</script>

四、jquery对象与DOM对象的区别

1、什么是js对象：
使用js的方式获取的元素就是js对象
2、什么是jquery对象：
使用jquery的方式获取的对象
3、js对象和jquery对象的区别：
js对象不能调用jquery对象的方法
jquery对象不能调用js对象的方法
jq对象其实就是js对象的一个集合，伪数组，里面放了一大堆的js对象
4、js对象转换为jquery对象 $(js对象)
5、jquery对象转换为js对象 $li[0]

隔行换色
<ul>
  <li>我是第1个li</li>
  <li>我是第2个li</li>
  <li>我是第3个li</li>
  <li>我是第4个li</li>
  <li>我是第5个li</li>
  <li>我是第6个li</li>
  <li>我是第7个li</li>
  <li>我是第8个li</li>
  <li>我是第9个li</li>
  <li>我是第10个li</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
    $(function () {
      var lis = $("li");
      for (var i = 0; i <lis.length;i++ ){
        if ( i % 2 == 0){
          lis[i].style.backgroundColor = "pink";
        }else {
          lis[i].style.backgroundColor = "red";
        }
      }
    });
</script>

五、$符号的实质

1、$其实就是一个函数，以后在使用的时候，记得加括号（）
参数不同，功能不同。

2、$有3个功能：
（1）参数是一个function----->入口函数
（2）参数是DOM对象------>把DOM对象转换成jquery对象
（3）参数是一个字符串------>用来找对象的

<script src="jquery-1.12.4.js"></script>
<script>
    console.log(typeof $);//function
    
    1:参数是一个function,---->入口函数
    $(function () {
    });

    2:参数是dom对象，----》把dom对象转换成jq对象
    $(document).ready(function () {
    });
    
    3:参数是一个字符串，-----》用来找对象的
    $("li");
    $("#btn");
</script>

六、jquery选择器

jquery中设置样式
css(name,value)
name------>样式名
value------->样式值

1、基本选择器
（1）标签选择器 $(“div”)

（2）id选择器 $(#id)
（3）类选择器 $(.class)
（4）交集选择器 $(“div.class”)
（5）并集选择器 $(“div,li”)

<ul>
    <li>1</li>
    <li>2</li>
    <li>2</li>
    <li id="four" class="green">4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>
<div class="green">1</div>
<div class="green">2</div>
<div class="green">3</div>
<script src="jquery-1.12.4.js"></script>
<script>
    $(function () {
        id选择器
        $("#four").css("backgroundColor","red");

        类选择器
        $(".green").css("color","pink");

        标签选择器
        $("div").css("fontSize","30px")

        并集选择器   选择器1，选择器2
        $("li,div").css("backgroundColor","blue");

        交集选择器   选择器1.x选择器2
        $("li.green").css("fontSize","50px");
    });
</script>

2、层级选择器
（1）子代选择器 $("#father > p")
（2）后代选择器 $("#father p")

<div id="father">
    <div>1</div>
    <div>2
        <p>111</p>
        <p>222</p>
        <p>333</p>
    </div>
    <div>3</div>
    <p>4</p>
    <p>5</p>
    <p>6</p>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
    $(function () {
        子代---->亲儿子
         $("#father > p").css("backgroundColor","red");

        后代--->所有的
        $("#father p").css("backgroundColor","red");
    });
</script>

3、过滤选择器
（1）even 选择器选取每个带有偶数 index 值的元素
语法：$(:even)
（2）odd 选择器选取每个带有奇数 index 值的元素
语法：$(:odd)
（3）eq() 选择器选取带有指定 index 值的元素
语法：$(:eq(index))
（4）:lt 选择器选取带有小于指定 index 值的元素
语法：$(:lt(index))
（5）:gt 选择器选取 index 值高于指定数的元素
语法：$(:gt(index))

4、筛选选择器
筛选选择器与过滤选择器类似，但是用法不一样，筛选选择器主要是方法。
（1）children(selector) $("ul").children("li")
（2）find(selector) $("ul li")
（3）siblings(selector) 查找兄弟节点，不包括自己
（4）next(selector) 查找下一个兄弟
（5）prev(selector) 查找上一个兄弟
（6）parent(selector) 查找父亲

手风琴案例
  <script src="jquery-1.12.4.js"></script>
  <script>
    $(function () {
      //找到所有的span注册点击事件
      $(".groupTitle").click(function () {
        //链式编程
    $(this).next().show().parent().siblings().children("div").hide();
      });
    });
  </script>
  
<ul class="parentWrap">
  <li class="menuGroup">
    <span class="groupTitle">标题1</span>
    <div>我是弹出来的div1</div>
  </li>
  <li class="menuGroup">
    <span class="groupTitle">标题2</span>
    <div>我是弹出来的div2</div>
  </li>
  <li class="menuGroup">
    <span class="groupTitle">标题3</span>
    <div>我是弹出来的div3</div>
  </li>
  <li class="menuGroup">
    <span class="groupTitle">标题4</span>
    <div>我是弹出来的div4</div>
  </li>
</ul>

七、jQuery样式操作

1、CSS操作
（1）操作单个样式
（2）操作多个样式
（3）获取样式
注意：
-----如果是设置样式的时候，如果是多个元素，那么是给所有的元素设置相同的值。
-----如果是获取样式的时候，如果是多个元素，那么只会返回第一个元素的样式值。

<script src="jquery-1.12.4.js"></script>
<script>
    单个样式
    $("li").css("backgroundColor","pink");
    设置多个样式
    $("li").css({
        "fontSize":"20px",
        "color":"green"
    });
    获取样式的值
    console.log( $("li:eq(0)").css("fontSize"));
</script>
<ul>
    <li>关晓彤</li>
    <li>迪丽热巴</li>
    <li>高圆圆</li>
    <li>刘诗诗</li>
</ul>

2、class操作
（1）添加类样式 addClass()
（2）移除类样式 removeClass()
（3）判断是否有某个样式 hasClass()
（4）切换样式 toggleClass()

3、jQuery属性操作
（1）attr操作
设置单个属性
设置多个属性
获取属性

    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function () {
             $("img").attr("alt","哎哟，不错哦");
             $("img").attr("title","我喜欢");

             设置多个属性值
             $("img").attr({
                 "alt":"图坏了",
                 "title":"我不喜欢"
             })

            获取属性值
           console.log($("img").attr("alt"));
        });
    </script>
<img src="images/1-small.jpg" alt="我是美女"  title="哈哈">

（2）prop操作
在jq版本1.6之后，对于checked 、selected、disabled属性值是布尔类型的，不能使用attr()，而是使用prop();

<input type="button" value="选中" >
<input type="button" value="不选中" >
<input type="checkbox" id="ck">
<script src="jquery-1.12.4.js"></script>
<script>
    $(function () {
        $("input").eq(0).click(function () {
            $("#ck").prop("checked",true);
        });
        $("input").eq(1).click(function () {
            $("#ck").prop("checked",false);
        });
    });
</script>

下拉菜单案例
  <script src="../jquery-1.12.4.js"></script>
  <script>
    $(function () {
      var $li = $(".wrap > ul > li");
      注册鼠标进入事件
      $li.mouseenter(function () {
        $(this).children("ul").show();
      });
      注册鼠标离开事件
      $li.mouseleave(function () {
        $(this).children("ul").hide();
      });
    });
  </script>
<div class="wrap">
  <ul>
    <li>
      <a href="javascript:void(0);">一级菜单1</a>
      <ul class="ul">
        <li><a href="javascript:void(0);">二级菜单11</a></li>
        <li><a href="javascript:void(0);">二级菜单12</a></li>
        <li><a href="javascript:void(0);">二级菜单13</a></li>
      </ul>
    </li>
    <li>
      <a href="javascript:void(0);">一级菜单2</a>
      <ul>
        <li><a href="javascript:void(0);">二级菜单21</a></li>
        <li><a href="javascript:void(0);">二级菜单22</a></li>
        <li><a href="javascript:void(0);">二级菜单23</a></li>
      </ul>
    </li>
    <li>
      <a href="javascript:void(0);">一级菜单3</a>
      <ul>
        <li><a href="javascript:void(0);">二级菜单31</a></li>
        <li><a href="javascript:void(0);">二级菜单32</a></li>
        <li><a href="javascript:void(0);">二级菜单33</a></li>
      </ul>
    </li>
  </ul>
</div>

opacity 设置透明度

突出展示案例
  <script src="../jquery-1.12.4.js"></script>
  <script>
    $(function () {
      注册进入事件
      $(".wrap > ul > li").mouseenter(function () {
          $(this).css("opacity","1").siblings().css("opacity","0.4");
      });
      注册鼠标离开事件
      $(".wrap").mouseleave(function () {
         $(this).find("li").css("opacity","1");
      });
    });
  </script>
<div class="wrap">
  <ul>
    <li><a href="#"><img src="images/01.jpg" alt=""/></a></li>
    <li><a href="#"><img src="images/02.jpg" alt=""/></a></li>
    <li><a href="#"><img src="images/03.jpg" alt=""/></a></li>
    <li><a href="#"><img src="images/04.jpg" alt=""/></a></li>
    <li><a href="#"><img src="images/05.jpg" alt=""/></a></li>
    <li><a href="#"><img src="images/06.jpg" alt=""/></a></li>
  </ul>
</div>

淘宝精品案例
    <script src="../jquery-1.12.4.js"></script>
    <script>
        $(function () {
            $("#left > li ").mouseover(function () {
                var index = $(this).index();
                根据index值去获取center中的li,让其显示
                $("#center > li:eq(" + index + ")").show().siblings().hide();
            });
            $("#right > li").mouseover(function () {
                var index = $(this).index() + 9;
                根据index值去获取center中的li,让其显示
                $("#center > li:eq(" + index + ")").show().siblings().hide();
            });
        });
    </script>
</head>
<body>
<div class="wrapper">
    <ul id="left">
        <li><a href="#">女靴</a></li>
        <li><a href="#">雪地靴</a></li>
        <li><a href="#">冬裙</a></li>
        <li><a href="#">呢大衣</a></li>
        <li><a href="#">毛衣</a></li>
        <li><a href="#">棉服</a></li>
        <li><a href="#">女裤</a></li>
        <li><a href="#">羽绒服</a></li>
        <li><a href="#">牛仔裤</a></li>
    </ul>
    <ul id="center">
        <li><a href="#"><img src="images/女靴.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/雪地靴.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/冬裙.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/呢大衣.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/毛衣.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/棉服.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/女裤.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/羽绒服.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/牛仔裤.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/女包.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/男靴.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/登山鞋.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/皮带.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/围巾.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/皮衣.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/男毛衣.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/男棉服.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/男包.jpg" width="200" height="250"/></a></li>
    </ul>
    <ul id="right">
        <li><a href="#">女包</a></li>
        <li><a href="#">男靴</a></li>
        <li><a href="#">登山鞋</a></li>
        <li><a href="#">皮带</a></li>
        <li><a href="#">围巾</a></li>
        <li><a href="#">皮衣</a></li>
        <li><a href="#">男毛衣</a></li>
        <li><a href="#">男棉服</a></li>
        <li><a href="#">男包</a></li>
    </ul>
</div>

京东tab栏切换
  <script src="../jquery-1.12.4.js"></script>
  <script>
    $(function () {
      $(".tab-item").mouseenter(function () {
        两件事
        $(this).addClass("active").siblings().removeClass("active");
        获取当前span的index
        var index = $(this).index();        $(".main").eq(index).addClass("selected").siblings().removeClass("selected");
      });
    });
  </script>
<div class="wrapper">
  <ul class="tab">
    <li class="tab-item active">国际大牌<span>◆</span></li>
    <li class="tab-item">国妆名牌<span>◆</span></li>
    <li class="tab-item">清洁用品<span>◆</span></li>
    <li class="tab-item">男士精品</li>
  </ul>
  <div class="products">
    <div class="main selected">
      <a href="###"><img src="imgs/guojidapai.jpg" alt=""/></a>
    </div>
    <div class="main">
      <a href="###"><img src="imgs/guozhuangmingpin.jpg" alt=""/></a>
    </div>
    <div class="main">
      <a href="###"><img src="imgs/qingjieyongpin.jpg" alt=""/></a>
    </div>
    <div class="main">
      <a href="###"><img src="imgs/nanshijingpin.jpg" alt=""/></a>
    </div>
  </div>
</div>

菜谱全选
</head>
<body>
<div class="wrap">
  <table>
    <thead>
    <tr>
      <th>
        <input type="checkbox" id="j_cbAll"/>
      </th>
      <th>菜名</th>
      <th>饭店</th>
    </tr>
    </thead>
    <tbody id="j_tb">
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>红烧肉</td>
      <td>田老师</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>西红柿鸡蛋</td>
      <td>田老师</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>红烧狮子头</td>
      <td>田老师</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>日式肥牛</td>
      <td>田老师</td>
    </tr>
   
    </tbody>
  </table>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
    $("#j_cbAll").click(function () {
      $("#j_tb input").prop("checked",$(this).prop("checked"));
    });
    $("#j_tb input").click(function () {
      如果4个都选中则选中，否则不选中
      选中的个数 == t-by中input的个数
      if ( $("#j_tb input:checked").length == $("#j_tb input").length){
        $("#j_cbAll").prop("checked",true);
      }else {
        $("#j_cbAll").prop("checked",false);
      }
    });
 });
</script>

八、jQuery动画

1、显示&隐藏
（1）显示show（）
show（）
show（speed）
show(speed,callback)
speed:动画持续的时间，可以是毫秒值，还可以是固定的字符串
callback:回调方法动画执行完毕后执行的方法
（2）隐藏hide()
hide()
hide(speed)
hide(speed,callback)

<input type="button" value="显示">
<input type="button" value="隐藏">
<div></div>
<script src="jquery-1.12.4.js"></script>
<script>
    $(function () {
        $("input").eq(0).click(function () 
              $("div").show();        
              $("div").show(1000);
              $("div").show("fast");  200ms
              $("div").show("slow");  600ms
              $("div").show("normal"); 400ms
              $("div").show("zhangsan");   与normal是一样的            
              $("div").show(1000,function () {
                console.log("哈哈");
            });
        });
        $("input").eq(1).click(function () {
            $("div").hide();
            $("div").hide(1000);
            $("div").hide(1000,function () {
                console.log("我隐藏了");
            });
        });
    });
</script>

2、滑入滑出
（1）滑入slideDown()
（2）滑出slideUp()
（3）切换slideToggle()

<input type="button" value="滑入">
<input type="button" value="滑出">
<input type="button" value="切换">
<div></div>
<script src="jquery-1.12.4.js"></script>
<script>
    $(function () {
        $("input").eq(0).click(function () {
             $("div").slideDown();
             $("div").slideDown("fast");
             $("div").slideDown("slow");
             $("div").slideDown("normal");
        });
        $("input").eq(1).click(function () {
            $("div").slideUp();
        });
        $("input").eq(2).click(function () {
            $("div").slideToggle();
        });
    });
</script>

3、淡入淡出
（1）淡入fadeIn()
（2）淡出fadeOut()
（3）切换fadeToggle()

<input type="button" value="淡入">
<input type="button" value="淡出">
<input type="button" value="切换">
<div></div>
<script src="jquery-1.12.4.js"></script>
<script>
    $(function () {
        $("input").eq(0).click(function () {
            $("div").fadeIn();
        });
        $("input").eq(1).click(function () {
            $("div").fadeOut();
        });
        $("input").eq(2).click(function () {
            $("div").fadeToggle();
        });
    });
</script>

九、自定义动画

$(selector).animate();
animate({params},speed,easing,callback);
（1）第一个参数: 对象，里面可以传需要执行的动画的css样式属性数字必须的
（2）第二个参数：speed 动画持续的时间不是必须的
（3）第三个参数：easing 动画执行的效果默认的效果：swing 缓动 linear 匀速不是必须的
（4）第四个参数：回调方法不是必须的

<input type="button" value="开始">
<input type="button" value="结束">
<div id="dv1"></div>
<div id="dv2"></div>
<div id="dv3"></div>
<script src="jquery-1.12.4.js"></script>
<script>
    $(function () {
        $("input").eq(0).click(function () {
            $("#dv1").animate({left:800});
            $("#dv2").animate({left:800},1000);           
            $("#dv3").animate({left:800},1000,"linear",function () {
                console.log("哈哈");
            });
        });
    });
</script>

十、动画队列和停止动画

**1、动画队列：**多个动画绑定在同一个对象上，动画的执行顺序按照书写的顺序执行。

动画队列
<input type="button" value="按钮" id="btn">
<div></div>
<script src="jquery-1.12.4.js"></script>
<script>
    $(function () {
        $("#btn").click(function () {
            $("div").animate({left:800})
                .animate({top:400})
                .animate({width:300,height:300})
                .animate({top:0,left:0});
        });
    });
</script>

**2、停止动画：**停止当前的正在执行的动画
（1）clearQueue：是否清除动画队列 true false
（2）gotoEnd：是否跳转到当前动画的最终效果 true false

停止动画
<input type="button" value="开始动画">
<input type="button" value="结束动画">
<div></div>
<script src="jquery-1.12.4.js"></script>
<script>
    $(function () {
        $("input").eq(0).click(function () {
            $("div").slideDown(4000).slideUp(4000);
        });
        $("input").eq(1).click(function () {       
            $("div").stop(true,true);
        });
    });
</script>

十一、节点操作

1、创建节点：
$('<a href="#" target="_blank">百度</a>')

2、添加节点
（1）append();
$("div").append($("p"));
（2）appendTo();
$("p").appendTo($("div"));
添加的内容的位置在后面
（1）prepend()
$("div").prepend($("p"));
（2）prependTo()
$("p").prependTo($("div"));
添加的内容的位置在前面
（1）before()
$("div").after($('<P>我是一个p</P>'));
（2）after()
$("div").before($('<P>我是另外一个p</P>'));
在某个元素的前面或者是后面，添加一个兄弟

3、删除节点
（1）html（）
$("div").html("");
（2）empty()
$("div").empty();

京东轮播图
<div class="slider">
  <ul>
    <li><a href="#"><img src="images/1.jpg" alt=""></a></li>
    <li><a href="#"><img src="images/2.jpg" alt=""></a></li>
    <li><a href="#"><img src="images/3.jpg" alt=""></a></li>
    <li><a href="#"><img src="images/4.jpg" alt=""></a></li>
    <li><a href="#"><img src="images/5.jpg" alt=""></a></li>
    <li><a href="#"><img src="images/6.jpg" alt=""></a></li>
    <li><a href="#"><img src="images/7.jpg" alt=""></a></li>
    <li><a href="#"><img src="images/8.jpg" alt=""></a></li>
  </ul>
  <!--箭头-->
  <div class="arrow">
    <span class="arrow-left">&lt;</span>
    <span class="arrow-right">&gt;</span>
  </div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
    var index = 0;
    点击右箭头
    $(".arrow-right").click(function () {
      index++;
      if (index == $(".slider li").length){
        index = 0;
      }
      $(".slider li").eq(index).fadeIn().siblings().fadeOut();
    });
    点击左箭头
    $(".arrow-left").click(function () {
      index--;
      if (index == -1){
        index = $(".slider li").length -1;
      }
     $(".slider li").eq(index).fadeIn().siblings().fadeOut();
    });
  });
</script>

弹幕效果
<div class="boxDom" id="boxDom">
  <div class="idDom" id="idDom">
    <div class="content">
      <p class="title">吐槽:</p>
      <input type="text" class="text" id="text"/>
      <button type="button" class="btn" id="btn">发射</button>
    </div>
  </div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
 
  $(function () {
    var colors = ["red","green","blue","black","pink"];
    $("#btn").click(function () {
     var number = parseInt(Math.random()*colors.length);
     var randomY = parseInt(Math.random()*400);

      $("<span></span>")//创建span
              .text($("#text").val())//设置内容
              .css("color",colors[number])//设置随机颜色
              .css("left","1200px")//设置left值
              .css("top",randomY)//设置Top值
              .animate({left:-200},5000,"linear",function () {
                  //到达终点后删除
                $(this).remove();//相等于empty()  自杀  自身删除
              })
              .appendTo($("#boxDom"));
      $("#text").val("");
    });

    $("#text").keyup(function (e) {
      // alert("嘿嘿");
      var number = parseInt(Math.random()*colors.length);
      var randomY = parseInt(Math.random()*400);
      
      $("<span></span>")//创建span
              .text($("#text").val())//设置内容
              .css("color",colors[number])//设置随机颜色
              .css("left","1200px")//设置left值
              .css("top",randomY)//设置Top值
              .animate({left:-200},5000,"linear",function () {
                //到达终点后删除
                $(this).remove();//相等于empty()  自杀  自身删除
              })
              .appendTo($("#boxDom"));
      $("#text").val("");
    });
  });
  </script>

十二、val()方法

用来设置和获取表单控件的值，比如：input textarea等
（1）设置：对象.val(“张三”);
（2）获取：对象.val();

    <script src="jquery-1.12.4.js"></script>
    <script>
            $("#txt").focus(function () {

                $(this).val("");
            });
            $("#txt").blur(function () {
                $(this).val("啤酒");
            });
        });
    </script>
<input type="button" value="设置">
<input type="button" value="获取">
<input type="text" value="啤酒" id="txt">

十三、html()和text()

（1）html（）就相当于innerHtml
（2）text() 就相当于innerText()

<input type="button" value="设置" id="btn">
<div></div>
<script src="jquery-1.12.4.js"></script>
<script>
    $(function () {
        $("#btn").click(function () {

            $("div").html("我是内容");
            $("div").html("<p>我是一个p</p>");

             $("div").text("我是内容");
             $("div").text("<p>我是一个p</p>");          
        });
    });
</script>

十四、width()和height()

（1）设置：对象.width(200);
（2）获取: 对象.width();
（3）获取网页可视区的宽度和高度：$(window).width()

<div></div>
<script src="jquery-1.12.4.js"></script>
<script>
    $(function () {
         console.log($("div").width());    直接获取的是数字
         console.log($("div").css("width"));      有px
         console.log($("div").css("width","400px"));
         $("div").width(500);
        
         //width
         console.log($("div").width());//300
         //width+padding
         console.log($("div").innerWidth());//340
         //width+padding +border
         console.log($("div").outerWidth());//380
         //width+padding+border+margin
         console.log($("div").outerWidth(true));//400

        获取页面可视区的高度
         console.log($(window).height());
         console.log($(window).width());

        $(window).resize(function () {
            console.log($(window).height());
            console.log($(window).width());
        });
    });
</script>

十五、scrollTop()和scrollLeft()

设置和获取滚动条的位置

（1）$(window).scrollTop();—获取页面被卷曲的高度
（2）$(window).scrollLeft();—获取页面被卷曲的宽度

<script src="jquery-1.12.4.js"></script>
<script>
    $(function () {
        $(window).scroll(function () {
            console.log($(window).scrollTop());
            console.log($(window).scrollLeft());
        });
    });
</script>

十六、jQuery事件

使用简单方式和bind方式注册的事件，只对原来的元素有效果，对新创建的元素是没有效果！！！

1、点击事件
（1）对象.click();

2、加载事件
（1）对象.load();

3、鼠标事件
（1）mouseover();
（2）mouseenter();
（3）mouseout();
（4）mouseleave();

4、焦点事件
（1）focus();
（2）blur();

5、键盘事件
（1）keyup();
（2）keydown();

6、滚动事件
（1）scroll();

7、bind事件
bind方式可以同时注册多个事件。但是不支持动态事件绑定
（1）第一个参数：事件类型
（2）第二个参数：回调方法

<script>
	$("p").bind("click mouseenter",function () {
           alert("bind方式");
         });
         $("p").bind({
             click:function () {               
                 console.log("点击");
             },
             mouseenter:function () {
                 console.log("鼠标事件");
             }       
      });
</script>

8、注册委托事件
注册委托事件------>能够解决新创建的元素也有事件，但是只能注册委托
第一参数：selector ,要绑定事件的元素
第二个参数：事件类型
第三个参数：fn 事件处理函数

<script>
	$("div").delegate("p","click",function () {
            alert("1111");
        });
</script>

9、on事件（推荐使用）

<script>
	$("div").on("click","input",function () {
        alert("嘿嘿");
    });
</script>

固定导航案例
  <script src="../jquery-1.12.4.js"></script>
  <script>
    $(function () {
      $(window).scroll(function () {
        判断滚出去的高度
        if ($(window).scrollTop() >= $(".top").height() ){
          $(".nav").addClass("fixed");
          $(".main").css("marginTop",$(".nav").height()+10);
        }else {
          $(".nav").removeClass("fixed");
          $(".main").css("marginTop",10);
        }
      });
    });
  </script>
<div class="top" id="topPart">
  <img src="images/top.png" alt=""/>
</div>
<div class="nav" id="navBar">
  <img src="images/nav.png" alt=""/>
</div>
<div class="main" id="mainPart">
  <img src="images/main.png" alt=""/>
</div>

小火箭回顶部案例
<div class="actGotop"><a href="javascript:;" title="Top"></a></div>
<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
    $(window).scroll(function () {
      当页面滚出去1000px的时候显示小火煎
      if ($(window).scrollTop() > 1000) {
        $(".actGotop").stop().fadeIn(1000);
      }else {
        $(".actGotop").stop().fadeOut(1000);
      }
    });
    $(".actGotop").click(function () {
      // $(window).scrollTop(0);//直接返回，视觉效果不好
      $("html,body").animate({scrollTop:0},300);
    });
  });
</script>

表格删除功能
<div class="wrap">
  <input type="button" value="清空内容" id="btn">
  <input type="button" value="添加" id="btnAdd">
  <table>
    <thead>
    <tr>
      <th>课程名称</th>
      <th>所属学院</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody id="j_tb">
    <tr>
      <!-- <td><input type="checkbox"/></td> -->
      <td>JavaScript</td>
      <td>前端与移动开发学院</td>
      <td><a href="javascrip:;" class="get">DELETE</a></td>
    </tr>
    <tr>
      <!-- <td><input type="checkbox"/></td> -->
      <td>css</td>
      <td>前端与移动开发学院</td>
      <td><a href="javascrip:;" class="get">DELETE</a></td>
    </tr>
    <tr>
      <!-- <td><input type="checkbox"/></td> -->
      <td>html</td>
      <td>前端与移动开发学院</td>
      <td><a href="javascrip:;" class="get">DELETE</a></td>
    </tr>
    <tr>
      <td>jQuery</td>
      <td>前端与移动开发学院</td>
      <td><a href="javascrip:;" class="get">DELETE</a></td>
    </tr>
    </tbody>
  </table>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
    清除内容
    $("#btn").on("click",function () {
      $("#j_tb").empty();
    });
    
    添加内容
    $("#btnAdd").on("click",function () {
      $(' <tr>\n' +
              '      <td>jQuery</td>\n' +
              '      <td>新增添加的</td>\n' +
              '      <td><a href="javascrip:;" class="get">DELETE</a></td>\n' +
              '    </tr>').appendTo($("#j_tb"));
    });
    
    注册委托事件
    $("#j_tb").on("click",".get",function () {
      $(this).parent().parent().remove();
    });
  });  
</script>