zoukankan html css js c++ java

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>

或者：

百度压缩版引用地址:

<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>

微软压缩版引用地址:

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.1.min.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访问次数，会延迟整个页面的交互就绪时间。

采用事件委托的优点:

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

适合采用事件委托技术的事件包括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{
                 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{
                 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{
                 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 {
       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>

查看全文

相关阅读:
关于lockkeyword
关于多层for循环迭代的效率优化问题
 Android 面试精华题目总结
 Linux基础回想（1）——Linux系统概述
 linux源代码编译安装OpenCV
校赛热身 Problem C. Sometimes Naive (状压dp)
校赛热身 Problem C. Sometimes Naive (状压dp)
校赛热身 Problem B. Matrix Fast Power
校赛热身 Problem B. Matrix Fast Power
集合的划分(递推）

原文地址：https://www.cnblogs.com/gyix/p/10779389.html