jQuery learning summary: relative positioning and selectors of elements (continuously updated)_jquery

① Relative positioning of jQuery elements.
In jQuery, you can not only use selectors for absolute positioning, but also relative positioning. As long as the second parameter is specified in $(), the second parameter is the relative element. The second parameter is passed a jQuery object, and relative selection is performed relative to this object.

Copy code The code is as follows:

<script> <br>$(function(){ <br>//Set the background color of lines 1~3 to red (absolute positioning). <br>//Note the gt(0 here ) starts from the sequence number in the new sequence from lt(4), not the original one (that is, further filtering based on the original one) <br>$("#t tr:lt(4):gt(0). )").css("background","red"); <br>$("#t tr").click(function(){ <br>//This in Dom-->jQuery in $( this) <br>//$("td",$(this)) is relative to the search under tr of this line. td <br>$("td",$(this)).css("background"," green"); <br>}); <br>$("tr[title=ttt ]").css("background","yellow"); <br>}); <br></script>

< td>111 ;
;D



/td>

A
333	C
555	E
666	F
777	G
888	H
I

Operation rendering:

②$("div[id]") selects the div with the id attribute
③$("div[title=test]") selects the div with the title attribute "test". Note: an equal sign.
$("div[title!=test]")Select a div whose title attribute is not "test"
④$("input:checked")Note : There is no space between input and :checked
⑤The difference between $("input") and $(":input")
$("input") can only be obtained tag, but , <select>, etc. cannot be obtained. <br>$(":input") can not only get the <input> tag, but also <textarea>, <select> and other forms submitted to the server. <br>Similar $(":text") gets all single-line text boxes, we can also use $("input[type=text]") to achieve the same function. Similar ones include $(":passowrd"), $(":radio"), $(":checkbox"), $(":submit"), $(":image"), $(":reset" ), $(":button"), $(":file"), $(":hidden")<br>⑥Use the attr() method to read or set the attributes of the element. For attributes that are not encapsulated by jQuery, use attr operates. <br>$("#a:first").attr("href","<a href="http://baidu.com/">http://baidu.com</a>");<br>⑦Remove attribute removeAttr, delete attribute in source code I can't see the difference between this and clearing the attributes. <br>⑧Dynamicly create Dom nodes <br>Use $(html string) to dynamically create Dom nodes and return a jQuery object, and then call append and other methods to add the created node to the Dom. <br>var link=$("<a href='http://www.baidu.com'>Baidu</a>");<br>$("div:first").append( link); The <br>append method is used to append an element to the end of the element (add a child element and become the last child element). The <br>prepend method adds an element to the beginning of the element (add a child element and become the first child element). <br>The after method adds an element after the element (adds a sibling) <br>The before method adds an element before the element (adds a sibling) <br>⑨Delete the node<br>remove() deletes the selected node, this method is the return value It is a deleted node object, and you can continue to use the deleted node. <br> var list=$("#ulLeft li.test").remove();<br> $("#ulRight").append(list);</p> <p><span style="COLOR: #ff00ff">Prevent event bubbling</span>e.stopPropagation();<br><span style="COLOR: #ff00ff">Prevent default behavior</span>: e.preventDefault() has the same effect as window.event.returnValue=false</p> <script type="text/javascript"> if ($ != jQuery) { $ = jQuery.noConflict(); } var isLogined = false; var cb_blogId = 74236; var cb_entryId = 2028486; var cb_blogApp = "JuneZhang"; var cb_blogUserGuid = "e4ae0e67-3a36-df11-ba8f-001cf0cd104b"; var cb_entryCreatedDate = '2011/4/25 17:46:00'; </script> </div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement：</span><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox"><span>Previous article：<a class="dBlack" title="Detailed example code of jQuery Ajax method calling Asp.Net WebService_jquery" href="https://m.php.cn/faq/20161.html">Detailed example code of jQuery Ajax method calling Asp.Net WebService_jquery</a></span><span>Next article：<a class="dBlack" title="Detailed example code of jQuery Ajax method calling Asp.Net WebService_jquery" href="https://m.php.cn/faq/20163.html">Detailed example code of jQuery Ajax method calling Asp.Net WebService_jquery</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="https://m.php.cn/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/faq/1609.html" title="An in-depth analysis of the Bootstrap list group component" class="aBlack">An in-depth analysis of the Bootstrap list group component</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/1640.html" title="Detailed explanation of JavaScript function currying" class="aBlack">Detailed explanation of JavaScript function currying</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/1949.html" title="Complete example of JS password generation and strength detection (with demo source code download)" class="aBlack">Complete example of JS password generation and strength detection (with demo source code download)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/2248.html" title="Angularjs integrates WeChat UI (weui)" class="aBlack">Angularjs integrates WeChat UI (weui)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/2351.html" title="How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills" class="aBlack">How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Public welfare online PHP training，Help PHP learners grow quickly！</p></div><div class="footermid"><a href="https://m.php.cn/about/us.html">About us</a><a href="https://m.php.cn/about/disclaimer.html">Disclaimer</a><a href="https://m.php.cn/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>