JQuery基础

学习jQuery的时候，很快过了一遍，发现好多知识点不清晰。看来还是要写出来加深印象，平时多练习！

jQuery是一个Javascript函数库，轻量级，“写得少，做的多！”，它有以下功能：

• HTML元素选取
• HTML元素操作
• CSS操作
• HTML事件函数
• JavaScript特效和动画
• HTML DOM遍历和修改
• AJAX
• Utilities（实用工具）

很多大公司都在使用jQuery:Google,Microsoft,IBM等。jQuery兼容所有主流浏览器，包括IE6（不失为解决兼容性的一种方法）。

注意：

jQuery 2以上版本不支持IE6,7,8浏览器；

    <!-- [if lt IE 9] -->
        <!-- ie版本小于9，引入jquery1.9.0版本 -->
        <script type="text/javascript" src="jquery-1.9.0.js"></script>
    <!-- [end if] -->
    <!-- [if gte IE 9] -->
        <!-- ie版本大于等于9，引入jquery2.0.0版本 -->
        <script type="text/javascript" src="jquery-2.0.0.js"></script>
    <!-- [endif] -->

　　(lt(<):less than; gt(>):great than; gte(>=):great than equal; ne(不等于):not equal)

第一部分：安装：

从 jquery.com 中下载，然后用script标签引入即可。

jQuery有两个版本：

• production version:用于生产、实际的网络，代码已被精简和压缩；
• development version：用于开发测试，可阅读源码。

两种方式引入jQuery文件：

下载：

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

不下载，通过CDN（内容分发网络）引用它。百度、新浪、谷歌和微软的服务器都存有 jQuery。

示例百度CDN:

            1
            <
            script 
            src
            ="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"
            ></
            script
            >
        

注意：

1.国内站点不推荐Google CDN,访问不稳定。

2.CDN:Content Delivery Netword，内容分发网络。

基本思路：尽可能的避免互联网上有可能影响网络传输速率和稳定性的因素。使得用户可以就近取得所需内容，提高网站访问速度。

使用大公司CDN好处：

• 许多用户在访问其它站点时，已经从百度、新浪、谷歌和微软加载过jQuery。当用户访问我的站点时，会从缓存中加载jQuery，这样可以有效减少加载时间！
• 大多数CDN都可以确保用户请求文件时，会就近服务器进行响应，从而提高加载速率。

第二部分：jQuery语法：

1.jQuery语法是通过选取HTML元素，然后对选取的元素进行某些操作。

基础语法：$(selector).action()

• 美元符号$定义jQuery
• 选择器（selector）:“查询”和“查找”HTML元素
• action()：对元素进行操作

实例（结尾处有分号）：

