温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

14个有用的jQuery技巧指的是什么呢

发布时间:2021-11-15 22:51:22 来源:亿速云 阅读:109 作者:柒染 栏目:开发技术

14个有用的jQuery技巧指的是什么呢,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

收集整理了14个很有用的jQuery技巧,与大家分享。

1.通过方法返回Jquery对象实例。用 var someDiv = $(‘#someDiv’).hide();  代替 var someDiv = $(‘#someDiv’);  someDiv.hide();

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

$(’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”

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

13.hover方法

$(’#someElement’).hover(function() { //在这里可以使用toggle方法来实现滑过和滑出的效果 });

14.传入属性对象

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

$(’</a>’, {  id : ’someId’,  className : ’someClass’,  href : ’somePath.html’ });

甚至是Jquery指定的属性或事件如text, click。

关于14个有用的jQuery技巧指的是什么呢问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注亿速云行业资讯频道了解更多相关知识。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI