JQUERY特殊简写 常用操作

[文章] 浏览(34)  | 2017年10月16日  | 支持服务 | 
[标签]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及之后版本
附件说明
附件