jquery

关于jQuery：

　　1、由美国人John Resig创建。

　　2、一个优秀简洁的JavaScript框架，其宗旨是——WRITE LESS,DO MORE!。

　　3、轻量级的js库，很小，兼容性好。兼容CSS3，兼容各种浏览器。

　　4、高效处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。

　　5、它的说明文档很全，有各种很详细的应用，各种成熟的插件可供选择。

jQuery对象：

　　jQuery对象是经过jQuery包装DOM后产生的。jQuery对象是jQuery独有的，一旦对象产生，就可以使用jQuery里面的方法：$("test").html();

1 $("#test").html()
2     #获取ID为test元素内的代码。
3     #html是jQuery内的代码
4     #获取 jQuery对象特有的标识为$
View Code

 jQuery的版本说明

　　官网下载

　　　　http://jquery.com/download/

选择器和筛选器

　　基本选择器

　　　　

$("*")  $("#id")   $(".class")  $("element")  $(".class,p,div")

　　层级选择器

　

$(".outer div")  $(".outer>div")   $(".outer+div")  $(".outer~div")

　　基本筛选器

$("li:first")  $("li:eq(2)")  $("li:even") $("li:gt(1)")

　　属性选择器

$('[id="div1"]')   $('["alex="sb"][id]')

　　表单选择器

 1 $("[type='text']")----->$(":text") 注意只适用于input标签 : $("input:checked") 　　示例代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <div>hello</div>
 9 <a href="">click</a>
10 <p id="p1" xxx = "sb">哈哈哈哈哈</p>
11 <p id="p2" xxx = "sb">哈哈哈哈哈1</p>
12 <div class="outer">outer
13     <div class="inner">inner
14         <p>孙子</p>
15     </div>
16     <p>儿子</p>
17 </div>
18 <div>alex</div>
19 <p>lqj</p>
20 <ul>
21     <li>1111</li>
22     <li>2222</li>
23     <li>3333</li>
24     <li>4444</li>
25     <li>5555</li>
26 </ul>
27 <input type="text">
28 <input type="checkbox">
29 <input type="submit">
30 <script src = "jquery-3.3.1.min.js"></script>
31 <script>
32     // $("div").css("color","red")
33     // jQuery("div").css("color","red")
34     //基本选择器
35     //$('*').css('color','red')
36     //层级选择器
37     // $(".outer p").css('color','red')
38     //后代选择器
39     // $(".outer>p").css('color','red')
40     //子代选择器
41     // $(".outer+p").css("color",'red')
42     //后面的兄弟选择器
43      //$(".outer~p").css("color",'red')
44     //基本筛选器
45     // $("li:first").css("color",'red')
46     //  $("li:last").css("color",'red')
47     //  $("li:eq(-1)").css("color",'red')
48      //$("li:odd").css("color",'red')
49     //$("li:gt(2)").css("color",'red')
50     //$("li:even").css("color",'red')
51     //属性选择器
52     //$("[alex = 'sb']").css('color','red')
53     //双重属性选择器
54     // $("[alex = 'sb'][id = 'p1']").css('color','red')
55     //表单选择器
56     //$("[type = 'text']").css('width',"200px")
57     //其他的写法
58     $(":text").css('width',"400px")
59 </script>
60 </body>
61 </html>
View Code

筛选器

　　过滤筛选器

$("li").eq(2)  $("li").first()  $("ul li").hasclass("test")

　　查找筛选器

 $("div").children(".test")     $("div").find(".test")  
                               
 $(".test").next()    $(".test").nextAll()    $(".test").nextUntil() 
                           
 $("div").prev()  $("div").prevAll()  $("div").prevUntil()   
                        
 $(".test").parent()  $(".test").parents()  $(".test").parentUntil() 

 $("div").siblings()

 示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>hello</div>
<a href="">click</a>
<p id="p1" xxx = "sb">哈哈哈哈哈</p>
<p id="p2" xxx = "sb">哈哈哈哈哈1</p>
<div class="outer">outer
    <div class="inner">inner
        <p>孙子</p>
    </div>
    <p>儿子</p>
     <p class="pp">儿子1</p>
    <p>儿子2</p>
    <p>儿子3</p>
</div>
<div>alex</div>
<p>lqj</p>
<ul>
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
    <li>5555</li>
</ul>
<input type="text">
<input type="checkbox">
<input type="submit">
<script src = "jquery-3.3.1.min.js"></script>
<script>
    //过滤筛选器，推荐使用
    //$("li").eq(2).css("color","red")
    // $("li").first(2).css("color","red")
   // $("li").last(2).css("color","red")

    //查找筛选器
    //  $("div").children(".inner").css("color","red")
    // $("div").find(".iner").css("color","red")
    //$(".inner").next().css("color","red")
    //$(".inner").nextAll().css("color","red")
    // $(".inner").nextUntil(".pp").css("color","red")
    //$("div").prev().css("color","red")
    //  $("div").prevAll().css("color","red")
    $("div").prevUntil(".inner").css("color","red")
</script>
</body>
</html>
View Code

 操作元素(属性，css，文档处理)

