JQuery的简单认识

JQuery

简介

jQuery由美国人John Resig于2006年初创建，至今已吸引了来自世界各地的众多javascript高手加入其team。jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。 jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。

作用：

• 简化javascript和ajax编程，能够使程序员从设计和书写繁杂的JS应用中解脱出来，将关注点转向功能需求而非实现细节上，从而提高项目的开发速度。
• 改善了页面视觉效果，增强了与页面的交互性，体验更绚丽的网页物资。
• 提供了强大的功能函数，解决浏览器兼容问题，丰富的UI。

安装：
在页面头部head中，添加js <script type=“text/javascript” src=“js/jquery.js"> 即可

页面加载：
$(document).ready(function() {})–>简写：$(function(){});绑定在一个DOM文档载入完成后执行的函数，同一个页面可以多次使用。
注意：在JQuery中，$就是JQuery的简写形式。read()当DOM载入就绪可以查询及操作时绑定一个要执行的函数。

JQuery选择器

选择器是JQuery的根基，在JQuery中，对事件处理，遍历DOM和Ajax操作都依赖于选择器。
简洁的写法：

// jquery代码                       js代码
$("#id")                        document.getElementById("id");
$("tagName")                    document.getElementsTagName("tagName");
$("#id").css("color","red");    document.getElementById("id").style.color="red"

基本选择器：
基本选择器是JQuery中最常见的选择器，它通过元素id，class和标签名来查找DOM元素。

层次选择器：
通过DOM元素之间的层次关系来获取特定元素，如：后代选择器、子元素、相邻元素、兄弟元素等则需要层次选择器。

注意：（“prev~div”）选择器只能选择"#prev",元素后面的同辈元素;而JQuery中的方法siblings()与前后位置无关，只要是同辈节点就可以选取。

过滤选择器：
过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头；按照不同的过滤规则, 过滤选择器可以分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器。
基本过滤器：

内容过滤器：

可见性过滤器：

元素属性操作：
在javascript我们是通过getAttribute和setAttribute来操作元素的属性，在jQuery中只需使用attr（）方法即可完成对元素属性的获取与设置，使用removeAttr()方法可以删除元素属性。
1.读取属性
通过在attr（）方法中传递一个属性名称，可以取得第一个匹配元素的属性值。语法格式如下：attr(attributeName)。
2. 修改属性
根据传递参数类型的不同，attr()方法可以用下面两种格式修改匹配元素的每个属性值。
其语法格式下：attr(attrbuteName,value)、attr(map)

JQuery常用方法

搜索操作

1. 搜索同辈元素：搜索当前元素的同辈元素
   • next()方法 用于获取紧跟在每个匹配元素之后的单个同辈元素
   • nextAll()方法 用于搜索跟在每个匹配元素之后的所有同辈元素进行筛选。
   • prev()方法 用于搜索紧邻每个匹配元素前面的单个同辈元素。
   • prevAll()方法 用于搜索当前元素之前所有同辈元素
2. 搜索子元素： 在常规DOM编程中，可以使用firstChild,lastChild和childNodes属性来检索当前的第一个子元素，最后一个子元素以及所有子元素的集合。
   • children() 方法 用于获取一个包含匹配元素集合中每一个子元素的所有子元素的集合
   • find() 方法 用于从每个匹配元素中查找符合选择器表达式的后代元素。

节点查找

$(“element”) ；标签查询

$("#id") ; id选择器

$(".class")；类选择器

$("*"); 通用选择器

$("#id").text() 查找文本节点

$("#id").attr(name) ；查找属性节点

创建节点

1. 创建元素节点 $("<p></p>");创建一个<p>元素的节点.
2. 创建文本节点 $("<p>text</p>"); 创建元素节点是直接在元素节点内插入文本
3. 创建属性节点 $("<p id="p1">text</p>") 创建属性节点

删除节点

