14个有用的Jquery技巧分享


Posted in Javascript onJanuary 08, 2015

1.通过方法返回Jquery对象实例

用 var someDiv = $(‘#someDiv').hide();  代替 var someDiv = $(‘#someDiv');  someDiv.hide();

2.使用find来查找

用 $(‘#someDiv').find(‘p.someClass').hide();   代替 $(‘#someDiv p.someClass').hide();因为可以不必触发Jquery的Sizzle引擎,同时在写选择符的时候尽量让您的选择符简单同时优化最右边的选择符

3.不要滥用$(this)

用 $(‘#someAnchor').click(function() {  alert( this.id );  }); 代替 $(‘#someAnchor').click(function() {alert($(this).attr(‘id'));});

4.ready的简写形式

用 $(function() { }); 代替 $(document).ready(function() {});

5.让你的代码安全

方法1(使用noConflict)

var j = jQuery.noConflict();

j(‘#someDiv').hide();

// The line below will reference some other library's $ function.

$(‘someDiv').style.display = ‘none';

方法2(传入参数Jquery)
(function($) {

// Within this function, $ will always refer to jQuery

})(jQuery);

方法3(通过ready方法)
jQuery(document).ready(function($) {

// $ refers to jQuery

});

6.简化代码

用each代替for,使用数组保存临时变量,使用document fragment,这其实和写原生的Javascript需要注意的一样。

7.使用Ajax的方法

Jquery提供了get getJSON post ajax这些有用的ajax方法

8.访问原生的属性和方法
比如获取元素id的方法有

// OPTION 1 ? Use jQuery

var id = $(‘#someAnchor').attr(‘id');

// OPTION 2 ? Access the DOM element

var id = $(‘#someAnchor')[0].id;

// OPTION 3 ? Use jQuery's get method

var id = $(‘#someAnchor').get(0).id;

// OPTION 3b ? Don't pass an index to get

anchorsArray = $(‘.someAnchors').get();

var thirdId = anchorsArray[2].id;

9.使用PHP来检查Ajax请求

通过使用xhr.setRequestHeader(“X-Requested-With”, “XMLHttpRequest”);  服务器端如PHP就可以通过

function isXhr() {

return $_SERVER['HTTP_X_REQUESTED_WITH'] === ‘XMLHttpRequest';

}

来检查是不是Ajax请求,在一些禁用Javascript的情况下可能会用到

10.Jquery和$的关系

在Jquery代码的最下面,可以看到下面的代码
window.jQuery = window.$ = jQuery;  $其实就是Jquery的一个shortcut

11.条件加载Jquery

<!? Grab Google CDN jQuery. fall back to local if necessary ?>

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script>

<script>!window.jQuery && document.write(‘<script src=”js/jquery-1.4.2.min.js”><\/script>')</script>

如果CDN没有下载到Jquery,则从本地读取

12.Jquery Filters

<script>

$(‘p:first').data(‘info', ‘value'); // populates $'s data object to have something to work with

$.extend(

jQuery.expr[":"], {

block: function(elem) {

return $(elem).css(“display”) === “block”;

},

hasData : function(elem) {

return !$.isEmptyObject( $(elem).data() );

}

}

);

$(“p:hasData”).text(“has data”); // grabs paras that have data attached

$(“p:block”).text(“are block level”); // grabs only paragraphs that have a display of “block”

</script>

注:$.expr[":"]等价于$.expr.filters

13.hover方法

$(‘#someElement').hover(function() {

//在这里可以使用toggle方法来实现滑过和滑出的效果

});

14.传入属性对象

当创建一个元素的时候,Jquery1.4可以传入一个属性对象

$(‘</a>', {

id : ‘someId',

className : ‘someClass',

href : ‘somePath.html'

});

甚至是Jquery指定的属性或事件如text, click
Javascript 相关文章推荐
非主流的textarea自增长实现js代码
Dec 20 Javascript
简介AngularJS的HTML DOM支持情况
Jun 17 Javascript
Javascript中神奇的this
Jan 20 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
May 27 Javascript
简单实现Vue的observer和watcher
Dec 21 Javascript
angularjs ui-router中路由的二级嵌套
Mar 10 Javascript
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
JavaScrip关于创建常量的知识点
Dec 07 Javascript
微信小程序显示下拉列表功能【附源码下载】
Dec 12 Javascript
js实现通过开始结束控制的计时器
Feb 25 Javascript
Echarts.js无法引入问题解决方案
Oct 30 Javascript
JavaScript实现H5接金币功能(实例代码)
Feb 22 Javascript
jQuery中insertBefore()方法用法实例
Jan 08 #Javascript
jQuery中insertAfter()方法用法实例
Jan 08 #Javascript
jQuery中prependTo()方法用法实例
Jan 08 #Javascript
8个超实用的jQuery功能代码分享
Jan 08 #Javascript
jQuery中appendTo()方法用法实例
Jan 08 #Javascript
jQuery中append()方法用法实例
Jan 08 #Javascript
jQuery中end()方法用法实例
Jan 08 #Javascript
You might like
php使用for语句输出三角形的方法
2015/06/09 PHP
Yii使用smsto短信接口的函数demo示例
2016/07/13 PHP
PHP用mysql_insert_id()函数获得刚插入数据或当前发布文章的ID
2016/11/25 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
Laravel框架实现修改登录和注册接口数据返回格式的方法
2018/08/17 PHP
在Laravel中使用GuzzleHttp调用第三方服务的API接口代码
2019/10/15 PHP
PHP常量DIRECTORY_SEPARATOR原理及用法解析
2020/11/10 PHP
javascript中获取选中对象的类型
2007/04/02 Javascript
JS 建立对象的方法
2007/04/21 Javascript
javascript 复杂的嵌套环境中输出单引号和双引号
2009/05/26 Javascript
JQery jstree 大数据量问题解决方法
2010/03/09 Javascript
12个非常有创意的JavaScript小游戏
2010/03/18 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
2012/01/10 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
原生JavaScript实现合并多个数组示例
2014/09/21 Javascript
jQuery/CSS3图片特效插件整理推荐
2014/12/07 Javascript
动态加载jQuery的方法
2015/06/16 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
2016/01/13 Javascript
javascript关于继承解析
2016/05/10 Javascript
D3.js实现直方图的方法详解
2016/09/25 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
2017/04/20 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
2018/03/13 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
2019/05/20 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
2019/10/17 Javascript
前端深入理解Typescript泛型概念
2020/03/09 Javascript
ES6扩展运算符和rest运算符用法实例分析
2020/05/23 Javascript
viewer.js实现图片预览功能
2020/06/24 Javascript
[37:22]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第一局
2016/02/28 DOTA
Python 窗体(tkinter)按钮 位置实例
2019/06/13 Python
Python中Selenium库使用教程详解
2020/07/23 Python
瑞典手机壳品牌:Richmond & Finch
2018/04/28 全球购物
美国和加拿大计算机和电子产品购物网站:TigerDirect.com
2019/09/13 全球购物
New Balance比利时官方网站:购买鞋子和服装
2021/01/15 全球购物
美国折扣香水网站:The Perfume Spot
2020/12/12 全球购物
小学生作文评语
2014/04/18 职场文书
签订劳动合同通知书
2015/04/16 职场文书