首页 > 代码库 > jQuery

jQuery

2024-09-04 22:54:14   220人阅读

一 jQuery是什么？ 

          1、 jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。

          2、jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!

          3、它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器

               （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。

          4、jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现

                 动画效果，并且方便地为网站提供AJAX交互。非常好用

          <5>jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件

                可供选择。

通俗讲，就是封装了JavaScript，使写JavaScript代码更加简洁，高效，解决了兼容问题。变成了非常好用的调用接口。但是使用之前一定要先加载jQuery的模块代码！

二 什么是jQuery对象？

jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();而且约定俗成的，在其前面加上$符号

var $variable = jQuery 对象 //这个是jQuery的对象声明
var variable = DOM 对象  //这个是DOM对象的声明

三 寻找元素(选择器和筛选器)

1、选择器，就是寻找某个元素

 

1.1 基本选择器:跟CSS样式差不多很好学，注意加上双引号

$("*") : 就是选择到所有的元素呗，一般是全体元素设置公共属性设置

$("#id") : 根据id找到某一标签，id是唯一的，所以找到的也是唯一的

$(".class") : 根据class属性找到相应的标签

$(".class,p,div") : 多内容查找，是或的关系

1.2 层级选择器：层层选择的意思，这层选择还要下一层选择，跟北影的复试差不多

$(".outer div")  .outer的子孙后代中的div

$(".outer>div")  .outer子代的儿子代的div

$(".outer+div") .outer紧随的兄弟div（后面一个）

$(".outer~div")  .outer后面的所有的div兄弟

1.3 属性选择器 ：根据某些属性找到某些标签

$(‘[id="div1"]‘) ：id不建议这么写

$(‘["zhiwei"="qunzhu"]‘) :一般都是自定义的属性才会这么查找

1.4表单选择器：

 

$(":input") 所有 <input> 元素
:text $(":text") 所有 type="text" 的 <input> 元素
:password $(":password") 所有 type="password" 的 <input> 元素
:radio $(":radio") 所有 type="radio" 的 <input> 元素
:checkbox $(":checkbox") 所有 type="checkbox" 的 <input> 元素
:submit $(":submit") 所有 type="submit" 的 <input> 元素
:reset $(":reset") 所有 type="reset" 的 <input> 元素
:button $(":button") 所有 type="button" 的 <input> 元素
:image $(":image") 所有 type="image" 的 <input> 元素
:file $(":file") 所有 type="file" 的 <input> 元素

 

2、筛选器，就是找到之后再做筛选

2.1 过滤筛选器 

$("li").eq(2) : 找到一堆li，然后取第三个，因为是从0开始的

$("li").first() : 找到一堆li,然后取第一个，也就是.eq(0)

$("li").last() : 找到一堆li,然后取最后一个

$("ul li").hasclass("test") 找到一堆li，然后看谁的class里面有test

2.2 查找筛选器

$("div").children(".test") : 找到所有儿子代中class带有test的
$("div").find(".test")   ： 找到所有子孙中class带test的                             
$(".test").next()    紧随的兄弟（后面一个）
$(".test").nextAll()    紧跟的所有兄弟们（后面的所有）
$(".test").nextUntil()  紧跟的兄弟直到。。。
                           
$("div").prev()   ： 前面的。。。
$("div").prevAll()  ：前面的
$("div").prevUntil()   ：前。。。
                        
$(".test").parent()  ：.test的父对象
$(".test").parents()  ：.test的父亲，爷爷。。。直到标签的尽头
$(".test").parentUntil() ：.test的父亲，爷爷。。。直到某个条件


$("div").siblings() ： div的兄弟姐妹们

 

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

4.1 属性操作

-------------------------属性----------

$("").attr(); 
$("").removeAttr();

$("").prop();
$("").removeProp();
//对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
//对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
//像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此
//需要使用prop方法去操作才能获得正确的结果。
--------------------------CSS类

$("").addClass(class|fn)  ：给class属性的加个值
$("").removeClass([class|fn])：删除class属性的某个值


