11、JQuery知识点总结

1、JQuery简介

JQuery 是一套跨浏览器的JavaScript库，简化HTML与JavaScript之间的操作

jQuery有下列特色：

• 跨浏览器的DOM元素选择
• DOM巡访与更改：支持CSS 1-3
• 事件（Events）
• CSS操纵
• 特效和动画（移动显示位置、淡入、淡出）
• Ajax
• 延伸性（Extensibility）
• 工具：例如浏览器版本（已取消内置，改由jQuery Migrate plugin外挂提供）和each函数。
• JavaScript插件
• 轻量级

• DHTML DOM选择器与链式语法

经由jQuery的DHTML DOM选择器，可以更容易的操作在复杂的树状HTML中的任何DHTML DOM对象，并可用链式语法对同一对象的不同属性进行操作。

例如：

$("p.surprise").addClass("ohmy").show("slow"); 

相当于

1. 查找HTML的<p>标签，且其class为"surprise"的DHTML DOM对象
2. 将其Class属性多加上一个"ohmy"（通常是配CSS的定义做显示时的配色修改）
3. 打开显示

• CSS 1-3选择器：支持CSS选择器选定DOM对象。
• 跨浏览器：跨浏览器的AJAX解决方式，支持Internet Explorer 6.0+、Opera 9.0+、Firefox 2+、Safari 2.0+、Google Chrome 1.0+
• 简单：较其它JavaScript库更易于入门。

 

2、JQuery语法和运行在哪

JQuery的语法是为HTML的元素编制的，可以对元素进行操作的；基础语法是：$(selector).action()     美元符号定义jQuery，selector（选择符）查询和查找HTML元素，action执行对HTML元素的操作

1 $(document).ready(function(){
2 
3 --- jQuery functions go here ----
4 
5 });

所有jQuery操作都在document ready之后，这是为了防止在文档没有全部加载之前运行jQuery代码

如果文档没有全部加载，操作有可能失败，比如：

• 试图隐藏一个不存在的元素
• 获得未完全加载的图像的大小

3、jQuery选择器

在HTML DOM术语中，选择器允许对DOM元素组和单个DOM元素进行操作。

分为元素选择器、属性选择器、CSS 选择器

①元素选择器：

jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取所有 id="demo" 的 <p> 元素。

②属性选择器：

jQuery 使用 XPath 表达式（XPath 是一门在 XML 文档中查找信息的语言。XPath 可用来在 XML 文档中对元素和属性进行遍历）来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素