1. remove() 作用于删除文档中的所有匹配的节点，包含子节点。语法如：$(selector).remove(selector);
2. empty() 从被选中元素移除所有内容，包括所有文本和子节点。语法如：$(selector).empty();

替换节点

拿一个或一类节点替换另一个或一类节点。在HTML-DOM中由replaceChild()方法来完成，在JQuery中方法有：

1. replaceAll() 方法 用于指定的节点替换所有selector选择器匹配到节点 ，格式如：$(content).replaceAll(selector);
2. replaceWith()方法 将所有selector选择器匹配的节点替换成指定的节点，语法如：$(selector).replaceWith(conten);

复制节点

使用clone()方法生成被选择元素的副本，包含子节点、文本、和属性 语法：$(selector).clone();

内部插入

1. append() 方法 在指定的节点的尾部插入指定的内容 ，语法：$(selector).append(content)
2. appendTo() 方法 把所有匹配的节点追加到另一个指定节点的集合末尾， 语法：$(select).append(selector);
3. prepend() 方法 在指定节点的头部插入指定的内容，其语法格式：$(selector).prepend(content)
4. prependTo() 方法 把所有匹配的节点插入到另一个指定节点集合头部 语法如：$(selector).prependTo(selector);

外部插入

在节点的外部插入新的节点，外部插入的新节点和目标节点是兄弟关系而不是父子关系。

1. after() 方法 在指定节点的后面插入指定的内容 语法 $(selector).after(content);
2. insertAfter() 方法 把所有匹配的节点到另个以指定节点集合的后面，其语法：$(content).insertAfter(selector);
3. before() 方法 在指定节点的前面插入指定的内容。 $(selector).before(content)
4. insertBefore() 方法 把所有匹配的节点插入到另一个指定节点集合的前面，语法：$(content).insertBefore(selector);

属性操作

获取HTML内容， html() 方法 获取匹配元素集合中的一个元素HTML内容，并返回字符串。

设置HTML内容，html(htmlString)方法 设置元素的HTML内容，其中htmlString做为设置的字符串参数。

获取文本内容： text() 方法 用于获取所有匹配元素的内容，返回结果为所有匹配元素包含的文本内容组合起来的文本。

设置文本内容：text(textString)方法 其中的textString 为设置的匹配元素的文本内容。

对于表单元素的操作，我们可以使用val() 方法 获取元素的值，val()方法不带参数时，返回第一个匹配元素的值。如果是可多选的元素，则返回一个数组。

设置元素值 ： 当在val（）方法中传递一个字符串或者数组作为参数时，此参数将用来设置匹配集合中每个元素的值。语法格式如下：val(value)

读取元素操作： 通过在attr（）方法中传递一个属性名称，可以取得第一个匹配元素的属性值。语法格式如下：attr(attributeName)。

修改元素属性： 根据传递参数类型的不同，attr()方法可以用下面两种格式修改匹配元素的每个属性值。 其语法格式下：attr(attrbuteName,value)、attr(map)

prop() 方法设置或返回被选元素的属性和值。1.当该方法用于返回属性值时，则返回第一个匹配元素的值。如：$(selector).prop(property)；2.当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。$(selector).prop(property,value)

操作元素样式：

1. 为元素添加css样式类 ，语法格式：addClass（className)。
2. 移除样式类 removeClass（）方法从所有匹配元素中删除一个，多个或者全部样式类，语法格式：removeClass([className])
3. 切换样式类 toggleClass()方法控制指定元素上的样式重复切换，即如果样式存在就删除它，样式不存在则添加它。语法格式如：toggleClass(className)、toggleClass(className,switch)

CSS属性操作

1. 读取CSS样式 ：使用jQuery中的css（）方法，只需要传递一个参数即可获取CSS样式，语法格式如下：css(cssName)。如要获取p元素的字体颜色属性，代码如下：$(“p”).css(“color”);

2. 设置CSS样式：设置元素的CSS样式的语法如下：css(cssName,value)

注意：jquery each循环,要实现break和continue的功能：break----用return false;
continue --用return ture;