1 关于页面元素的引用 <br>
通过 jquery 的 $()引用元素包括通过 idclass 元素名以及元素的层级关系及 dom 或者 xpath 条件等方法, 且返回的对象为 jquery 对象(集合对象), 不能直接调用 dom 定义的方法 < br>
<br>
2jQuery 对象与 dom 对象的转换 < br>
只有 jquery 对象才能使用 jquery 定义的方法注意 dom 对象和 jquery 对象是有区别的, 调用方法时要注意操作的是 dom 对象还是 jquery 对象 < br>
普通的 dom 对象一般可以通过 $()转换成 jquery 对象 < br>
如:$(document.getElementById("msg"))则为 jquery 对象, 可以使用 jquery 的方法 < br>
由于 jquery 对象本身是一个集合所以如果 jquery 对象要转换为 dom 对象则必须取出其中的某一项, 一般可通过索引取出 < br>
如:$("#msg")[0],$("div").eq(1)[0],$("div").get()[1],$("td")[5]这些都是 dom 对象, 可以使用 dom 中的方法, 但不能再使用 Jquery 的方法 < br>
以下几种写法都是正确的:<br>
- $("#msg").html();<br>
- $("#msg")[0].innerHTML;<br>
- $("#msg").eq(0)[0].innerHTML;<br>
- $("#msg").get(0).innerHTML;<br>
- <br>
3 如何获取 jQuery 集合的某一项 < br>
对 于获取的元素集合, 获取其中的某一项 (通过索引指定) 可以使用 eq 或 get(n)方法或者索引号获取, 要注意, eq 返回的是 jquery 对象, 而
get(n)和索引返回的是 dom 元素对象对于 jquery 对象只能使用 jquery 的方法, 而 dom 对象只能使用 dom 的方法, 如要获取第三
个 & lt;div> 元素的内容有如下两种方法:<br>
- $("div").eq(2).html(); // 调用 jquery 对象的方法 < br>
- $("div").get(2).innerHTML; // 调用 dom 的方法属性 < br>
- <br>
4 同一函数实现 set 和 get<br>
Jquery 中的很多方法都是如此, 主要包括如下几个:<br>
- $("#msg").html(); // 返回 id 为 msg 的元素节点的 html 内容 < br>
- $("#msg").html("<b>new content</b>");<br>
- // 将 & lt;b>new content</b> 作为 html 串写入 id 为 msg 的元素节点内容中, 页面显示粗体的 new content<br>
- <br>
- $("#msg").text(); // 返回 id 为 msg 的元素节点的文本内容 < br>
- $("#msg").text("<b>new content</b>");<br>
- // 将 & lt;b>new content</b> 作为普通文本串写入 id 为 msg 的元素节点内容中, 页面显示 & lt;b>new content</b><br>
- <br>
- $("#msg").height(); // 返回 id 为 msg 的元素的高度 < br>
- $("#msg").height("300"); // 将 id 为 msg 的元素的高度设为 300<br>
- $("#msg").width(); // 返回 id 为 msg 的元素的宽度 < br>
- $("#msg").width("300"); // 将 id 为 msg 的元素的宽度设为 300<br>
- <br>
- $("input").val("); // 返回表单输入框的 value 值 < br>
- $("input").val("test"); // 将表单输入框的 value 值设为 test<br>
- <br>
- $("#msg").click(); // 触发 id 为 msg 的元素的单击事件 < br>
- $("#msg").click(fn); // 为 id 为 msg 的元素单击事件添加函数 < br>
同样 blur,focus,select,submit 事件都可以有着两种调用方法 < br>
<br>
5 集合处理功能 < br>
对于 jquery 返回的集合内容无需我们自己循环遍历并对每个对象分别做处理, jquery 已经为我们提供的很方便的方法进行集合的处理 < br>
包括两种形式:<br>
- $("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]})<br>
- // 为索引分别为 0,1,2 的 p 元素分别设定不同的字体颜色 < br>
- <br>
- $("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})<br>
- // 实现表格的隔行换色效果 < br>
- <br>
- $("p").click(function(){alert($(this).html())}) <br>
- // 为每个 p 元素增加了 click 事件, 单击某个 p 元素则弹出其内容 < br>
- <br>
6 扩展我们需要的功能 < br>
- $.extend({<br>
- min: function(a, b){return a < b?a:b; },<br>
- max: function(a, b){return a > b?a:b; }<br>
- }); // 为 jquery 扩展了 min,max 两个方法 < br>
使用扩展的方法(通过 $. 方法名调用):<br>
- alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));<br>
- <br>
7 支持方法的连写 < br>
所谓连写, 即可以对一个 jquery 对象连续调用各种不同的方法 < br>
例如:<br>
- $("p").click(function(){alert($(this).html())})<br>
- .mouseover(function(){alert('mouse over event')})<br>
- .each(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]});<br>
- <br>
8 操作元素的样式 < br>
主要包括以下几种方式:<br>
- $("#msg").CSS("background"); // 返回元素的背景颜色 < br>
- $("#msg").css("background", "#ccc") // 设定元素背景为灰色 < br>
- $("#msg").height(300);
- $("#msg").width("200"); // 设定宽高 < br>
- $("#msg").css({
- color: "red",
- background: "blue"
- }); // 以名值对的形式设定样式 < br>
- $("#msg").addClass("select"); // 为元素增加名称为 select 的 class<br>
- $("#msg").removeClass("select"); // 删除元素名称为 select 的 class<br>
- $("#msg").toggleClass("select"); // 如果存在 (不存在) 就删除 (添加) 名称为 select 的 class<br>
- < br > <br > <br >
9 完善的事件处理功能 < br>
<br>
Jquery 已经为我们提供了各种事件处理方法, 我们无需在 html 元素上直接写事件, 而可以直接为通过 jquery 获取的对象添加事件 < br>
如:<br>
- $("#msg").click(function(){alert("good")}) // 为元素添加了单击事件 < br>
- $("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]})<br>
- // 为三个不同的 p 元素单击事件分别设定不同的处理 < br>
jQuery 中几个自定义的事件:<br>
(1)hover(fn1,fn2): 一个模仿悬停事件 (鼠标移动到一个对象上面及移出这个对象) 的方法当鼠标移动到一个匹配的元素上面时, 会触发指定的第一个函数当鼠标移出这个元素时, 会触发指定的第二个函数 < br>
- // 当鼠标放在表格的某行上时将 class 置为 over, 离开时置为 out<br>
- $("tr").hover(function(){<br>
- $(this).addClass("over");<br>
- },<br>
- function(){<br>
- $(this).addClass("out");<br>
- });<br>
(2)ready(fn): 当 DOM 载入就绪可以查询及操纵时绑定一个要执行的函数 < br>
- $(document).ready(function(){alert("Load Success")})<br>
- // 页面加载完毕提示 Load Success, 相当于 onload 事件与 $(fn)等价 < br>
(3)toggle(evenFn,oddFn): 每次点击时切换要调用的函数如果点击了一个匹配的元素, 则触发指定的第一个函数, 当再次点击同一元素时, 则触发指定的第二个函数随后的每次点击都重复对这两个函数的轮番调用 < br>
- // 每次点击时轮换添加和删除名为 selected 的 class<br>
- $("p").toggle(function(){<br>
- $(this).addClass("selected");<br>
- },function(){<br>
- $(this).removeClass("selected");<br>
- });<br>
(4)trigger(eventtype): 在每一个匹配的元素上触发某类事件 < br>
例如:<br>
$("p").trigger("click"); // 触发所有 p 元素的 click 事件 < br>
(5)bind(eventtype,fn),unbind(eventtype): 事件的绑定与反绑定 < br>
从每一个匹配的元素中 (添加) 删除绑定的事件 < br>
例如:<br>
- $("p").bind("click", function(){alert($(this).text());}); // 为每个 p 元素添加单击事件 < br>
- $("p").unbind(); // 删除所有 p 元素上的所有事件 < br>
- $("p").unbind("click") // 删除所有 p 元素上的单击事件 < br>
- <br>
10 几个实用特效功能 < br>
其中 toggle()和 slidetoggle()方法提供了状态切换功能 < br>
如 toggle()方法包括了 hide()和 show()方法 < br>
slideToggle()方法包括了 slideDown()和 slideUp 方法 < br>
<br>
11 几个有用的 jQuery 方法 < br>
$.browser. 浏览器类型: 检测浏览器类型有效参数: safari, opera, msie, mozilla 如检测是否 ie:$.browser.isie, 是 ie 浏览器则返回 true<br>
$.each(obj, fn): 通用的迭代函数可用于近似地迭代对象和数组(代替循环)<br>
如 < br>
$.each( [0,1,2], function(i, n){ alert( "Item #" + i + ":" + n ); });<br>
等价于:<br>
- var tempArr=[0,1,2];<br>
- for(var i=0;i<tempArr.length;i++){<br>
- alert("Item #"+i+":"+tempArr[ i ]);<br>
- }<br>
也可以处理 json 数据, 如 < br>
$.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name:" + i + ", Value:" + n ); });<br>
结果为:<br>
- Name:name, Value:John<br>
- Name:lang, Value:JS<br>
$.extend(target,prop1,propN): 用一个或多个其他对象来扩展一个对象, 返回这个被扩展的对象这是 jquery 实现的继承方式 < br>
如:<br>
- $.extend(settings, options);<br>
- // 合并 settings 和 options, 并将合并结果返回 settings 中, 相当于 options 继承 setting 并将继承结果保存在 setting 中 < br>
- var settings = $.extend({}, defaults, options);<br>
- // 合并 defaults 和 options, 并将合并结果返回到 setting 中而不覆盖 default 内容 < br>
可以有多个参数(合并多项并返回)<br>
$.map(array, fn): 数组映射把一个数组中的项目 (处理转换后) 保存到到另一个新数组中, 并返回生成的新数组 < br>
如:<br>
var tempArr=$.map( [0,1,2], function(i){ return i + 4; });<br>
tempArr 内容为:[4,5,6]<br>
var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });<br>
tempArr 内容为:[2,3]<br>
$.merge(arr1,arr2): 合并两个数组并删除其中重复的项目 < br>
如:$.merge( [0,1,2], [2,3,4] ) // 返回[0,1,2,3,4]<br>
$.trim(str): 删除字符串两端的空白字符 < br>
如:$.trim(" hello, how are you?"); // 返回 "hello,how are you?"<br>
<br>
12 解决自定义方法或其他类库与 jQuery 的冲突 < br>
很多时候我们自己定义了 $(id)方法来获取一个元素, 或者其他的一些 js 类库如 prototype 也都定义了 $ 方法, 如果同时把这些内容放在一起就会引起变量方法定义冲突, Jquery 对此专门提供了方法用于解决此问题 < br>
使 用 jquery 中的 jQuery.noConflict(); 方法即可把变量 $ 的控制权让渡给第一个实现它的那个库或之前自定义的 $ 方法之后应用
Jquery 的时候只要将所有的 $ 换成 jQuery 即可, 如原来引用对象方法 $("#msg")改为 jQuery("#msg")<br>
如:<br>
- jQuery.noConflict();<br>
- // 开始使用 jQuery<br>
- jQuery("div p").hide();<br>
- // 使用其他库的 $()
来源: http://www.qdfuns.com/article/12013/bc80f43343f6dc0e029062cba64040f6.html