jquery

jquery

什么是jQuery?

 jquery是轻量级的JavaScript库,核心是javascript,兼容css和各种浏览器,核心理念是写得少做得多(write less do more)。

为什么要学习jQuery?

因为它有很多优势:容易上手,强大的选择器,节约开发时间,丰富的UI,完善的事件机制,Ajax的封装。

此外,补充jQuery的一些特性和方法:链式操作,回调函数,迭代器,延迟对象,队列。

带min与不带min两个版本的区别:

a.  jquery-1.11.3.js     ---  开发版:编写代码的时候可能会出现一些问题,去看源码的设计思路,让自己的问题得到解决,切记:只是参考,看看就够了,千万不要修改。
b.  jquery-1.11.3.min.js     ---  生产版:当我们的编码全部完成,测试通过,要上线,此时,换成该版本。

内容和功能全都是相同的,只是文件大小的问题,带min的是经过压缩以后的,去掉了所有的空格和换行,主要是减小占用的空间,形参进行了更改,通过工具进行的压缩。

jQuery版本

1.x.x     兼容性最好的
2.x.x     抛弃了IE9以下
3.x.x     浓缩的2.0的版本

jQuery属于说是企业的标准了
jquery的插件非常多,很多的动画都是依赖于jquery完成的
jquery库下载网站   ---  http://www.jq22.com  (免费的)

(注!jquery-2.0以上版本不再支持IE 6/7/8) 并不是最新的版本就最好的,而是根据您项目需求所适合的版本!)

引入jquery文件:

<script type="text/javascript" src="jquery-1.11.3.js"></script>

或者:

百度压缩版引用地址:

微软压缩版引用地址:

官网jquery压缩版引用地址:

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

jQuery 的核心函数是:   $  === jQuery

函数说明
jQuery() 主要用于获取HTML DOM元素并将其封装为jQuery对象

函数说明

jQuery():

jQuery()函数是jQuery库的最核心函数,jQuery的一切都是基于此函数的。该函数主要用于获取HTML DOM元素并将其封装为jQuery对象,以便于使用jQuery对象提供的其他属性和方法对DOM元素进行操作。

jQuery()函数的功能非常强大,它可以将各种类型的参数智能地封装为jQuery对象。

 

复制代码
var username = document.getElementsByClassName("username")[0];
console.log(username)   //输出的是一个DOM对象
username.style.backgroundColor = "#f00";
            
var $username = $(".username");
console.log($username)  //输出的是jquery对象,是类数组。
//不管你用什么方式获取过来的全都是类数组,jquery操作也是操作这个类数组
$username.css("color","#fff")
复制代码

jQuery对象与DOM对象的区别,联系

DOM对象:使用JavaScript的方法获取的对象就是DOM对象。

jQuery对象:使用jQuery的方法获取的对象就是jQuery对象。

jQuery对象其实就是DOM对象的包装集(包装了DOM对象的集合(伪数组))

区别

DOM对象与jQuery对象的方法不能混用。

联系

jQuery对象与DOM对象可以互相转换。

DOM  ——>  jQuery    $( domobj)

jQuery  ——>  DOM    $li [ 0 ]  或  $li.get( 0 )

复制代码
//jquery对象 ->  dom对象
var $username = $("#username");   //jquery对象
//var username = $username[0];   //jquery对象就是一个类数组,里面所放的每一个元素都是dom对象
//console.log(username)


//dom对象  ->  jquery对象
var username = document.getElementById("username");    //dom对象            
//var $username = $(username);     //直接把dom对象放到$()中进行包装即可
//console.log($username)
        
//console.log(username.value)
console.log($username.val())
            
//jQuery是会去尽量减少报错,不报错真的不一定是好事
//不报错你可能永远不知道错在啥地方
复制代码

 

 先推荐一个很实用的参考手册噢  --- jQuery1.11.3_20150618.CHM(我想一般你们都有吧),或者w3c……

 

多库共存

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.8.2.min.js"></script>
    <script src="jquery-1.11.1.js"></script>
    <script>
        jQuery(function () {
            //打印版本号。
            console.log($.fn.jquery);//1.11.1
            $.noConflict();//让1.11.1放弃$的使用权,这样1.8.2就会获得对$的使用权
            console.log($.fn.jquery);//1.8.2
            console.log(jQuery.fn.jquery);//1.11.1
        })
    </script>
