您的当前位置:首页jquery入门—访问DOM对象方法_jquery
广告

jquery入门—访问DOM对象方法_jquery

2023-12-03 来源:六三科技网

1、JavaScript访问DOM对象方法: var oTxtValue=document.getElementById("Text1").value; 2、JQuery访问DOM对象方法: var oTxtValue=$("#Text1").val(); 通过JQuery库中的方法访问或控制页面中的元素,比使用JavaScript代码要简洁得多,而且兼容各浏览器。 示例代码: 代码如下: 控制DOM对象 输出所消耗的执行时间,并且两者内传入的字符串命名须统一才能生效,例如:

console.time('Scott');console.log('seven');console.timeEnd('Scott');sevenScott: 0.256ms

代码段中三处一致才是正确的用法。

正文

接下来我们来讨论我们常用的jQuery查找dom方式:

1.$(‘.parent .child');2.$(‘.parent').find(‘.child');3.$(‘.child','.parent');

其中方式1和方式3都是基于jQuery的selector和context的查找方式,既我们最常用的jQuery()或者$() ,
详细即为:

jQuery = function( selector, context ) { // The jQuery object is actually just the init constructor 'enhanced' // Need init if jQuery is called (just allow error to be thrown if not included) return new jQuery.fn.init( selector, context );}

基于jQuery(1.11.3)70行处,为该方法的入口,他做的所有事情就是创建了一个jquery.fn上的init方法的对象,我们再来细看这个对象是什么:

init = jQuery.fn.init = function( selector, context ) { var match, elem; // HANDLE: $(""), $(null), $(undefined), $(false) if ( !selector ) { return this; } // Handle HTML strings if ( typeof selector === "string" ) { if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) { // Assume that strings that start and end with <> are HTML and skip the regex check match = [ null, selector, null ]; } else { match = rquickExpr.exec( selector ); } // Match html or make sure no context is specified for #id if ( match && (match[1] || !context) ) { // HANDLE: $(html) -> $(array) if ( match[1] ) { context = context instanceof jQuery ? context[0] : context; // scripts is true for back-compat // Intentionally let the error be thrown if parseHTML is not present jQuery.merge( this, jQuery.parseHTML( match[1], context && context.nodeType ? context.ownerDocument || context : document, true ) ); // HANDLE: $(html, props) if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) { for ( match in context ) { // Properties of context are called as methods if possible if ( jQuery.isFunction( this[ match ] ) ) { this[ match ]( context[ match ] ); // ...and otherwise set as attributes } else { this.attr( match, context[ match ] ); } } } return this; // HANDLE: $(#id) } else { elem = document.getElementById( match[2] ); // Check parentNode to catch when Blackberry 4.6 returns // nodes that are no longer in the document #6963 if ( elem && elem.parentNode ) { // Handle the case where IE and Opera return items // by name instead of ID if ( elem.id !== match[2] ) { return rootjQuery.find( selector ); } // Otherwise, we inject the element directly into the jQuery object this.length = 1; this[0] = elem; } this.context = document; this.selector = selector; return this; } // HANDLE: $(expr, $(...)) } else if ( !context || context.jquery ) { return ( context || rootjQuery ).find( selector ); // HANDLE: $(expr, context) // (which is just equivalent to: $(context).find(expr) } else { return this.constructor( context ).find( selector ); } // HANDLE: $(DOMElement) } else if ( selector.nodeType ) { this.context = this[0] = selector; this.length = 1; return this; // HANDLE: $(function) // Shortcut for document ready } else if ( jQuery.isFunction( selector ) ) { return typeof rootjQuery.ready !== "undefined" ? rootjQuery.ready( selector ) : // Execute immediately if ready is not present selector( jQuery ); } if ( selector.selector !== undefined ) { this.selector = selector.selector; this.context = selector.context; } return jQuery.makeArray( selector, this ); }

基于jQuery(1.11.3) 2776行处,该方法比较长,我就来大概说一下我对这个方法的了解:这里主要就是做了先对selector的判断,在判断完后,查找context如果存在就继续做对有context存在情况的处理,没有则进行没有context情况的处理,而方式1和方式3:

1.$(‘.parent .child');3.$(‘.child','.parent');

他们都要进入相同的判断步骤,即上面简要说明的判断流程,等到1和3判断完后所花费的时间基本差不多,但是1内部的选择器还需要花费时间去进行sizzle相关查找,得出:

  • 方式1. $(‘.parent .child'); 走完流程花费的时间:a;

  • 方式3. $(‘.child','.parent'); 走完流程花费的时间:a; 几乎已经找到dom节点

  • 方式1. $(‘.parent .child'); sizzle相关查找选择器.parent .child花费的时间:b;

  • 所以得出初步结论:

  • 方式3. $(‘.child','.parent');花费的时间:a;

  • 方式1. $(‘.parent .child');花费的时间:a + b;

  • 方式3优于方式1

  • 接下来我们来看实际的运行结果:

    以百度页面为例,我们随便找出一组满足的范围来查找,博主进行多次测试,方式3的查找效率均快于方式1,且方式3的查找速度基本为方式1的3倍左右,即:

    接下来我们我们加入jQuery的find方法进行比较,即为:

  • 方式1. $(‘.parent .child');

  • 方式2. $(‘.parent').find(‘.child');

  • 方式3. $(‘.child','.parent');

  • 由于我们已有了之前的判断,基于他们三者都要进行jQuery()的查找,所以三者都在此花费a的查找时间,此时方式3已经基本找到了:

  • 方式3. $(‘.child','.parent'); 花费时间:a;

  • 接下来方式1进行 ‘ .parent .child '选择器的查找,方式2进行jQuery的find方法查找,在此列出find的具体内容:

    find: function( selector ) { var i, ret = [], self = this, len = self.length; if ( typeof selector !== "string" ) { return this.pushStack( jQuery( selector ).filter(function() { for ( i = 0; i < len; i++ ) { if ( jQuery.contains( self[ i ], this ) ) { return true; } } }) ); } for ( i = 0; i < len; i++ ) { jQuery.find( selector, self[ i ], ret ); } // Needed because $( selector, context ) becomes $( context ).find( selector ) ret = this.pushStack( len > 1 ? jQuery.unique( ret ) : ret ); ret.selector = this.selector ? this.selector + " " + selector : selector; return ret; }

    基于jQuery(1.11.3) 2716行处,在此我们可以看出find的过程比较简单,相较于方式1查找复杂的选择器(在查找选择器的过程中需要排除很多的情况,更多的时间花费在处理字符串上,即处理出我们想要表达的选择器)更高效一点,我们得出方式2优于方式1,下面我们拿三者来进行比较:

    我们可以看出,方式1最慢,方式2和方式3不相上下,方式3略胜一筹,基本吻合我们的初衷,即为:

    在基于jQuery查找dom的过程中能使用jquery的查找方式就使用,尽量不写复杂的选择器来表达我们想要查找的dom,效率极低。相反使用jquery的查找方式我们就能尽量排除复杂选择器的情况,极大提高查找效率。

    由于方式2的使用可能会受限,所以在此我推荐大家使用方式3,即为:


    jquery怎样获取拼接后的dom对象

    本文主要记录了在近期开发中遇到的jQuery dom基本查找方法,然后将各种方法性能做了一个比较,目的是希望自己在以后dom元素查找时,使用最优的方案。文中介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧。

    前言

    关于这个问题的产生由于我们前端组每个人的编码习惯的差异,最主要的还是因为代码的维护性问题。在此基础上,我对jQuery源码(1.11.3)查找dom节点相关的内容进行了仔细的查阅,虽然并不能理解的很深入 。。同时基于对浏览器console对象的了解产生了一系列之后的问题和分析,对jQuery最常用的三种dom查找方式进行了一个查找效率和性能方面的比较分析。

    首先我们要用到的是console.time()和console.timeEnd()这两个成对出现的console对象的方法,该方法的用法是将他们两者之间的代码段执行并输出所消耗的执行时间,并且两者内传入的字符串命名须统一才能生效,例如:

    console.time('Scott');console.log('seven');console.timeEnd('Scott');sevenScott: 0.256ms

    代码段中三处一致才是正确的用法。

    正文

    接下来我们来讨论我们常用的jQuery查找dom方式:

    1.$(‘.parent .child');2.$(‘.parent').find(‘.child');3.$(‘.child','.parent');

    其中方式1和方式3都是基于jQuery的selector和context的查找方式,既我们最常用的jQuery()或者$() ,
    详细即为:

    jQuery = function( selector, context ) { // The jQuery object is actually just the init constructor 'enhanced' // Need init if jQuery is called (just allow error to be thrown if not included) return new jQuery.fn.init( selector, context );}

    基于jQuery(1.11.3)70行处,为该方法的入口,他做的所有事情就是创建了一个jquery.fn上的init方法的对象,我们再来细看这个对象是什么:

    init = jQuery.fn.init = function( selector, context ) { var match, elem; // HANDLE: $(""), $(null), $(undefined), $(false) if ( !selector ) { return this; } // Handle HTML strings if ( typeof selector === "string" ) { if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) { // Assume that strings that start and end with <> are HTML and skip the regex check match = [ null, selector, null ]; } else { match = rquickExpr.exec( selector ); } // Match html or make sure no context is specified for #id if ( match && (match[1] || !context) ) { // HANDLE: $(html) -> $(array) if ( match[1] ) { context = context instanceof jQuery ? context[0] : context; // scripts is true for back-compat // Intentionally let the error be thrown if parseHTML is not present jQuery.merge( this, jQuery.parseHTML( match[1], context && context.nodeType ? context.ownerDocument || context : document, true ) ); // HANDLE: $(html, props) if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) { for ( match in context ) { // Properties of context are called as methods if possible if ( jQuery.isFunction( this[ match ] ) ) { this[ match ]( context[ match ] ); // ...and otherwise set as attributes } else { this.attr( match, context[ match ] ); } } } return this; // HANDLE: $(#id) } else { elem = document.getElementById( match[2] ); // Check parentNode to catch when Blackberry 4.6 returns // nodes that are no longer in the document #6963 if ( elem && elem.parentNode ) { // Handle the case where IE and Opera return items // by name instead of ID if ( elem.id !== match[2] ) { return rootjQuery.find( selector ); } // Otherwise, we inject the element directly into the jQuery object this.length = 1; this[0] = elem; } this.context = document; this.selector = selector; return this; } // HANDLE: $(expr, $(...)) } else if ( !context || context.jquery ) { return ( context || rootjQuery ).find( selector ); // HANDLE: $(expr, context) // (which is just equivalent to: $(context).find(expr) } else { return this.constructor( context ).find( selector ); } // HANDLE: $(DOMElement) } else if ( selector.nodeType ) { this.context = this[0] = selector; this.length = 1; return this; // HANDLE: $(function) // Shortcut for document ready } else if ( jQuery.isFunction( selector ) ) { return typeof rootjQuery.ready !== "undefined" ? rootjQuery.ready( selector ) : // Execute immediately if ready is not present selector( jQuery ); } if ( selector.selector !== undefined ) { this.selector = selector.selector; this.context = selector.context; } return jQuery.makeArray( selector, this ); }

    基于jQuery(1.11.3) 2776行处,该方法比较长,我就来大概说一下我对这个方法的了解:这里主要就是做了先对selector的判断,在判断完后,查找context如果存在就继续做对有context存在情况的处理,没有则进行没有context情况的处理,而方式1和方式3:

    1.$(‘.parent .child');3.$(‘.child','.parent');

    他们都要进入相同的判断步骤,即上面简要说明的判断流程,等到1和3判断完后所花费的时间基本差不多,但是1内部的选择器还需要花费时间去进行sizzle相关查找,得出:

  • 方式1. $(‘.parent .child'); 走完流程花费的时间:a;

  • 方式3. $(‘.child','.parent'); 走完流程花费的时间:a; 几乎已经找到dom节点

  • 方式1. $(‘.parent .child'); sizzle相关查找选择器.parent .child花费的时间:b;

  • 所以得出初步结论:

  • 方式3. $(‘.child','.parent');花费的时间:a;

  • 方式1. $(‘.parent .child');花费的时间:a + b;

  • 方式3优于方式1

  • 接下来我们来看实际的运行结果:

    以百度页面为例,我们随便找出一组满足的范围来查找,博主进行多次测试,方式3的查找效率均快于方式1,且方式3的查找速度基本为方式1的3倍左右,即:

    接下来我们我们加入jQuery的find方法进行比较,即为:

  • 方式1. $(‘.parent .child');

  • 方式2. $(‘.parent').find(‘.child');

  • 方式3. $(‘.child','.parent');

  • 由于我们已有了之前的判断,基于他们三者都要进行jQuery()的查找,所以三者都在此花费a的查找时间,此时方式3已经基本找到了:

  • 方式3. $(‘.child','.parent'); 花费时间:a;

  • 接下来方式1进行 ‘ .parent .child '选择器的查找,方式2进行jQuery的find方法查找,在此列出find的具体内容:

    find: function( selector ) { var i, ret = [], self = this, len = self.length; if ( typeof selector !== "string" ) { return this.pushStack( jQuery( selector ).filter(function() { for ( i = 0; i < len; i++ ) { if ( jQuery.contains( self[ i ], this ) ) { return true; } } }) ); } for ( i = 0; i < len; i++ ) { jQuery.find( selector, self[ i ], ret ); } // Needed because $( selector, context ) becomes $( context ).find( selector ) ret = this.pushStack( len > 1 ? jQuery.unique( ret ) : ret ); ret.selector = this.selector ? this.selector + " " + selector : selector; return ret; }

    基于jQuery(1.11.3) 2716行处,在此我们可以看出find的过程比较简单,相较于方式1查找复杂的选择器(在查找选择器的过程中需要排除很多的情况,更多的时间花费在处理字符串上,即处理出我们想要表达的选择器)更高效一点,我们得出方式2优于方式1,下面我们拿三者来进行比较:

    我们可以看出,方式1最慢,方式2和方式3不相上下,方式3略胜一筹,基本吻合我们的初衷,即为:

    在基于jQuery查找dom的过程中能使用jquery的查找方式就使用,尽量不写复杂的选择器来表达我们想要查找的dom,效率极低。相反使用jquery的查找方式我们就能尽量排除复杂选择器的情况,极大提高查找效率。

    由于方式2的使用可能会受限,所以在此我推荐大家使用方式3,即为:


    前端开发JS框架之jQuery的基础知识分享

    jQuery对象是通过jQuery包装DOM对象后产生的对象

    注意:jQuery对象只能使用jQuery里的方法,DOM对象只能使用DOM对象的方法

    基本选择器

    层级选择器:

    基本筛选器:

    属性选择器:

    表单筛选器:

    筛选器方法:

    jQuery的一些方法:

    注意:对于标签上有的能够看到的属性和自定义属性用attr()方法

    对于返回布尔值比如checkbox,radion,option这三个标签是否被选中,用prop方法

    事件绑定方式:

    注意:DOM定义的事件可以用 .on()方法来绑定事件,但是jQuery定义的事件就不可以

    常用事件有:

    移除事件:把on改成off,就是移除 .on()绑定的事件

    阻止后续事件执行:事件函数中添加 return false; (常用于阻止表单提交等)或者e.preventDefault()

    阻止事件冒泡:添加e.stopPropagation()

    利用父标签去捕获子标签的事件

    推荐阅读:

    前端开发框架之jQuery 和 Vue 的选择

    前端开发之15个jQuery小技巧分享

    前端开发之JQuery入门基础操作

    前端开发框架jQuery的优势与基础知识分享

    前端开发JS框架之jQuery的基础知识分享

    jQuery对象是通过jQuery包装DOM对象后产生的对象

    注意:jQuery对象只能使用jQuery里的方法,DOM对象只能使用DOM对象的方法

    基本选择器

    层级选择器:

    基本筛选器:

    属性选择器:

    表单筛选器:

    筛选器方法:

    jQuery的一些方法:

    注意:对于标签上有的能够看到的属性和自定义属性用attr()方法

    对于返回布尔值比如checkbox,radion,option这三个标签是否被选中,用prop方法

    事件绑定方式:

    注意:DOM定义的事件可以用 .on()方法来绑定事件,但是jQuery定义的事件就不可以

    常用事件有:

    移除事件:把on改成off,就是移除 .on()绑定的事件

    阻止后续事件执行:事件函数中添加 return false; (常用于阻止表单提交等)或者e.preventDefault()

    阻止事件冒泡:添加e.stopPropagation()

    利用父标签去捕获子标签的事件

    推荐阅读:

    前端开发框架之jQuery 和 Vue 的选择

    前端开发之15个jQuery小技巧分享

    前端开发之JQuery入门基础操作

    前端开发框架jQuery的优势与基础知识分享

    Jquery获取对象的几种方式介绍_jquery


    1、JQuery的核心的一些方法
    each(callback) '就像循环
    $("Element").length; ‘元素的个数,是个属性
    $("Element").size(); '也是元素的个数,不过带括号是个方法
    $("Element").get(); ‘某个元素在页面中的集合,以数组的形式存储
    $("Element").get(index); '功能和上面的相同,index表示第几个元素,数组的下标
    $("Element").get().reverse(); ‘把得到的数组方向
    $("Element1").index($("Element2")); '元素2在元素1中的索引值是。

    2、基本对象获取(注意这里获取的都是Jquery对象而不是Dom对象哦,但是他俩是可以转换滴)
    $("*") ‘表示获取所有对象 但是我至今没这样用过
    $("#XXX") '获得 id=XXX 的元素对象(id可以是标签的id或CSS样式id) 常用

    $("input[name='username']") 获得input标签中name='userName'的元素对象 常用

    $(".abc") ' 获得样式class的名字是.abc的元素对象 常用
    $("div") ' 标签选择器 选择所有的div元素 常用
    $("#a,.b,span") '表示获得ID是a的元素和使用了类样式b的元素以及所有的span元素
    $("#a .b p") 'ID号是a的并且使用了 b样式的 所有的p元素

    3、层级元素获取
    $("Element1 Element2 Element3 ....") '前面父级 后面是子集
    $("div >p") '获取div下面的所有的 p元素
    $("div + p") 'div元素后面的第一个 p元素
    $("div ~ p") 'div后面的所有的 p元素

    4、简单对象获取
    $("Element:first") 'HTML页面中某类元素的第一个元素
    $("Element:last") 'HTML页面中某类元素的最后一个元素
    $("Element:not(selector)") '去除所有与给定选择器匹配的元素,如:$("input:not(:checked)") 表示选择所有没有选中的复选框
    $("Element:even") '获得偶数行
    $("Element:odd“)'获得奇数行
    $("Element:eq(index)") '取得一个给定的索引值
    $("Element:gt(index)") '取得给定索引值的元素 之后的所有元素
    $("Element:lt(index)") '取得给定索引值的元素 之前的所有元素

    5、内容对象的获取和对象可见性
    $("Element:contains(text)") '元素中是否包含text文本内容
    $('Element:empty") '获得元素不包含子元素或文本的
    $("Element:partnt") '获得元素包含子元素或文本的
    $("Element:has(selector)") ‘是否包含某个元素, 如:$("p:has(span)")表示所有包含span元素的p元素
    $("Element:hidden") '选择所有可见元素
    $("Element:visible") '选择所有不可见元素

    6、其他对象获取方法
    $("Element[id]") '所有带有ID属性的元素
    $("Element[attribute = youlika ]" '获得所有某个属性为youlika的元素
    $("Element[attribute != youlika ]" '获得所有某个属性为不是youlika的元素
    $("Element[attribute ^= youlika ]" '获得所有某个属性为不是youlika的开头的元素
    $("Element[attribute $= youlika ]" '获得所有某个属性为不是youlika的结尾的元素
    $("Element[attribute *= youlika ]" '获得所有某个属性包含youlika的开头的元素
    $("Element[selector1][selector2][....]") '符合属性选择器,比如$("input[id][name][value=youlika ]")表示获得带有ID、Name以及value是youlika 的input元素。

    7、子元素的获取
    $("Element:nth-child(index)") '选择父级下面的第n个元素
    $("Element:nth-child(even)") '选择父级下面的偶数
    $("Element:nth-child(odd)") '选择父级下面的奇数
    $("Element:nth-child(3n+1)") '表达式
    $("Element:first-child") '选择父级下面的第一个子元素
    $("Element:last-child") '选择父级下面的最后一个子元素
    $("Element:only-child") '匹配父级下的唯一的一个子级元素,例如dt在dl列表中唯一,那么将选择dt

    8、表单对象获取
    $(:input)//查找所有的Input元素,当然也包括下拉列表,文本域,单选框,复选框等。
    $(:text)//匹配所有的单行文本框
    $(:password)//匹配所有的密码框
    $(:radio)//匹配所有的单选按钮
    $(:checkbox)//匹配所有的复选框
    $(:submit)//匹配所有的提交按钮
    $(:image)//匹配所有的图像域,例如
    $(:reset)//匹配所有的重置按钮
    $(:button)//匹配所有的按钮
    $(:file)//匹配所有的文件上传域
    $(:hidden)//匹配所有的不可见元素或者type为hidden的元素
    $(:enabled)//匹配所有可用的input元素,比如radio:enabled表示匹配所有可用的单选按钮
    $(:disabled)//匹配所有的不可用input元素,作用与上相反
    $(:checked)//匹配所有选中的复选框元素
    $(:selected)//匹配所有的下拉列表

    9、元素属性的设置与移除
    $("Element").attr(name) '取得第一个匹配的属性值,比如$("img").attr("src")
    $("Element".attr(key,value)") '某一个元素设置属性
    $("Element".attr({key:value,key1:value,....})) ‘为某个元素一次性设置多个属性
    $("Element").attr(key,function) '为所有匹配的元素设置一个计算的属性值。
    $("Element").removeAttr(name)//移除某一个属性

    Jquery获取对象的几种方式介绍_jquery


    1、JQuery的核心的一些方法
    each(callback) '就像循环
    $("Element").length; ‘元素的个数,是个属性
    $("Element").size(); '也是元素的个数,不过带括号是个方法
    $("Element").get(); ‘某个元素在页面中的集合,以数组的形式存储
    $("Element").get(index); '功能和上面的相同,index表示第几个元素,数组的下标
    $("Element").get().reverse(); ‘把得到的数组方向
    $("Element1").index($("Element2")); '元素2在元素1中的索引值是。

    2、基本对象获取(注意这里获取的都是Jquery对象而不是Dom对象哦,但是他俩是可以转换滴)
    $("*") ‘表示获取所有对象 但是我至今没这样用过
    $("#XXX") '获得 id=XXX 的元素对象(id可以是标签的id或CSS样式id) 常用

    $("input[name='username']") 获得input标签中name='userName'的元素对象 常用

    $(".abc") ' 获得样式class的名字是.abc的元素对象 常用
    $("div") ' 标签选择器 选择所有的div元素 常用
    $("#a,.b,span") '表示获得ID是a的元素和使用了类样式b的元素以及所有的span元素
    $("#a .b p") 'ID号是a的并且使用了 b样式的 所有的p元素

    3、层级元素获取
    $("Element1 Element2 Element3 ....") '前面父级 后面是子集
    $("div >p") '获取div下面的所有的 p元素
    $("div + p") 'div元素后面的第一个 p元素
    $("div ~ p") 'div后面的所有的 p元素

    4、简单对象获取
    $("Element:first") 'HTML页面中某类元素的第一个元素
    $("Element:last") 'HTML页面中某类元素的最后一个元素
    $("Element:not(selector)") '去除所有与给定选择器匹配的元素,如:$("input:not(:checked)") 表示选择所有没有选中的复选框
    $("Element:even") '获得偶数行
    $("Element:odd“)'获得奇数行
    $("Element:eq(index)") '取得一个给定的索引值
    $("Element:gt(index)") '取得给定索引值的元素 之后的所有元素
    $("Element:lt(index)") '取得给定索引值的元素 之前的所有元素

    5、内容对象的获取和对象可见性
    $("Element:contains(text)") '元素中是否包含text文本内容
    $('Element:empty") '获得元素不包含子元素或文本的
    $("Element:partnt") '获得元素包含子元素或文本的
    $("Element:has(selector)") ‘是否包含某个元素, 如:$("p:has(span)")表示所有包含span元素的p元素
    $("Element:hidden") '选择所有可见元素
    $("Element:visible") '选择所有不可见元素

    6、其他对象获取方法
    $("Element[id]") '所有带有ID属性的元素
    $("Element[attribute = youlika ]" '获得所有某个属性为youlika的元素
    $("Element[attribute != youlika ]" '获得所有某个属性为不是youlika的元素
    $("Element[attribute ^= youlika ]" '获得所有某个属性为不是youlika的开头的元素
    $("Element[attribute $= youlika ]" '获得所有某个属性为不是youlika的结尾的元素
    $("Element[attribute *= youlika ]" '获得所有某个属性包含youlika的开头的元素
    $("Element[selector1][selector2][....]") '符合属性选择器,比如$("input[id][name][value=youlika ]")表示获得带有ID、Name以及value是youlika 的input元素。

    7、子元素的获取
    $("Element:nth-child(index)") '选择父级下面的第n个元素
    $("Element:nth-child(even)") '选择父级下面的偶数
    $("Element:nth-child(odd)") '选择父级下面的奇数
    $("Element:nth-child(3n+1)") '表达式
    $("Element:first-child") '选择父级下面的第一个子元素
    $("Element:last-child") '选择父级下面的最后一个子元素
    $("Element:only-child") '匹配父级下的唯一的一个子级元素,例如dt在dl列表中唯一,那么将选择dt

    8、表单对象获取
    $(:input)//查找所有的Input元素,当然也包括下拉列表,文本域,单选框,复选框等。
    $(:text)//匹配所有的单行文本框
    $(:password)//匹配所有的密码框
    $(:radio)//匹配所有的单选按钮
    $(:checkbox)//匹配所有的复选框
    $(:submit)//匹配所有的提交按钮
    $(:image)//匹配所有的图像域,例如
    $(:reset)//匹配所有的重置按钮
    $(:button)//匹配所有的按钮
    $(:file)//匹配所有的文件上传域
    $(:hidden)//匹配所有的不可见元素或者type为hidden的元素
    $(:enabled)//匹配所有可用的input元素,比如radio:enabled表示匹配所有可用的单选按钮
    $(:disabled)//匹配所有的不可用input元素,作用与上相反
    $(:checked)//匹配所有选中的复选框元素
    $(:selected)//匹配所有的下拉列表

    9、元素属性的设置与移除
    $("Element").attr(name) '取得第一个匹配的属性值,比如$("img").attr("src")
    $("Element".attr(key,value)") '某一个元素设置属性
    $("Element".attr({key:value,key1:value,....})) ‘为某个元素一次性设置多个属性
    $("Element").attr(key,function) '为所有匹配的元素设置一个计算的属性值。
    $("Element").removeAttr(name)//移除某一个属性

    “JQuery对象”和“DOM对象”的区别?

    1.jQuery对象和DOM对象

    第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery对象和DOM对象以及它们之间的关系.

    DOM对象,即是我们用传统的方法(javascript)获得的对象,jQuery对象即是用jQuery类库的选择器获得的对象;

    复制代码 代码如下:

    var domObj = document.getElementById("id"); //DOM对象

    var $obj = $("#id"); //jQuery对象;

    jQuery对象就是通过jQuery包装DOM对象后产生的对象,它是jQuery独有的。如果一个对象是

    jQuery对象,那么就可以使用jQuery里的方法,例:

    $("#foo").html(); //获取id为foo的元素内的html代码,html()是jQuery特有的方法;

    上面的那段代码等同于:

    document.getElementById("foo").innerHTML;

    注意:在jQuery对象中无法使用DOM对象的任何方法。

    例如$("#id").innerHTML 和$("#id").checked之类的写法都是错误的,可以用$("#id").html()和$("#id").attr ("checked")之类的 jQuery方法来代替。

    同样,DOM对象也不能使用jQuery方法。学习jQuery开始就应当树立正确的观念,分清jQuery对象和DOM对象之间的区别,之后学习 jQuery就会轻松很多的。

    2.jQuery对象和DOM对象的互相转换

    在上面第一点说了,jquery对象和dom对象是不一样的!比如jquery对象不能使用dom的方法,dom对象不能使用jquery方法,那假如我 jquery没有封装我要的方法,那能怎么办呢?

    这时我们可以将jquer对象转换成dom对象

    jquery对象转换成 dom对象

    jquery提供了两种方法将一个jquery对象转换成一个dom对象,即[index]和get(index)。可能有人会觉得奇怪,怎么是用下标呢,没错,jquery对象就是一个数组对象.

    下面代码将演示一个jquery对象转换成dom对象,再使用dom对象的方法

    复制代码 代码如下:

    var $cr=$("#cr"); //jquery对象

    var cr = $cr[0]; //dom对象 也可写成 var cr=$cr.get(0);

    alert(cr.checked); //检测这个checkbox是否给选中

    dom对象转换成jquery对象

    对于一个dom对象,只需要用$()把dom对象包装起来,就可以获得一个jquery对象了,方法为$(dom对象);

    复制代码 代码如下:

    var cr=document.getElementById("cr"); //dom对象

    var $cr = $(cr); //转换成jquery对象

    转换后可以任意使用jquery中的方法了.

    通过以上的方法,可以任意的相互转换jquery对象和dom对象.

    jquery中如何获取当前DOM对象里的子元素?

    常见的方法是使用children()方法或者fand()方法都是可以获取到某个元素的子元素的,children() 方法返回匹配元素集合中每个元素的子元素,find()方法获得当前元素集合中每个元素的后代,通过选择器、jQuery 对象或元素来筛选。

    jquery中获取当前dom元素的子元素的方法有很多,常见的方法是使用children()方法或者fand()方法都是可以获取到某个元素的子元素的,children() 方法返回匹配元素集合中每个元素的子元素,find()方法获得当前元素集合中每个元素的后代,通过选择器、jQuery 对象或元素来筛选。

    一、使用children()方法获得子元素

    1、使用该方法获取子元素并设置子元素的字体为蓝色,代码如下:

    2、运行的效果如下图:

    二、使用find()方法获取子元素

    1、使用fand()方法获取子元素并且进行选择器的筛选,代码如下图:

    2、运行的结果如下图:

    参考资料

    博客.博客[引用时间2018-1-9]

    六三科技网还为您提供以下相关内容希望对您有帮助:

    几种jQuery查找dom的方法

    首先我们要用到的是console.time()和console.timeEnd()这两个成对出现的console对象的方法,该方法的用法是将他们两者之间的代码段执行并输出所消耗的执行时间,并且两者内传入的字符串命名须统一才能生效,例如:console.time...

    如何在jquery中操作DOM

    一、选取DOM元素 jQuery的核心是通过各种选择器,选中DOM元素,可以用querySelectorAll方法模拟这个功能。var $ = document.querySelectorAll.bind(document);这里需要注意的是,querySelectorAll方法返回的是NodeList对象,它很...

    jquery获取iframe中的dom对象(两种方法)

    父窗口中操作iframe $(window frames["iframeChild"] document) //假如iframe的id为iframeChild 在子窗口中操作父窗口 $(window parent document) 接下来就可以继续获取iframe内的dom了 获取iframe内的dom对象有两种方法 $...

    Jquery获取对象的几种方式介绍_jquery

    1、JQuery的核心的一些方法 each(callback) '就像循环 $("Element").length; ‘元素的个数,是个属性 $("Element").size(); '也是元素的个数,不过带括号是个方法 $("Element").get(); ‘某个元素在页面中的集...

    “JQuery对象”和“DOM对象”的区别?

    jQuery对象就是通过jQuery包装DOM对象后产生的对象,它是jQuery独有的。如果一个对象是 jQuery对象,那么就可以使用jQuery里的方法,例:("#foo").html(); //获取id为foo的元素内的html代码,html()是jQuery特有的方法;上...

    jquery如何遍历dom对象

    jQuery中用$()方法获取的DOM元素都会返回数组 并且jQuery中有隐形迭代,有些操作你无须去刻意循环它们,例如:$("div").text("hello");那么就会在所有的DIV中都加上hello. 若果硬要循环它们以进行某些处理 你可以使用...

    前端开发JS框架之jQuery的基础知识分享

    注意:jQuery对象只能使用jQuery里的方法,DOM对象只能使用DOM对象的方法 基本选择器 层级选择器:基本筛选器:属性选择器:表单筛选器:筛选器方法:jQuery的一些方法:注意:对于标签上有的能够看到的属性和自定义属性用attr()...

    jquery中有哪些dom操作

    1.remove()方法 作用是从DOM中删除所有匹配的元素,传入的参数用于根据jQuery表达式类筛选元素。 例如删除图3-11中节点中的第2个元素节点,jQuery代码如下: $("ul li:eq(1)").remove();//获取第2个元素节后,将它从网页中移除 ...

    jQuery与DOM对象有什么区别以及如何转换

    【jQuery教程】获取jQuery对象方法:var $obj1=$(".obj1")//获取类节点var $obj2=$("#obj2")//获取ID节点var $obj3=$("obj3")//获取标签节点jQuery对象与DOM对象区别jQuery对象是属于js的数组,...

    jquery常用方法有哪些

    其中selector1元素可以是一个jQuery对象、DOM对象以及HTML标签。而可选参数context是指定要插入上下文的位置。该方法与not()方法的作用相反 (2)not()方法$("selector").not(expr);not()方法用于在匹配selector元素集合...

    Top