前端三剑客-07jQuery

介绍

jQuery是一个轻量级的、兼容多浏览器的JavaScript库。

jQuery使用户可以更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，可以极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“

优点

一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。

丰富的DOM选择器,jQuery的选择器用起来很方便，好比要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再好比要将一个表格的隔行变色，jQuery也是一行代码搞定。

链式表达式。jQuery的链式操做能够把多个操做写在一行代码里，更加简洁。

事件、样式、动画支持。jQuery还简化了js操做css的代码，而且代码的可读性也比js要强。

Ajax操做支持。jQuery简化了AJAX操做，后端只需返回一个JSON格式的字符串就能完成与前端的通讯。

跨浏览器兼容。jQuery基本兼容了如今主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。

插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，而且用jQuery插件作出来的效果很炫，而且能够根据本身须要去改写和封装插件，简单实用。

jQuery对象

查找标签

基本选择器

1. id选择器

   • 开头对应id $("#id")

2. 标签选择器
   • 直接标签 $("input")
3. class选择器
   • .开头对应类 $(".error")
4. 配合使用
   • $("div.c1")

全部元素选择器

• $("*")

组合选择器

• $("#id, .className, tagName")

层级选择器

1. $("x y"); // x的全部后代y（子子孙孙）
2. $("x > y"); // x的全部儿子y（儿子）
3. $("x + y"); // 找到全部紧挨在x后面的y
4. $("x ~ y"); // x以后全部的兄弟y

基本筛选器

• :first // 第一个
• :last // 最后一个
• :eq(index) // 索引等于index的那个元素
• :even // 匹配全部索引值为偶数的元素，从 0 开始计数
• :odd // 匹配全部索引值为奇数的元素，从 0 开始计数
• :gt(index) // 匹配全部大于给定索引值的元素
• :lt(index) // 匹配全部小于给定索引值的元素
• :not(元素选择器) // 移除全部知足not条件的标签
• :has(元素选择器) // 选取全部包含一个或多个标签在其内的标签(指的是从后代元素找)

属性选择器

• [attribute]
• [attribute=value]// 属性等于
• [attribute!=value]// 属性不等于

表单筛选器

• :text
• :password
• :file
• :radio
• :checkbox
• :submit
• :reset
• :button

表单对象属性

• :enabled
• :disabled
• :checked
• :selected

筛选器方法

下一个元素：

• $("#id").next()
• $("#id").nextAll()
• $("#id").nextUntil("#i2")

上一个元素：

• $("#id").prev()
• $("#id").prevAll()
• $("#id").prevUntil("#i2")

父类元素

• $("#id").parent()
• $("#id").parents() // 查找当前元素的全部的父辈元素
• $("#id").parentsUntil()

儿子和兄弟元素

• $("#id").children(); // 儿子们
• $("#id").siblings(); // 兄弟们

筛选

• $("div").filter(".c1") // 从结果集中过滤出有c1样式类的
• .first() // 获取匹配的第一个元素
• .last() // 获取匹配的最后一个元素
• .not() // 从匹配元素的集合中删除与指定表达式匹配的元素
• .has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
• .eq() // 索引值等于指定值的元素

操做标签

样式类

• addClass(); // 添加指定的CSS类名。
• removeClass(); // 移除指定的CSS类名。
• hasClass(); // 判断样式存不存在
• toggleClass(); // 切换CSS类名，若是有就移除，若是没有就添加。

CSS

• css("color","red")

位置操做

• offset() // 获取匹配元素在当前窗口的相对偏移或设置元素位置

• position() // 获取匹配元素相对父元素的偏移

• scrollTop() // 获取匹配元素相对滚动条顶部的偏移

• scrollLeft() // 获取匹配元素相对滚动条左侧的偏移

尺寸

• height()

• width()

• innerHeight()

• innerWidth()

• outerHeight()

• outerWidth()

文本操做

HTML代码

• html() // 取得第一个匹配元素的html内容
• html(val) // 设置全部匹配元素的html内容

文本值

• text() // 取得全部匹配元素的内容
• text(val) // 设置全部匹配元素的内容

值

• val() // 取得第一个匹配元素的当前值
• val(val) // 设置全部匹配元素的值
• val([val1, val2]) // 设置多选的checkbox、多选select的值

设置值

<input type="checkbox" value="basketball" name="hobby">篮球
<input type="checkbox" value="football" name="hobby">足球

<select multiple id="s1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

• $("[name='hobby']").val(['basketball', 'football']);
• $("#s1").val(["1", "2"])

属性操做

addr用于ID等或自定义属性

