jQuery Lite: Choose jQuery-JS Tutorial-php.cn

jQuery Lite: Choose jQuery < p>

custom jquery filters can select elements when used alone< h2>

it is not necessary to provide the actual element in conjunction with filter, such as $('div:hidden')< code>. you simply pass filter separately wherever a selector expression required. <

<

some examples:

 selects all hidden $(':hidden'); div elements, then selects only even $('div').filter(':even'); pre>copy after login< div>< div> 
  groping:hidden and :visible filters< the custom :hidden< code> :visible< do take css visibility properties into account one would expect. the way determines whether an or visible if takes up any space document. specifically, offsetwidth< offsetheight< reported by browser greater than 0. this way, that might have display< value block< contained within display< 的值>none< accurately report it invisible. 
check code carefully make sure you understand why returned true< code>, though selected < has inline of display:block< <!doctype html> <html lang=""en">" <body> <div id=""secondUL">" none;"> block;">< div> < <script <script> (function($){ returns true because parent hidden, so encapsulated reports zero offsetwidth offsetheight alert($('#childdiv').is(':hidden')); })(jquery); script> body> 
use is() method return boolean value< it often determine set actually contains specific element. using is()< we check current based on filter. will at least given if contained, false< returned. check following code: alert($('div').is('#i1')); false. wrapper no <div> alert($('div').is('#i2')); alert($('div').is(':hidden')); 
obviously, second alert()< false our wrapper does contain id< attribute i2< ##. code>is() very convenient for determining p>
note: starting 1.3, strong>is() supports expressions. previously, complex expressions those containing hierarchy selectors (such , code>~, code>>) always code>true. p>filters are other internal functions. therefore, rules apply here also here. p>some developers use 
is('.class') class. don't forget already this called code>hasclass('class'), which be multiple values. but honest, code>hasclass() just convenience around method. 
you jquery h2>you comma-separated first parameter function: $('expression, expression, expression'). in words, limited using single elements. for example, example below, i three function. <div>jquery <p>is p> <ul> <li>best!< li> ul> (function ($) { alerts best! alert($('div, p, ul li').text()); inefficient way. alert($('div').text() + $('p').text() $('ul p>each dom added set. we methods operate these remember placed same wrapping an inefficient call function times, once each expression. wrapperset.length selection anything checking length. array property 
length. code>length 0, know matches passed there code>id "nothere" page. guess what? it's there! "0" alert($('#nothere').length);  it's obvious, length number - how many function.< strong> 
create selecting elements h2>it possible extend functionality engine creating your own filters. theory, everything part jquery. let's say want web page absolutely positioned. since doesn't :positionabsolute yet, create own. absolute">absolute< <span span> <div>static< define extending $.expr[':'] $.expr[':'].positionabsolute="function" (element) $(element).css('position')="==" 'absolute'; }; how positioned? alert($(':positionabsolute').length); "4" alert($('div:positionabsolute').length); "2" p>the most important thing grasp default provided however, before time version selector, try 
filter() specified could avoid writing code>:positionabsolute code>filter() code> previous example. remove from positioned $('div').filter(function () $(this).css('position')="==" }); $('*').filter(function 
注释：< strong>有关创建自己的选择器的更多信息，我建议阅读以下内容：http: www.bennadel.com blog 1457-how-to-build-a-custom- jquery-selector.htm< 
按数字顺序过滤与 关系过滤之间的差异< jquery 提供了过滤器，用于通过集合中元素的数字上下文来过滤包装器集。< 
这些过滤器是：< 
 <li>:first< code>< li> <li>:last< <li>:even< <li>:odd< <li>:eq(index)< <li>:gt(index)< <li>:lt(index)< ul> strong>过滤包装器集本身的过滤器通过过滤集合中起始点 0 或索引 的元素来实现这一点。例如 :eq(0)< 和:first 访问集合中的第一个元素 $('div:eq(0)')< 索引为 0。这与单索引的 :nth-child< 过滤器形成对比。这意味着，例如 :nth-child(1)< 将返回第一个子元素，但尝试使用 :nth-child(0)< 将不起作用。使用 将始终不选择任何内容。< 使用 :first< 将选择集合中的第一个元素，而 :last< 将选择集合中的最后一个元素。请记住，它们根据集合内的关系（从 开始的数字层次结构）过滤集合，而不是 上下文中元素的关系。有了这些知识，就应该很明显为什么过滤器 code>、:last< 和 :eq(index)< 将始终返回单个元素。< 
如果还不是很明显，请允许我进一步解释。 只能返回单个元素的原因是，当只有一个集合时，集合中只能有一个元素被首先考虑。这应该是相当合乎逻辑的。检查下面的代码，看看这个概念的实际应用。< <li>1< <li>2< <li>3< <li>4< <li>5< <li>6< <li>7< <li>8< <li>9< <li>10< text() combines contents string. alert('there ' $('li').length set'); get me alert($('li:first').text()); "1" last alert($('li:last').text()); "10" 6th set, index alert($('li:eq(5)').text()); "6" 
有了对操作集合本身的清晰理解，我们可以通过使用过滤器来选择与实际 中其他元素具有唯一关系的元素，从而增强对选择元素的理解。 提供了几个选择器来执行此操作。其中一些选择器是自定义的，而另一些则是众所周知的用于选择 元素的 表达式。< <li>祖先后代< <li>父级>子< <li>上一个 下一个< <li>prev ~ 兄弟姐妹< <li>:nth-child(选择器)< <li>:first-child< <li>:last-child< <li>:only-child< <li>:empty< <li>:has(选择器)< <li>:parent< 
使用这些选择器过滤器将根据元素在 中与 中其他元素的关系来选择元素。为了演示这个概念，让我们看一些代码。< alert($('li:nth-child(2)').text()); "22" alert($('li:nth-child(odd)').text()); "135135" alert($('li:nth-child(even)').text()); "2424" alert($('li:nth-child(2n)').text()); 
如果您对 $('li:nth-child(odd)').text()< 返回值 135135 感到惊讶，那么您还没有掌握关系过滤器。 $('li:nth-child(odd)')< 口头上说的是“查找网页中所有属于子元素的 <li>< 元素，然后按奇数子元素过滤它们”。好吧，碰巧页面中有两个结构，它们有一组由 code>s 组成的兄弟结构。我的观点是这样的：包装器集由基于过滤器的元素组成，该过滤器考虑了元素与 中其他元素的关系。这些关系可以在多个位置找到。< 
要记住的概念是，并非所有过滤器都是平等创建的。确保您了解哪些是基于 关系进行过滤的，例如:only-child< code>-以及哪些按元素的位置进行过滤-例如:eq()< code>-在包装集中。< 
当值包含元字符时按 id 选择元素< 选择器使用一组元字符（例如 # []=">" ），当用作名称的文字部分时（例如 id=""#foo[bar]"" ）应该被逃脱。可以通过在字符前放置两个反斜杠来转义字符。检查下面的代码，了解如何在选择表达式中使用两个反斜杠来选择 属性值为 #foo[bar]< 的元素。< "jquery" alert($('#\\#foo\\[bar\\]').text()); 以下是用作名称的文字部分时需要转义的字符的完整列表。< <li>#< <li>;< <li>&< <li>,< <li>.< <li>+< <li>*< <li>~< <li>'< <li>:< <li>“< <li>!< <li>^< <li>$< <li>[< <li>]< <li>(< <li>)< <li> <li>>< <li>|< 
堆叠选择器过滤器< 可以堆叠选择器过滤器 例如a[title=""jQuery"][href^="http://"].一个明显的例子是选择一个具有特定属性和特定属性值的元素。例如，下面的" 代码将仅选择 html 页面中的 < 元素：< <li>包含 href< 属性，起始值为“http: ”< <li>有一个值为“jquery”的 title< 属性< 
仅选择一个 正在被选择。< <a title=""jQuery"" href=""">jQuery.com</a>" 1< a> alert($('a[title=""jQuery"][href^="http://"]').length);" 
请注意代码中我们如何堆叠两个过滤器来完成此选择。< 
除了属性过滤器之外，还可以堆叠其他选择器过滤器。例如：< select text $('div:last:contains("jquery")') boxes both $(':checkbox:visible:checked') 
要掌握的概念是选择器过滤器可以堆叠并组合使用。< strong>您还可以嵌套和堆叠过滤器 例如$('p').filter(':not(:first):not(:last)')< 
嵌套选择器过滤器< 选择器过滤器可以嵌套。这使您能够以非常简洁和强大的方式使用过滤器。下面，我将举例说明如何嵌套过滤器来执行复杂的过滤。< <div>javascript< <div><span div's, remove div's child alert($('div:not(:has(.jquery))').text()); combined odd (count starts 0) alert($('div:not(:odd)').text()); 
要掌握的概念是选择器过滤器可以嵌套。< 
摸索 :nth-child() 过滤器< :nth-child()< 过滤器有很多用途。例如，假设您只想选择 
< 元素中包含的每三个 元素。可以使用 :nth-child()< 过滤器。检查以下代码以更好地了解如何使用 过滤器。< by alert($('li:nth-child(1)').text()); "246810" "13579" equation alert($('li:nth-child(3n)').text()); "369" uses 1 alert($('li:nth-child(0)').text()); nothing. there index. 通过使用正则表达式搜索属性值来选择元素< 当用于选择元素的 属性过滤器不够健壮时，请尝试使用正则表达式。 james padolsey 为过滤器选择器编写了一个很好的扩展，它允许我们创建用于过滤的自定义正则表达式。我在这里提供了一个代码示例，但请确保您还查看了 http: james.padolsey.com 上的文章以了解所有详细信息。< extension jquery.expr[':'].regex="function" (elem, index, match) var matchparams="match[3].split(',')," validlabels="/^(data|css):/," attr="{" method: matchparams[0].match(validlabels) ? matchparams[0].split(':')[0] : 'attr', property: matchparams.shift().replace(validlabels, '') }, regexflags="ig" , regex="new" regexp(matchparams.join('').replace( ^\s+|\s+$ g, ''), regexflags); regex.test(jquery(elem)[attr.method](attr.property)); } where numbers alert($('div:regex(id,[0-9])').length); string "two" alert($('div:regex(id, two)').length); div>< 
选择直系子代与选择所有后代之间的差异< 直接子元素只能通过使用组合器 >< 或通过 children()< 遍历方法来选择。可以使用 *< 表达式选择所有后代。确保您清楚地了解两者之间的区别。下面的示例演示了这些差异。< <p><strong><span>text< span>< strong>< each statement alerts two direct <p> inside alert($('div').children().length); alert($('>*', 'div').length); alert($('div').find('>*').length); 6 descendants, including node. alert($('div').find('*').length); alert($('*', 
当上下文已设置时选择直接子元素< 当已经提供了上下文时，可以在没有上下文的情况下使用组合器 来选择直接子元素。检查下面的代码。< <ul <li>text< <li> children. "3". alert($('ul:first').find('> li').length); alert($('> li', 'ul:first').length); )(jquery); 
基本上，当上下文已经确定时，'>元素'< code>可以用作表达式。< p>

        The above is the detailed content of jQuery Lite: Choose jQuery. For more information, please follow other related articles on the PHP Chinese website!


     
      
       Related labels：
       
        - jquery
        - choose
        - Lite
       
      
      
       source：php.cn
      
     
     
      Previous article：Working with HTML5 Canvas with Konva: Exploring Basic Shapes (Part 2)
      Next article：JavaScript implementation of binary search algorithm
     
     
      
       Statement of this Website
      
      
       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
      
     
     
     
      
       Latest Articles by Author
      
      
       
        
         
         Solana Telegram Bot, Track addresses
        
        
         2024-09-08 10:30:33
        
       
        
         
         Elon Musk Saves Dogecoin (DOGE) from CRASHING
        
        
         2024-09-08 09:34:13
        
       
        
         
         Venezuelan Opposition Leader Maria Corina Machado Props Bitcoin as a Lifeline, Proposes Establishing a Bitcoin Reserve
        
        
         2024-09-08 09:31:13
        
       
        
         
         Metalpha Whale Transactions Affect ETH Prices, But a Bullish Trend May Emerge Soon
        
        
         2024-09-08 09:29:13
        
       
        
         
         Stani Kulechov Sells $6.7 Million Worth of AAVE Tokens as the Token's Value Rises
        
        
         2024-09-08 09:25:13
        
       
        
         
         Amid the Anticipated Market Recovery, Several Lesser-Known Altcoins Tied to Real-World Assets (RWA) Are Sparking Interest
        
        
         2024-09-08 09:22:13
        
       
        
         
         DOGEN: The Ultimate Memetoken for Real Alphas Who Always Win
        
        
         2024-09-08 09:17:13
        
       
        
         
         Can XRP Hit $100? Market Expert Moonshilla Makes a Bold Prediction
        
        
         2024-09-08 09:11:13
        
       
        
         
         Terra Luna Classic (LUNC) Tax2Gas Upgrade Completes, Focus Shifts Back to Development
        
        
         2024-09-08 09:09:13
        
       
        
         
         Helium (HNT), Starknet (STRK), and Uniswap (UNI) defy the trend to become this week's top altcoin gainers
        
        
         2024-09-08 09:04:13
        
      
     
     
      
       Latest Issues
      
      
       
        
         Steps to install jQuery in Nuxt.js
         Although I try to add jQuery in my project, I get an error saying it's not defined. plugin...
         
          
           From 2023-11-06 16:41:50
          
          
           
            0
           
           
            1
           
           
            225
           
          
         
        
       
       
       
        
         jQuery getting wrong value when getting data attribute
         I have a div with data attribute 
 I have...
         
          
           From 2023-11-01 23:01:19
          
          
           
            0
           
           
            1
           
           
            209
           
          
         
        
       
       
       
        
         Support jQuery's Transfer-Encoding:chunked
         I'm a web developer. In my script I use header() to set "Transfer-Encoding:chunked&qu...
         
          
           From 2023-10-25 23:44:37
          
          
           
            0
           
           
            1
           
           
            230
           
          
         
        
       
       
       
        
         How to get the natural dimensions of an image using JavaScript or jQuery?
         So far I have this code: varimg=document.getElementById('draggable'); varwidth=img.clientW...
         
          
           From 2023-10-21 13:53:08
          
          
           
            0
           
           
            2
           
           
            275
           
          
         
        
       
       
       
        
         Automatically expand text area
         I'm trying to make a simple auto-expanding text area. This is my code: textarea.onkeyup=fu...
         
          
           From 2023-10-21 08:49:23
          
          
           
            0
           
           
            2
           
           
            225