[标签]JQuery
简写
jQuery 简化为 $
$(docment).ready(function(){…}) 简化为 $(function(){…})
$(selector).bind('click','function(){…}') 简化为 $(selector).click(function(){…})
function aa($){...};aa(jQuery); 简化为 (function(){...})(jQuery); 实际上是执行()(para)匿名方法,只不过是传递了jQuery对象。
get() 简化为 ge()
equal() 简化为 eq()
初始化jquery对象
在页面DOM加载完成后(不包括图片下载完成)执行你需要的代码,由于不包括图片下载,所以比window.onload效率高.
有时会出现加载后页面跳动,因为,在JQUERY加载完成后,可能会改变样式,页面会有跳动或闪动的感觉。
(function(){...})(); 立即执行函数。相当于先申明一个函数,声明完后直接调用。
例子:(function(str){alert(str)})("output")); 相当于 function OutPutFun(str){alert(str);};OutPutFun("output");
插件
格式如下:
(function ($) {
$.fn.test111 = function () {
alert('test')
}
})(jQuery);
调用插件
$("#elementid").test111();
自定义添加"$"
jQuery不能满足所有用户的所有需求,且有一些特殊的需求十分小众,也不适合放到整个jQuery框架中,
用户可以自定义该方法。代码如下:
$.fn.disable = function(){
return this.each(function(){
if(typeof this.disabled != "undefined") this.disabled = true;
});
}
以上代码首先设置"$.fn.disable",表明为"$"添加一个方法“disable()”,其中“$.fn”是扩展jQuery时所必须的
然后利用匿名函数定义这个方法,即用each()将调用这个方法的每个元素的disabled属性均设置为true(如果该属性存在)
解决"$"的冲突
如果其他框架也是用了“$",会引起冲突,jQuery同样提供了noConflict()方法来解决"$"冲突问题
jQuery.noConflict();
以上代码可以使"$"按照其他javascript框架的方式运算,这时再jQuery中便不能在使用“$”,而必须使用jQuery,
例如$("div p") 必须写成jQuery("div p").
实例
语句 |
功能 |
$(document) |
选择整个文档对象 |
$('div.myClass') |
选择class为myClass的div元素 |
$('a:first') |
选择网页中第一个a元素 |
$('tr:odd') |
选择表格的奇数行 |
$('div:visible') |
选择可见的div元素 |
$('#buton').is(':visible') |
判断为buton是否可见 |
$('#buton').is(':hidden') |
判断为buton是否隐藏 |
$('#buton').hasClass('class') |
判断为buton是否有css类 |
$('div:gt(2)') |
选择所有的div元素,除了前三个 |
$('div:animated') |
选择当前处于动画状态的div元素 |
$('div').has('p') |
选择包含p元素的div元素 |
$('div').not('.myClass') |
选择class不等于myClass的div元素 |
$('div').filter('.myClass') |
选择class等于myClass的div元素 |
$('div').first() |
选择第1个div元素 |
$('div').eq(5) |
选择第6个div元素 |
$('div').next('p') |
选择div元素后面的第一个p元素 |
$('div').parent() |
选择div元素的父元素 |
$('div').closest('form') |
选择离div最近的那个form父元素 |
$('div').children() |
选择div的所有子元素 |
$('div').siblings() |
选择div的同级元素 |
$("img").attr({ src: "test.jpg", alt: "Test Image" }) |
设置img标签的属性,JSon格式 |
$("img").attr("src","test.jpg") |
设置img标签的属性,键值对 |
$("img").attr("title", function() { return this.src }) |
设置img标签的属性,匿名函数 |
$("p").addClass("selected"); |
添加p标签css类selected |
$("p").removeClass("selected") |
移除p标签css类selected |
$("p").toggleClass("selected"); |
切换p标签css类selected |
$("#a").trigger("click"); |
触发id=a的元素点击事件 |
$('#someElement').find('option:selected') |
找到一个已经被选中的option元素 |
$('#someid input[type=sometype][value=somevalue]').get() |
使用多个属性来进行过滤 |
if($.browser.safari){alert('是Safari 浏览器');} |
检测Safari |
if($.browser.msie && $.browser.version > 6) {alert('是E6及之后版本浏览器');}
|
检测IE6及之后版本 |
if($.browser.mozilla && $.browser.version >= '1.8') {alert('是FireFox 2及之后版本浏览器');}
|
检测FireFox 2及之后版本 |