　　属性操作

（1）属性
$("").attr();
$("").removeAttr();
$("").prop();
$("").removeProp();
（2）CSS类
$("").addClass(class|fn)
$("").removeClass([class|fn])
（3）HTML代码/文本/值
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])
（4）css操作
$("").css("color","red")

　　　　实例代码

 

　　文档处理

(1)创建一个标签对象
    $("<p>")


(2)内部插入

    $("").append(content|fn)      ----->$("p").append("<b>Hello</b>");
    $("").appendTo(content)       ----->$("p").appendTo("div");
    $("").prepend(content|fn)     ----->$("p").prepend("<b>Hello</b>");
    $("").prependTo(content)      ----->$("p").prependTo("#foo");

(3)外部插入

    $("").after(content|fn)       ----->$("p").after("<b>Hello</b>");
    $("").before(content|fn)      ----->$("p").before("<b>Hello</b>");
    $("").insertAfter(content)    ----->$("p").insertAfter("#foo");
    $("").insertBefore(content)   ----->$("p").insertBefore("#foo");
(4)替换
    $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");

(5)删除

    $("").empty()
    $("").remove([expr])

(6)复制

    $("").clone([Even[,deepEven]])

　　　　示例代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <div class="c1">
 9     <p>PPPP</p>
10 </div>
11 <button>add</button>
12 <script src="jquery-3.3.1.min.js"></script>
13 <script>
14     $("button").click(function () {
15         // $(".c1").append("<h1>HELLO WORLD</h1>")
16         var $ele=$("<h1>");
17         $ele.html("hello world");
18         $ele.css("color","red");
19 //内部插入
20         // $(".c1").append($ele);
21         // $ele.appendTo(".c1")
22         //  $(".c1").prepend($ele);
23         // $ele.prependTo(".c1")
24 //外部插入
25         // $(".c1").after($ele)
26         // $ele.insertAfter(".c1")
27         // $(".c1").before($ele)
28         // $ele.insertBefore(".c1")
29 //替换
30         // $("p").replaceWith($ele)
31 
32 //删除与清空
33         //$(".c1").empty()
34         //  $(".c1").remove()
35 //clone
36         var $ele2=$(".c1").clone();
37         $(".c1").after($ele2 )
38     })
39 </script>
40 </body>
41 </html>
View Code

　　css操作

   $("").css(name|pro|[,val|fn])
   （1） 位置
        $("").offset([coordinates])
        $("").position()
        $("").scrollTop([val])
        $("").scrollLeft([val])
   （2） 尺寸
        $("").height([val|fn])
        $("").width([val|fn])
        $("").innerHeight()
        $("").innerWidth()
        $("").outerHeight([soptions])
        $("").outerWidth([options])

　　事件

（1）页面载入
    ready(fn)  //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
    $(document).ready(function(){})
　　简写： $(function(){})

（2）事件处理
    $("").on(eve,[selector],[data],fn)  // 在选择元素上绑定一个或多个事件的事件处理函数。
    //  .on的selector参数是筛选出调用.on方法的dom元素的指定子元素，如：
    //  $('ul').on('click', 'li', function(){console.log('click');})就是筛选出ul下的li给其绑定
    //  click事件；
　　//给ul绑定事件委托给li临时绑定，这是一种临时绑定
    [selector]参数的好处:
        好处在于.on方法为动态添加的元素也能绑上指定事件；如：

        //$('ul li').on('click', function(){console.log('click');})的绑定方式和
        //$('ul li').bind('click', function(){console.log('click');})一样；我通过js给ul添加了一个
        //li：$('ul').append('<li>js new li<li>')；这个新加的li是不会被绑上click事件的

        //但是用$('ul').on('click', 'li', function(){console.log('click');}方式绑定，然后动态添加
        //li:$('ul').append('<li>js new li<li>');这个新生成的li被绑上了click事件
    
    [data]参数的调用:
             function myHandler(event) {
                alert(event.data.foo);
                }
             $("li").on("click", {foo: "bar"}, myHandler)

　　　　实例代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <ul>
 9     <li>1111</li>
10     <li>2222</li>
11     <li>3333</li>
12     <li>4444</li>
13 </ul>
14 <button>add</button>
15 <script src="jquery-3.3.1.min.js"></script>
16 <script>
17     // $("ul li").click(function () {
18     //     alert(666)
19     // })
20     //  $("ul li").bind("click",function () {
21     //     alert(666)
22     // })
23     $("ul").on("click","li",function () {
24         alert(9999)
25     })
26     $("button").click(function () {
27         var $ele=$("<li>")
28         var len=$("ul li").length;
29         $ele.html((len+1)*1111)
30         $("ul").append($ele)
31     })
32 </script>
33 </body>
34 </html>
View Code

　　动画效果

