zoukankan      html  css  js  c++  java
  • jQuery -> 获取指定上下文中的DOM元素

    jQuery函数的第二个參数能够指定DOM元素的搜索范围。

    第二个參数可分为下面类型

    • DOM reference
    • jQuery wrapper
    • document

    代码演示样例

    <!DOCTYPE html>
    <html>
    <body>
    <form>
    	<input name="" type="checkbox"/>
    	<input name="" type="radio"/>
    	<input name="" type="text"/>
    	<input name="" type="button"/>
    </form>
    <form>
    	<input name="" type="checkbox"/>
    	<input name="" type="radio"/>
    	<input name="" type="text"/>
    	<input name="" type="button"/>
    </form>
    <input name="" type="checkbox"/>
    <input name="" type="radio"/>
    <input name="" type="text"/>
    <input name="" type="button"/>
    
    <script type="text/javascript" src="jquery-1.11.1.js"></script>
    <script type="text/javascript">
    	// search within all form elements, using a wrapper for context, 
    	// alerts "8 inputs"
    	alert("selected" + $('input', $('form')).length + ' inputs');
    
    	// search with the first form element, using DOM reference as the context, 
    	// alerts "4 inputs"
    	alert("selected" + $('input', document.forms[0]).length + ' inputs');
    
    	// search within the body element for all input elements using an expression, 
    	// alerts "12 inputs"
    	alert("selected" + $('input', 'body').length + ' inputs');
    </script>
    </body>
    </html>

    总结

    第二个參数的不同的类型。相应的使用方法例如以下表所看到的。

    类型 使用方法
    jQuery wrapper $('input', $('form')).length
    DOM reference $('input', document.forms[0]).length
    document $('input', 'body').length

    參考

    • jQuery Cookbook -> 1.4 Selecting DOM Elements Within a Specified Context.
  • 相关阅读:
    【Vue】 修饰符sync
    【VUE】vue路由跳转的方式
    【Element】elementui的Cascader 级联选择器,在懒加载的时候数据无法回显的解决方案
    【ES6】利用ES6 Set 将数组去重
    【.NETCORE】Refit 框架
    【.NETCORE】ASP.NET Core SignalR
    【Visual Studio Code】驼峰翻译助手
    VueX(Vue状态管理模式)
    hdmi 随笔
    ad 差分布线 等长布线
  • 原文地址:https://www.cnblogs.com/yxysuanfa/p/6918378.html
Copyright © 2011-2022 走看看