--------------------------HTML代码/文本/值
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])
---------------------------
$("").css("color","red")

 4.2 文档处理：增删改复制标签

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


//内部插入

    $("").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");

//外部插入

    $("").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");

//替换
    $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");

//删除

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

//复制

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

4.3 单独说说CSS样式操作
CSS
        $("").css(name|pro|[,val|fn])
    位置
        $("").offset([coordinates])
        $("").position()
        $("").scrollTop([val])
        $("").scrollLeft([val])
    尺寸
        $("").height([val|fn])
        $("").width([val|fn])
        $("").innerHeight()
        $("").innerWidth()
        $("").outerHeight([soptions])
        $("").outerWidth([options])

五 事件

1、页面载入

$(document).ready(function(){}) -----------> $(function(){})

 两个是等效的，后面的是缩写

2、事件处理

$("").on(eve,[selector],[data],fn)  // 在选择元素上绑定一个或多个事件的事件处理函数。
 好处在于.on方法为动态添加的元素也能绑上指定事件；新增加的标签也会有相应的方法哟、

其他常用的方法比如onMouseover,onClick....在jQuery之需要去掉on就可以很方便的使用了

3、一些动画效果：括号里面一般都是ms，表示完成需要多长时间

1、显示和隐藏

$("p").hide(1000); 隐藏
$("p").show(1000); 显示
$("p").toggle(1000); 点一下隐藏再点一下显示，切换的作用，相当于开关
2、滑动
$("#content").slideDown(1000);向下滑动
$("#content").slideUp(1000);向上滑动
$("#content").slideToggle(1000);滑动切换
3、淡入淡出
 $("#id1").fadeIn(1000);
$("#id1").fadeToggle(1000);
$("#id1").fadeIn(1000);

$("#id1").fadeTo(1000,0.4);淡到指定的透明度

4、回调函数

函数完成后调用某个指定的函数
       $("p").hide(1000,function(){
           alert($(this).html())
       })

 

七 扩展方法 (插件机制)：也就是自定义jQuery方法

$.extend(object)      //为JQuery 添加一个静态方法。
$.fn.extend(object)   //为JQuery实例添加一个方法。
    jQuery.extend({
          min: function(a, b) { return a < b ? a : b; },
          max: function(a, b) { return a > b ? a : b; }
        });
    console.log($.min(3,4));

//-----------------------------------------------------------------------$.fn.extend({
    "print":function(){
        for (var i=0;i<this.length;i++){
            console.log($(this)[i].innerHTML)
        }

    }
});

八 jQuery的实例应用

1、jQuery轮播图：请先找五张大小一致的图片命名为1.jpg .....
技术分享
技术分享 
  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6 </head>
  7 <style>
  8     * {
  9         margin: 0;
 10         padding: 0;
 11     }
 12 
 13     .outer {
 14         width: 670px;
 15         height: 360px;
 16         margin: 100px auto;
 17         position: relative;
 18         overflow: hidden;
 19     }
 20 
 21     ul, li {
 22         list-style: none;
 23         display: inline-block;
 24         float: left;
 25     }
 26 
 27     .btn {
 28         /*position: relative;*/
 29         height: 50px;
 30         width: 39px;
 31         
 32         top: 150px;
 33         cursor: pointer;
 34     }
 35 
 36     .left-btn {
 37         position: absolute;
 38         background: url("left-arrow-small.png");
 39         left: 0px;
 40 
 41     }
 42     .right-btn{
 43         position: absolute;
 44         background: url("right-arrow-small.png");
 45         right: 0px;
 46 
 47 
 48     }
 49     .bottom{
 50         position: absolute;
 51         background-color: hsla(0,0%,100%,.3);
 52         bottom: 20px;
 53         left: 260px;
 54         height: 20px;
 55         width: 180px;
 56         /*border: 1px solid red ;*/
 57         border-radius: 12px;
 58         line-height: 20px;
 59         padding-top: 4px;
 60     }
 61     .bottom li{
 62         display: inline-block;
 63         margin-right: 12px;
 64         margin-left: 12px;
 65         margin-top: 3px;
 66         width: 12px;
 67         height: 12px;
 68         border-radius: 100%;
 69         background-color: white;
 70         text-align: center;
 71     }
 72     .bottom ul li.current-point{
 73         background-color: red;
 74     }
 75     .hide{
 76         display: none;
 77     }
 78 
 79 
 80 </style>
 81 <script src="jquery-3.1.1.js"></script>
 82 <script>
 83     $(function () {
 84 
 85     })
 86 </script>
 87 <body>
 88 <div class="outer">
 89     <ul class="imgs">
 90         <li class="img current"><a href=""><img src="1.jpg" alt="" ></a></li>
 91         <li class="img"><a href="" ><img src="2.jpg" alt="" ></a></li>
 92         <li class="img"><a href="" ><img src="3.jpg" alt=""></a></li>
 93         <li class="img"><a href="" ><img src="4.jpg" alt=""></a></li>
 94         <li class="img"><a href="" ><img src="5.jpg" alt=""></a></li>
 95     </ul>
 96     <div class="left-btn btn hide"></div>
 97     <div class="right-btn btn hide"></div>
 98 
 99     <div class="bottom hide">