// 隐藏当前元素
$(this).hide();
// 隐藏所有<p>元素
$(‘p‘).hide();
// 隐藏所有class="test"的<p>元素
$(‘p.test‘).hide();
// 隐藏所有id=test的元素
$(‘#test‘).hide();

2.文档就绪事件：

$(document).ready(function(){
    //开始书写jQuery代码
})；

　这是为了防止文档在加载完成前执行jQuery代码，即在DOM加载完成后才可以对DOM进行操作。

注意：简写：

$(function(){
    //开始书写jQuery代码
};

第三部分：jQuery选择器：

1. 元素选择器：$("p")
2. id选择器：$("#test")
3. 类选择器：$(".test")
4. $("*")：选择所有元素
5. $(this)：选取当前html元素
6. $("p.test")：选取class为test的<p>元素
7. $("p:first")：选取第一个<p>元素
8. $("ul li:first")：选取第一个<ul>元素中的第一个<li>元素
9. $("ul li:first-child")：选取每个<ul>元素下的第一个<li>元素
10. $("[href]")：选取所有带有href的元素
11. $("a[target=‘_blank‘]")：选取所有taget=_blank的<a>元素
12. $("a[target!=‘_blank‘]")：选取所有target不等于_blank的<a>的元素
13. $(":button")：选取所有type=button的button和input元素
14. $("tr :even")：选取所有偶数位置的<tr>元素
15. $("tr :odd")：选取所有奇数位置的<tr>元素

第四部分：jQuery事件：

1.事件：页面对不同访问者作出的响应。事件处理程序：当HTML中发生某些事件调用的方法。常见DOM事件：

• 鼠标事件：click（单击元素）,dbclick（双击元素）,mouseenter(鼠标指针移入元素),mouseleave（鼠标指针移出元素）事件；
• 键盘事件：keypress（键被按下）,keydown（键按下的过程）,keyup（键松开）,事件；ps:keypress不会触发所有的键（如alt,ctrl,esc,shift）,请使用keydown()方法检测
• 表单事件：submit（提交表单时）,change（元素值（适用于表单字段）发生改变时）,focus（元素获得焦点）,blur（元素失去焦点）事件；
• 文档/窗口事件：load（元素已加载触发，在jQuery1.8中废除。ajax中也有load()方法）,resize（调整浏览器窗口大小时触发）,scroll（滚动指定的元素）,unload（jQuery1.8中废弃）事件。

另：

hover()：模拟光标悬停事件。当鼠标指针移动到元素上时，会触发第一个函数（mouseenter）；当鼠标指针移出这个元素时，会触发第二个函数（mouseleave）。

            1         $("#test").hover(
2function(){
3//鼠标指针移入某元素4            },
5function(){
6//鼠标指针移出该元素7            }
8         );

第五部分：jQuery效果

1.隐藏和显示：

$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);

可选的speed规定隐藏或显示的速度，取值可以为"slow","fast"或毫秒；

可选的callback是隐藏或显示后执行的函数名称。

　　toggle可以切换show和hide状态。

2.淡入淡出：

$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);

　　fadeIn()：隐藏的元素淡入；fadeOut()：显示的元素淡出；fadeToggle()：切换fadeIn()和fadeOut()状态；fadeTo()：渐变为不透明度（opacity值在0~1之间）。

　　speed,callback参数含义与上述“显示与隐藏”一致。

3.滑动：

$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);

　　slideDown()：对隐藏的元素向下滑动；slideUp()：对显示的元素向上滑动收起；slideToggle()：切换两种状态改变。

4.动画：jQuery animate()方法用于创建自定义动画。语法：

$(selector).animate({params},speed,callback);

params：必选参数，形成动画的css属性；

　　speed：可选参数；

　　callback：可选参数。

ps:params支持多个属性，中间用","隔开，同时属性值（不加引号时）用驼峰标记法：如：margin-left改为marginLeft；属性值加引号按照css写法。

例如：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>hello</title>
    <script type="text/javascript" src="jquery-3.2.1.js"></script>
</head>
<body>
    <!-- //margin-left,color,font-size -->
    <div class="test" style="border:1px solid orange;width: 200px;height: 200px;">hello jQuery</div>
    <button>click me</button>

    <script type="text/javascript">
        $(document).ready(function(){
            $(‘button‘).click(function(){
                $(‘.test‘).animate({‘margin-left‘:‘10px‘,color:‘blue‘,fontSize : ‘30px‘});
            });
        });
    </script>
</body>
</html>

　　ps1：color属性值10px要添加引号，如‘10px‘；

　　ps2：上述代码中color属性设置无效，因为色彩动画不包括在核心jQuery库中。如需使用：需从 jquery.com 下载 颜色动画 插件。

默认：jQuery animate()采用队列来操作效果。队列：先进先出。

5.停止动画：

stop()方法用于停止动画效果，适用于所有jQuery效果函数，包括滑动，淡入淡出，自定义动画。

$(selector).stop(stopAll,goToEnd);

　　可选的stopAll：是否清除动画队列。默认false：仅停止当前活动动画，允许插入的动画向后执行；

　　可选的goToEnd：是否立即完成当前动画。默认false。

　　因而，默认的stop()会清除当前元素上的动画。（不带参数）

6.jQuery链(chaining)

链：顾名思义，锁链，即一环套一环。

jQuery中将动作/方法链接在一起，因此，在相同元素上，我们可以在一条语句上运行多个jQuery方法。

如：

$(‘p‘).css(‘font-size‘:‘10px‘).show().hide();

第六部分：jQuery HTML

1.获取内容和属性

--　　获取内容：

text()：设置或获取所选元素的文本内容

html()：设置或获取所选元素的内容(包括HTML标记)

val()：设置或获取表单字段的值

--　　获取属性：

attr()：设置或获取属性值

　　ps1：以上函数不传入参数时是获取；传入参数时是设置。

　　ps2：以上函数均有最后一个参数设置为回调函数。回调函数有两个值：当前选中元素下标，旧值。

2.添加元素

• append()：在被选元素的末尾插入内容
• preappend()：在被选元素的开头插入内容
• after()：在被选元素之后插入内容
• before()：在被选元素之前插入内容

ps：append/preappend：选择元素内部嵌入；before/after：选择元素外部追加。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>hello</title>
    <script type="text/javascript" src="jquery-3.2.1.js"></script>
</head>
<body>
    <!-- //margin-left,color,font-size -->
    <div class="test" style="border:1px solid orange;width: 200px;height: 200px;">hello jQuery</div>
    <button>click me</button>

    <script type="text/javascript">
        // $(document).ready(function(){
        //     $(‘button‘).click(function(){
        //         $(‘.test‘).animate({‘margin-left‘:‘10px‘,color:‘blue‘,fontSize : ‘30px‘});
        //     });
        // });

        $(‘.test‘).append(‘<span>hello tomorrow</span>‘);
        $(‘.test‘).after(‘<span>hello yesterday</span>‘);
    </script>
</body>
</html>

未追加前效果：

追加后效果：

插入后：hello tomorrow是使用append()：插入到div里面了，并与div里面的元素内容相联合；而hello yesterday是使用after()：插入待div外面，即div元素的后面。

3.jQuery 删除元素：

remove()：删除被选元素及子元素。ps：remove()可接受一个参数，对被删元素进行过滤。参数是jQuery选择器的语法。例如:$(‘p‘).remove(‘.test1‘);

empty()：从被选元素中删除子元素（被选元素没有被删除，相当于留了一个外壳）

4.获取/设置css类:

addClass()：向被选元素中添加一个或多个类；

removeClass()：向被选元素中删除一个或多个类；

toggleClass()：切换addClass()和removeClass()；

css()：设置或获取css属性。（有参数设置值；无参数获取值）；css有参数：css("propertyname":"value")，建议属性名和属性值都加上引号；如果属性名不加引号，要使用驼峰标记法：如margin-left变为marginLeft。

5.jQuery尺寸

• width()/height()：设置或获取当前元素的宽度/高度(不包括内边距，边框，外边距)
• innerWidth()/ innerHeight()：设置或获取当前元素的宽度/高度(包括内边距)
• outerWidth()/ outerHeight()：设置或获取宽度/高度(包括内边距和边框)；如果设置参数为true，则包括内边距，边框，外边距

第七部分：jQuery遍历

因为DOM其实就是树状结构，因此相关算法中树的概念可以很容易的引申过来。

1.遍历--祖先（父元素以上都是祖先元素）：

• parent()：返回被选元素的直接父元素
• parents()：返回被选元素的所有祖先元素，它会一直遍历到文档根元素（<html>）
• parentsUntil()：返回介于两个指定元素间的所有祖先元素。如：$(‘span‘).parentsUntil(‘div‘)：代表span与div之间所有的祖先元素。

2.遍历--后代（子元素一下都是后代元素）：

• children()：返回被选元素的直接子元素
• find()：返回被选元素的所有子元素（一直遍历到最后一个子元素）

3.遍历--同胞（siblings；兄弟元素，具有相同的父元素）

• siblings()：返回被选元素的所有同胞（兄弟）元素；可选参数可以用来进行过滤：$(‘h2‘).siblings(‘p‘)：返回与h2具有相同父元素的p元素
• next()：返回被选元素的下一个同胞元素（只返回一个元素）
• nextAll()：返回被选元素后面的同胞元素
• nextUntil()：介于两个参数之间的同胞元素
• prev()；prevAll()；prevUntil()：与上述类似，只不过遍历方向是向上走。

4.遍历--过滤

• first()：返回被选元素的第一个元素
• last()：返回被选元素的最后一个元素
• eq()：返回被选元素中带有指定索引号的元素；索引号从0开始；如：$(‘p‘).eq(1)：返回第二个<p>元素
• filter()：如：$(‘p‘).filter(‘.test‘)：返回带有class="test"的<p>元素
• not()：返回不符合标准的所有元素，与filter()执行结果相反。

第八部分：jQuery AJAX

了解AJAX： Ajax之路。

其实jQuery Ajax就是将ajax实现代码封装，同时兼顾了不同浏览器的Ajax实现。

1.jQuery load()：从服务器加载数据，并将返回的数据放入被选元素中。

$(selector).load(url,data,callback);

• 　　url：必须，希望加载的URL；ps：可以将url选择器添加到url中；
• 　　data：可选参数，与请求一起发送的字符串键值对集合；
• 　　callback：可选，load()完成后执行的回调函数；可设置的参数：

　　responseTxt：包含调用成功的结果内容；

statusTxt：包含调用的状态；"success"或"error"

xhr：XMLHttpResponse对象

2.get()与post()方法

$.get()：

$.get(url,callback);

　　url：必选；callback：可选；callback第一个参数存放请求页面的内容，第二个参数存放请求的状态。

　　如：

$("button").click(function(){
  $.get("demo_test.php",function(data,status){
    alert("数据: " + data + "\n状态: " + status);
  });
});

$.post()：

$.post(url,data,callback);

　　url：必须；其它可选参数。

$.post(‘test.php‘,
    {
        name:‘a‘,
        url:‘www.b.com‘
    }
    function (data,status){
        alert("数据 \n"+data+"\n 状态: "+status);
    }
    );

第九部分：jQuery noConflict()

jQuery使用$作为jQuery的简写。所以存在一个问题：如果其它js框架使用了$符号，或者书写的js代码中定义了$作为变量或者函数名，这时候就会产生冲突。

释放$，使用jQuery替代：

$.noConflict();
jQuery(document).ready(function(){
    //some code
})

$.noConflict()返回的引用，可以存入变量。如：

var jq=$.noConflict();
jq(document).ready(function(){
    //some code
})

　　当然，关于jQuery还有许多插件，比如验证表单，验证密码等等。

　　详情可参考菜鸟教程

原文：http://www.cnblogs.com/why-not-try/p/7842915.html