</head>
<body>
</body>
</html>

 

 
    
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.8.2.min.js"></script>
    <script src="jquery-1.11.1.js"></script>
    <script>
        jQuery(function () {
            console.log($.fn.jquery);//1.11.1
            var MrLv = $.noConflict(true);//让1.11.1放弃两个符号的使用权,同时定义一个新的使用权
            console.log($.fn.jquery);//1.8.2
            console.log(jQuery.fn.jquery);//1.8.2
            console.log(MrLv.fn.jquery);//1.11.1
        })
    </script>
</head>
<body>
</body>
</html>

 

 

  

 事件委托-原生

在绑定节点事件处理程序时遇到的问题:

  • 每个 函数都是对象,都会占用内存;内存中的对象越多,性能就越差。
  • 其次,必须事先指定所有事件处理程 序而导致的 DOM访问次数,会延迟整个页面的交互就绪时间。

采用事件委托的优点:

  1. document 对象很快就可以访问,而且可以在页面生命周期的任何时点上为它添加事件处理程序 (无需等待 DOMContentLoaded 或 load 事件)。换句话说,只要可单击的元素呈现在页面上, 就可以立即具备适当的功能。
  2. 在页面中设置事件处理程序所需的时间更少。只添加一个事件处理程序所需的DOM引用更少, 所花的时间也更少。
  3. 整个页面占用的内存空间更少,能够提升整体性能。
  4. 绑定事件后,即使目标元素是以后再添加进来的也有效。

适合采用事件委托技术的事件包括click、mousedown、mouseup、keydown、keyup和keypress等。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>事件委托-原生</title>
    </head>
    <body>
        <ul>
            <li>0</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
         
        <script type="text/javascript">
             
//          普通的写法   绑定了六次
//          var lis = document.getElementsByTagName("li");
//          for(var i = 0;i<lis.length;i++){
//              lis[i].onclick = function(){
//                  console.log(this.innerHTML)
//              }
//          }
         
         
//          把自己要做的事情委托给父元素来做,事件只需要绑定一次就够了
            var ul = document.getElementsByTagName("ul")[0];
            ul.onclick = function(event){
                event = event || window.event;
                var target = event.target || event.srcElement;
//              console.log(target)
                console.log(target.innerHTML)
            }
             
        </script>
    </body>
</html>

 

 

 

jquery中的事件绑定 

一、用bind()方法来对匹配元素进行特定事件的绑定

在文档装载完成后,使用bind()方法来对匹配元素进行特定事件的绑定,bing() 方法的调用格式为:

bind(type[,data],fn);

3个参数,说明如下

a. type:blur、focus、load、resize、scroll、unload、click、 dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、 mouseleaye、change、select、submit、keydown、keypress、keyup和error等,当然也可以是自定义名 称。

b. data是可选参数:作为event.data属性值传递给事件对象的额外数据对象。

c. fn参数则是用来绑定的处理函数。

平时我们写像 click、mouseover 和 mouseout 这类事件,因为在程序中经常会使用到,jQuery 为此提供了一套简写方法,如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jquery中的事件绑定</title>
        <script src="jquery-1.11.3.min.js"></script>
        <style type="text/css">
            div{
                width: 200px;
                height: 200px;
                background-color: #f00;
                display: none;
            }
        </style>
    </head>
    <body>
        <button>事件绑定</button>
        <div></div>
        <script type="text/javascript">
//          $("button").click(function(){
//              if($("div").css("display") == "none"){
//                  $("div").show()
//              }else{
//                  $("div").hide()
//              }
//          })
             
            $("button").bind("click",function(){
                if($("div").css("display") == "none"){
                    $("div").show()
                }else{
                    $("div").hide()
                }
            })
        </script>
         
    </body>
</html>

 

 

 

二、移除之前的绑定事件

用$("#result").unbind("click")

如果你要移除所有的绑定事件,直接用 $("#result").unbind()

例题中用  $("button").unbind("mouseout")

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jquery中的事件绑定</title>
        <script src="jquery-1.11.3.min.js"></script>
        <style type="text/css">
            div{
                width: 200px;
                height: 200px;
                background-color: #f00;
                display: none;
            }
        </style>
    </head>
    <body>
        <button>事件绑定</button>
        <div></div>
        <script type="text/javascript">
//          鼠标移入btn是显示,
//          移出btn是隐藏
             
//          移入     mouseover
//          移出     mouseout
             
//          jquery 属于链式调用
//          $("button").mouseover(function(){
//              $("div").show()
//          }).mouseout(function(){
//              $("div").hide()
//          })
             
            $("button").bind("mouseover mouseout",function(){   //事件绑定是可以绑定多个事件的
                if($("div").css("display") == "none"){
                    $("div").show()
                }else{
                    $("div").hide()
                }
            })
             
             