100         <ul>
101             <li class="bottom-slider current-point" id="0"></li>
102             <li class="bottom-slider" id="1"></li>
103             <li class="bottom-slider" id="2"></li>
104             <li class="bottom-slider" id="3"></li>
105             <li class="bottom-slider" id="4"></li>
106         </ul>
107     </div>
108 </div>
109 <script>
110     //定义计时器
111     var index = 0
112     var timer = setInterval(run,2000)
113 
114     function run() {
115         index++;
116         var $imgs = $(".outer ul.imgs li")
117 //        console.log(index)
118         if (index >= $imgs.length) {
119             index=0;
120         }
121 
122         changeimg(index)
123     }
124 
125     //定义切换至第index张图片的函数
126     function changeimg(index) {
127 //        console.log(index)
128         $(".outer ul li.current").fadeOut(1000).removeClass("current")
129         $(".bottom ul li.current-point").removeClass("current-point")
130         $(".bottom ul li.bottom-slider").eq(index).addClass("current-point")
131         $(".outer ul.imgs li").eq(index).fadeIn(500).addClass("current")
132 
133 //        console.log($(".outer ul.imgs li").eq(index))
134     }
135 
136     //当鼠标移至outer区域，停止轮播
137     $(".outer").mouseover(function () {
138         clearInterval(timer);
139         $(".left-btn,.right-btn,.bottom").removeClass("hide")
140 
141     })
142 
143     //当鼠标移除outer区域，继续进行轮播
144     $(".outer").mouseout(function () {
145         timer = setInterval(run,3000)
146         $(".left-btn,.right-btn,.bottom").addClass("hide")
147     })
148 
149     //当鼠标点击向左的箭头,向前切换
150     $(".left-btn").click(function () {
151         if (index == 0) {
152             index = $imgs = $(".outer ul.imgs li").length-1
153         }else {
154             index--
155         }
156 
157         changeimg(index)
158     })
159     //当鼠标点击向右的箭头,向后切换
160     $(".right-btn").click(function () {
161         if (index == ($(".outer ul.imgs li").length-1)) {
162             index = 0
163         }else {
164             index++
165         }
166 
167         changeimg(index)
168     })
169 
170     //bottom切换
171     var $num = $(".bottom ul li")
172 //    console.log($num.length)
173 //    for (var i=0;i< $num.length;i++){
174 //        console.log($num[i])
175 //        console.log($num[i].id)
176         $num.click(function () {
177             console.log(this.id)
178             changeimg(this.id)
179         })
180 
181 //    }
182   //  for (var )
183 </script>
184 
185 </body>
186 </html>
jQuery之轮播图

 2、





jQuery


联系
我们