标签：

jQuery介绍

jQuery内封装了原生的js代码，是一个轻量级的、兼容多浏览器的JavaScript库。

jQuery使用户能够更便利地措置惩罚惩罚HTML Document、Events、实现动画效果、便利地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“

jQuery的优势

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

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

链式表达式。jQuery的链式操纵可以把多个操纵写在一行代码里，越发简洁。

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

Ajax操纵撑持。jQuery简化了AJAX操纵，后端只需返回一个JSON格局的字符串就能完成与前真个通信。

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

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

jQuer内容

选择器

筛选器

样式操纵

文本操纵

属性操纵

文档措置惩罚惩罚

事件

动画效果

插件

each、data、Ajax

jQuery根基语法: $(选择器).action(属性值)

原本的写法
jQuery() <===> $()

使用jQuery注意事项:必然要先通过script标签引入jQuery代码才华使用它的一系列要领

查找标签 根基选择器

id选择器：

$("#id")

标签选择器：

$("tagName")

class选择器：

$(".className")

共同使用：

$("div.c1") // 找到有c1 class类的div标签

所有元素选择器：

$("*")

组合选择器：

$("#id, .className, tagName") 层级选择器

x和y可以为任意选择器

$("x y");// x的所有儿女y（子子孙孙） $("x > y");// x的所有儿子y（儿子） $("x + y")// 找到所有紧挨在x后面的y $("x ~ y")// x之后所有的兄弟y 注意:跟css是一致的 根基筛选器 :first // 第一个 :last // 最后一个 :eq(index)// 索引即是index的阿谁元素 :even // 匹配所有索引值为偶数的元素，从 0 开始计数 :odd // 匹配所有索引值为奇数的元素，从 0 开始计数 :gt(index)// 匹配所有大于给定索引值的元素 :lt(index)// 匹配所有小于给定索引值的元素 :not(元素选择器)// 移除所有满足not条件的标签 :has(元素选择器)// 拔取所有包罗一个或多个标签在其内的标签(指的是从儿女元素找)

例如:

$("div:has(h1)")// 找到所有儿女中有h1标签的div标签 $("div:has(.c1)")// 找到所有儿女中有c1样式类的div标签 $("li:not(.c1)")// 找到所有不包罗c1样式类的li标签 $("li:not(:has(a))")// 找到所有儿女中不含a标签的li标签 属性选择器 <input type="text"> <input type="password"> <input type="checkbox"> $('[type]') //取到类型是type的所有标签 $("input[type='checkbox']"); // 取到checkbox类型的input标签 $("input[type!='text']"); // 取到类型不是text的input标签 表单选择器 :text :password :file :radio :checkbox :submit :reset :button

例子

$(":text") //找到所有的text

$(‘:checked‘)
会将checkbox和option默认的选中标签的全部拿到，针对该情况需要你查找条件要越发精确。

筛选器要领

同级别下方查找

$("#id").next() //找和id标签同级别下一个元素 $("#id").nextAll() //找和id标签同级别所有元素 $("#id").nextUntil("#i2") //找和id标签同级另外元素，直到i2为止（不包孕i2）

同级别上方查找

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