jQuery语法

 

jQuery是目前使用最广泛的javascript函数库。

一、使用jQuery必须先导入jQuery文件

选择网页元素jQuery的基本设计和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。这是它区别于其他函数库的根本特点。

二、使用jQuery中的选择器

　　将一个选择表达式，放进构造函数jQuery()(简写为$)，然后得到被选中的元素。

1 $(document)//选择整个文档对象
2 $('#myId')//选择ID为myId的网页元素  
3 $('div.myClass')//选择class为myClass的div元素    
4 $('input[name=first]')//选择name属性等于first的input元素

　　也可以是jQuery特有的表达式：

1 $('a:first')//选择网页中第一个a元素  
2 $('tr:odd')//选择表格的奇数行  
3 $('#myForm :input')//选择表单中的input元素  
4 $('div:visible') //选择可见的div元素  
5 $('div:gt(2)')//选择所有的div元素，除了前三个  
6 $('div:animated')//选择当前处于动画状态的div元素 

　　如果选中多个元素，jQuery提供过滤器，可以缩小结果集：

1 $('div').has('p'); //选择包含p元素的div元素 
2 $('div').not('.myClass'); //选择class不等于myClass的div元素 
3 $('div').filter('.myClass'); //选择class等于myClass的div元素 
4 $('div').first(); //选择第1个div元素 
5 $('div').eq(5); //选择第6个div元素

　　jQuery也提供了在DOM树上的移动方法：

1 $('div').next('p'); //选择div元素后面的第一个p元素  
2 $('div').parent(); //选择div元素的父元素  
3 $('div').closest('form'); //选择离div最近的那个form父元素  
4 $('div').children(); //选择div的所有子元素  
5 $('div').siblings(); //选择div的同级元素  

　　

三、jQuery文档就绪函数

$(document).ready(function(){
//jQuery代码
});
简写形式
$(function(){
//jQuery代码
});

jQuery文档就绪函数与window.onload的区别

①window.onload必须等待网页资源(包括图片等)全部加载完成后，才能执行
文档就绪函数只需等到DOM结构加载完成后，即可执行。
②window.onload在一个页面中，只能写一次
文档就绪函数在一个页面中，可以有多个。

四、js对象和jQuery对象

①使用$取到的节点为jQuery对象，只能调用jQuery方法，不能调用原生js方法

jQuery("#div1").click(function(){})；

jQuery对象与js对象的相互转换
　　①jQuery转js：使用.get(index)或[index]选中的就是js对象
　　

$("div").get(0).onclick=function(){}
$("div")[0].onclick=function(){}

　　

　　②js对象转jQuery，使用$()包裹js对象。
　

var div=document.getElementsByTagName("div");
$(div).click(function(){});

五、链式操作

　　jQuery允许将所有操作连接在一起，以链条的形式写出来，比如：

1 $('div').find('h3').eq(2).html('Hello');  

我们可以这样拆封开来，就是下面这样：

1 $('div')//找到div元素  
2 .find('h3')//选择其中的h3元素  
3 .eq(2)//选择第3个h3元素  
4 .html('Hello'); //将它的内容改为Hello  

　　

　　这是jQuery最令人称道、最方便的特点。它的原理在于每一步的jQuery操作，返回的都是一个jQuery对象，所以不同操作可以连在一起。

　　jQuery还提供了.end()方法，使得结果集可以后退一步：

1 $('div')  
2 .find('h3')  
3 .eq(2)  
4 .html('Hello')  
5 .end()//退回到选中所有的h3元素的那一步  
6 .eq(0)//选中第一个h3元素  
7 .html('World'); //将它的内容改为World  

　　

五、解决jQuery多库冲突的问题

　　页面如果同时引入多个js框架，可能导致$冲突。

　　解决办法
　　①使用jQuery.noConflict();使jQuery放弃在全局使用$
　　②使用jQuery关键字替代$ 或者使用一个自执行函数：