• attr(attrName) // 返回第一个匹配元素的属性值
• attr(attrName, attrValue) // 为全部匹配元素设置一个属性值
• attr({k1: v1, k2:v2}) // 为全部匹配元素设置多个属性值
• removeAttr() // 从每个匹配的元素中删除一个属性

prop用于checkbox和radio

• prop() // 获取属性
• removeProp() // 移除属性

总结:

对于标签上有的能看到的属性和自定义属性都用attr

对于返回布尔值的好比checkbox、radio和option的是否被选中都用prop。

文档处理

添加到指定元素内部的后面

• $(A).append(B) // 把B追加到A
• $(A).appendTo(B) // 把A追加到B

添加到指定元素内部的前面

• $(A).prepend(B) // 把B前置到A
• $(A).prependTo(B) // 把A前置到B

添加到指定元素外部的后面

• $(A).after(B) // 把B放到A的后面
• $(A).insertAfter(B) // 把A放到B的后面

添加到指定元素外部的前面

• $(A).after(B) // 把B放到A的后面
• $(A).insertAfter(B) // 把A放到B的后面

移除和清空元素

• remove() // 从DOM中删除全部匹配的元素。
• empty() // 删除匹配的元素集合中全部的子节点。

替换

• replaceWith()
• replaceAll()

克隆

• clone() // 无参数,单纯复制样式
• clone(true) // true参数, 全复制(包括绑定事件等)

事件

经常使用事件

• click(function(){...})
• hover(function(){...})
• blur(function(){...})
• focus(function(){...})
• change(function(){...})
• keyup(function(){...})

事件绑定

• .on( events [, selector ],function(){})
  列如: $("body").on("click","button",function(){}) 这边意思为button的点击事件 委托给了body去执行

移除事件

• .off( events [, selector ][,function(){}])

阻止后续事件执行

1. return false; // 常见阻止表单提交等
2. e.preventDefault();

阻止事件冒泡

• e.stopPropagation();
• return false

页面载入

当DOM载入就绪能够查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，由于它能够极大地提升web应用程序的响应速度。

$(document).ready(function(){
// 在这里写你的JS代码...
})

简写:

$(function(){
// 你在这里写你的代码
})

与window.onload的区别

• window.onload()函数有覆盖现象，必须等待着图片资源加载完成以后才能调用
• jQuery的这个入口函数没有函数覆盖现象，文档加载完成以后就能够调用（建议使用此函数）

事件委托

事件委托是经过事件冒泡的原理，利用父标签去捕获子标签的事件。

示例：

表格中每一行的编辑和删除按钮都能触发相应的事件。

$("table").on("click", ".delete", function () {
  // 删除按钮绑定的事件
})

动画效果

// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定义（了解便可）
animate(p,[s],[e],[fn])

each

jQuery.each(collection, callback(indexInArray, valueOfElement))：

一个通用的迭代函数，它能够用来无缝迭代对象和数组。

li =[10,20,30,40]
$.each(li,function(i, v){
  console.log(i, v);//index是索引，ele是每次循环的具体元素。
})


输出：

010
120
230
340

.each(function(index, Element))：

描述：遍历一个jQuery对象，为每一个匹配元素执行一个函数。

.each() 方法用来迭代jQuery对象中的每个DOM元素。每次回调函数执行时，会传递当前循环次数做为参数(从0开始计数)。因为回调函数是在当前DOM元素为上下文的语境中触发的，因此关键字 this 老是指向这个元素。

// 为每个li标签添加foo
$("li").each(function(){
  $(this).addClass("c1");
});

注意: jQuery的方法返回一个jQuery对象，遍历jQuery集合中的元素 - 被称为隐式迭代的过程。当这种状况发生时，它一般不须要显式地循环的 .each()方法：

也就是说，上面的例子没有必要使用each()方法，直接像下面这样写就能够了：

$("li").addClass("c1");  // 对全部标签作统一操做

注意：

在遍历过程当中可使用 return false提早结束each循环。

data

在匹配的元素集合中的全部元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。

.data(key, value):

描述：在匹配的元素上存储任意相关数据。

$("div").data("k",100);//给全部div标签都保存一个名为k，值为100

.data(key):

描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—经过 .data(name, value)或 HTML5 data-*属性设置。

$("div").data("k");//返回第一个div标签中保存的"k"的值

.removeData(key):

描述：移除存放在元素上的数据，不加key参数表示移除全部保存的数据。

$("div").removeData("k");  //移除元素上存放k对应的数据

插件

jQuery.extend(object)

jQuery的命名空间下添加新的功能。多用于插件开发者向 jQuery 中添加新函数时使用。