//显示
show()
//隐藏
hide()
//切换
toggle()
//滑动
slideUp()
slideDown()
slideToggle()
//淡入淡出
fadein()
fadeout()
fadetoggle()
fadeto()
//回调函数
$("button").click(function(){
       $("p").hide(1000,function(){
           alert($(this).html())
       })

 　　扩展与插件

　　　　核心方法

$.extend(object)      //为JQuery 添加一个静态方法。
$.fn.extend(object)   //为JQuery实例添加一个方法。

　　　　示例代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <script src="jquery-3.3.1.min.js"></script>
 6     <title>Title</title>
 7 </head>
 8 <body>
 9 <p>1</p>
10 <p>2</p>
11 <p>3</p>
12 <p>4</p>
13 <script>
14     // $.extend({
15     //     Myprint:function () {
16     //         console.log("hello")
17     //     }
18     // })
19     // $.Myprint()
20     $.fn.extend({
21         GetText:function () {
22             // for (var i=0;i<this.length;i++)
23             // {
24             //     console.log(this[i].innerHTML)
25             // }
26             $.each($(this),function (x,y) {
27                 console.log(y.innerHTML)
28             })
29 
30         }
31     })
32     $("p").GetText()
33 </script>
34 
35 </body>
36 </html>
View Code

　　　　定义作用域

定义私有作用域，插件不受外界的 干扰。

目的是：外部代码不能直接访问插件内部的代码，插件内部的代码不污染全局的变量，在一定程度上解耦插件对运行环境的依赖。

 项目实战（京东轮播图）

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <script src="jquery-3.3.1.min.js"></script>
  6     <title>Title</title>
  7 
  8     <style>
  9         .outer{
 10             width: 790px;
 11             height: 340px;
 12             margin: 80px auto;
 13             position: relative;
 14         }
 15         .img li{
 16             position: absolute;
 17             list-style: none;
 18             top: 0;
 19             left: 0;
 20         }
 21         .num{
 22             position: absolute;
 23             bottom: 20px;
 24             left: 200px;
 25             /*background-color: #dec7f4;*/
 26             list-style: none;
 27         }
 28         .num li{
 29             display: inline-block;
 30             width: 20px;
 31             height: 20px;
 32             background-color: white;
 33             border-radius: 50%;
 34             text-align: center;
 35             line-height: 18px;
 36             margin-left: 4px;
 37         }
 38         .btn{
 39             position: absolute;
 40             top:50%;
 41             width: 30px;
 42             height: 60px;
 43             background-color: lightgrey;
 44             color: white;
 45 
 46             text-align: center;
 47             line-height: 60px;
 48             font-size: 30px;
 49             opacity: 0.3;
 50             margin-top: -30px;
 51             display: none;
 52         }
 53         .left{
 54             left: 0;
 55         }
 56         .right{
 57             right: 0;
 58         }
 59         .outer:hover .btn{
 60             display: block;
 61         }
 62         .num  .active{
 63             background-color: red;
 64         }
 65     </style>
 66 </head>
 67 <body>
 68 <div class="outer">
 69     <ul class="img">
 70         <li><a href=""><img src="1.jpg" alt=""></a></li>
 71         <li><a href=""><img src="1.jpg" alt=""></a></li>
 72         <li><a href=""><img src="1.jpg" alt=""></a></li>
 73         <li><a href=""><img src="1.jpg" alt=""></a></li>
 74         <li><a href=""><img src="1.jpg" alt=""></a></li>
 75         <li><a href=""><img src="1.jpg" alt=""></a></li>
 76     </ul>
 77     <ul class="num">
 78         <!--<li class="active"></li>-->
 79         <!--<li></li>-->
 80         <!--<li></li>-->
 81         <!--<li></li>-->
 82         <!--<li></li>-->
 83         <!--<li></li>-->
 84         <!--用JS创建-->
 85     </ul>
 86     <div class="left btn"> < </div>
 87     <div class="right btn"> > </div>
 88 <script>
 89     //通过jQuery自动创建按钮
 90     var i = 0;
 91     var img_num=$(".img li").length;
 92     for(var j=0;j<img_num;j++){
 93         $(".num").append("<li></li>")
 94     }
 95     $(".num li").eq(0).addClass("active")
 96     //手动轮播
 97     $(".num li").mouseover(function () {
 98         i = $(this).index();
 99         $(this).addClass("active").siblings().removeClass("active")
100         $(".img li").eq(index).stop().fadeIn().siblings().stop().fadeOut()
101 
102     })
103     //自动轮播
104     var c = setInterval(Go_R,1500);
105 
106     function Go_R() {
107         if(i==img_num-1)
108         {
109             i=-1
110         }
111         i++;
112         $(".num li").eq(i).addClass("active").siblings().removeClass("active")
113         $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000)
114     }
115     function Go_L() {
116         if(i==0)
117         {
118             i=img_num
119         }
120         i--;
121         $(".num li").eq(i).addClass("active").siblings().removeClass("active")
122         $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000)
123     }
124     //绑定hover
125     $(".outer").hover(function () {
126         clearInterval(c)
127     },function () {
128         setInterval(Go_R,1500)
129     })
130     //button加定播
131     $(".right").click(Go_R)
132     $(".left").click(Go_L)
133 </script>
134 </div>
135 </body>
136 </html>
View Code

 

 

 

 

　　

posted @ 2018-10-11 16:33  qijunL  阅读(173)  评论(0)    收藏  举报