　　！function($){
　　//在自执行函数中，可以使用$代替jQuery
　　//除自执行函数外的其他区域，禁止jQuery使用$
　　}(jQuery);

　　

六、内部操作

append:在div内部追加一个图片
$("#div1").append("<img src='../img/bu.png' />");
$("<img src='../05JS函数与bom/img/22222.png'/>").appendTo("#div1");
prepend:在div内部前面插入一个图片
$("#div1").prepend("<img src='../img/bu.png' />");
$("<img src='../05JS函数与bom/img/22222.png'/>").prependTo("#div1");

　

七、外部操作

after：在div外部追加一个图片
$("#div1").after("<img src='../img/bu.png' />");
$("<img src='../05JS函数与bom/img/22222.png'/>").insertAfter("#div1");
before：在div外部前面插入一个图片
wrap：为每一个选中的节点都套一层父节点
wrapAll：将选中的所有节点包裹在同一个父节点中
$("div").wrap("<div class='wrap'></div>");
$("div").wrapAll("<div class='wrap'></div>");
unwrap：删除选中节点的父节点
$("div").unwrap();
wrapInner：将选中节点中的所有子元素，包裹在一个新的父节点中，新的父节点是当前节点的唯一子节点
$("#div1").wrapInner("<div></div>");
replaceWith:将所有选中节点替换为新节点
$("#div1").replaceWith("<div>2</div>");
$("<div>2</div>").replaceAll("div");
empty：清空当前节点中的内容，但会保留当前节点标签
remove：删除当前节点以及所有子节点   //恢复时，只恢复标签，内容丢失		
detach：删除当前节点以及所有子节点	//恢复时，完全恢复		
clone()：传入true  会克隆事件
$("#div1").clone().insertBefore("#div1");

　　

八、属性操作

1 $.trim() 去除字符串两端的空格。
2 $.each() 遍历一个数组或对象。
3 $.inArray() 返回一个值在数组中的索引位置。如果该值不在数组中，则返回-1。
4 $.grep() 返回数组中符合某种标准的元素。
5 $.extend() 将多个对象，合并到第一个对象。
6 $.makeArray() 将对象转化为数组。
7 $.type() 判断对象的类别（函数对象、日期对象、数组对象、正则对象等等）。
8 $.isArray() 判断某个参数是否为数组。
9 $.isEmptyObject() 判断某个对象是否为空（不含有任何属性）。
10 $.isFunction() 判断某个参数是否为函数。
11 $.isPlainObject() 判断某个参数是否为用"{}"或"new Object"建立的对象。
12 $.support() 判断浏览器是否支持某个特性。

九、事件操作

1 .blur() 表单元素失去焦点。
2 .change() 表单元素的值发生变化
3 .click() 鼠标单击
4 .dblclick() 鼠标双击
5 .focus() 表单元素获得焦点
6 .focusin() 子元素获得焦点
7 .focusout() 子元素失去焦点
8 .hover() 同时为mouseenter和mouseleave事件指定处理函数
9 .keydown() 按下键盘（长时间按键，只返回一个事件）
10 .keypress() 按下键盘（长时间按键，将返回多个事件）
11 .keyup() 松开键盘
12 .load() 元素加载完毕
13 .mousedown() 按下鼠标
14 .mouseenter() 鼠标进入（进入子元素不触发）
15 .mouseleave() 鼠标离开（离开子元素不触发）
16 .mousemove() 鼠标在元素内部移动
17 .mouseout() 鼠标离开（离开子元素也触发）
18 .mouseover() 鼠标进入（进入子元素也触发）
19 .mouseup() 松开鼠标
20 .ready() DOM加载完成
21 .resize() 浏览器窗口的大小发生改变
22 .scroll() 滚动条的位置发生变化
23 .select() 用户选中文本框中的内容
24 .submit() 用户递交表单
25 .toggle() 根据鼠标点击的次数，依次运行多个函数
26 .unload() 用户离开页面