//          事件的解绑
             
//          $("button").unbind()    ///如果不写就是解绑所有事件
            $("button").unbind("mouseout")   //写指定的事件就是解绑指定的事件
        </script>
         
    </body>
</html>

 

 

  自定义动画

属性对象

animate()方法的常规使用和之前介绍的3种常见动画的使用方法类似

animate(properties[,duration][,easing][,complete])

  animate()方法的第一个参数是一个必须参数,表示一个CSS属性和值的对象,动画将根据这组对象移动

  所有用于动画的属性必须是数字的,除非另有说明;这些属性如果不是数字的将不能使用基本的jQuery功能。例如,width、height或者left可以执行动画,但是background-color不能

  当然,除了样式属性,一些非样式的属性,如scrollTop、scrollLeft以及自定义属性,也可应用于动画。

可选参数

  animate(properties[,duration][,easing][,complete])方法中除了第一个属性对象是必需参数,其余参数都是可选参数。接下来,介绍animate()方法的可选参数

持续时间

  animate()方法的第二个参数持续时间,用一个字符串或者数字决定动画将运行多久。默认值为"normal",有三种预定速度的字符串"slow"、"normal"、"fast"分别表示600ms、400ms和200ms

  [注意]如果要自定义持续时间,需要设置为数字(如400),而不要设置为字符串'400',否则将不生效

    
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>自定义动画</title>
        <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
        <style type="text/css">
            div{
                width: 200px;
                height: 200px;
                background-color: #f00;
                position: relative;
                display: none;
            }
        </style>
    </head>
    <body>
         
         
        <div></div>
         
         
        <script type="text/javascript">
//          链式写法
//          $("div").show().animate({
//              "width" : "100px",
//              "height" : "100px",
//              "top" : "100px",
//              "left" : "100px"
//          },3000)
 
            $("div").show().animate({
                "width" : "50px",
                "height" : "50px"
            },3000).animate({
                "left" : "500px"
            },3000)
        </script>
    </body>
</html>

 

 

  jquery遍历-each

当然我们知道  通过标签获取元素,返回的是一个类数组。

console.log(index); -- 返回的是当遍历的索引

console.log(domElement) -- 输出的是 <li>0</li> 当前索引的值

console.log(domElement.innerHTML) 和 console.log($(domElement).html()) -- 返回当前索引的文本内容。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jquery遍历-each</title>
        <script src="jquery-1.11.3.min.js"></script>
    </head>
    <body>
        <ul>
            <li>0</li>
            <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>
        </ul>
         
        <script type="text/javascript">
//          var lis = document.getElementsByTagName("li");
//          for(var i = 0;i < lis.length;i++){
//              console.log(lis[i].innerHTML)
//          }
 
            var $lis = $("li");
             
            $lis.each(function(index,domElement){
                console.log(index);
                console.log(domElement)
                console.log(domElement.innerHTML)
                console.log($(domElement).html())
            })
        </script>
    </body>
</html>

 

 

  结果如下:

最后呐,做了一个手风琴效果

代码很简单,也就是练练手。将如上内容融汇贯通,实际操作一遍。

代码如下 :

    
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    * {padding: 0;margin: 0;}
    ul { list-style-type: none;}
     
    .parentWrap {
      width: 200px;
      text-align:center;
       
    }
     
    .menuGroup {
      border:1px solid #999;
      background-color:#e0ecff;
    }
     
    .groupTitle {
      display:block;
      height:20px;
      line-height:20px;
      font-size: 16px;
      border-bottom:1px solid #ccc;
      cursor:pointer;
    }
     
    .menuGroup > div {
      height: 200px;
      background-color:#fff;
      display:none;
    }
   
  </style>
   
  <script src="jquery-1.11.3.min.js"></script>
  <script>
      $(function () {
          //思路分析:
          //1. 给所有的span注册点击事件,让当前span的兄弟div显示出来
          $(".groupTitle").click(function () {
            //下一个兄弟:nextElementSibling
             
            //链式编程:在jQuery里面,方法可以一直调用下去。
            $(this).next().slideDown(200).parent().siblings().children("div").slideUp(200);
          });
      });
  </script>
</head>
<body>
<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>
</body>
</html>

 

 
posted @ 2019-04-27 17:12  文艺小青年啊  阅读(147)  评论(0编辑  收藏  举报