您的当前位置:首页对jQuery选择器element用法介绍
广告

对jQuery选择器element用法介绍

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

定义和用法

element 选择器选取带有指定标签名的元素。

标签名引用 HTML 标签的 < 与 > 之间的文本。

语法

$(tagname)

参数 描述

tagname 必需。规定要选取的元素的名称。

在IE和Firefox下,动态创建元素的方法是由区别的

如下面代码,在IE下可以运行,在Firefox下会报错

 var theform = document.forms[0]; theform.appendChild(document.createElement("<input type='hidden' name='EVENTTARGET'>"));在 Firefox 只支持:document.createElement('input')

如果添加属性和事件的话,需要使用setAttribute方法

使用jquery动态创建元素,可以同时支持IE、Firefox

 var theform = document.forms[0]; $("<input type='hidden' name='EVENTTARGET'>").appendTo(theform);

小编还为您整理了以下内容,可能对您也有帮助:

什么是jquery选择器

jQuery选择器是jQuery库中非常重要的部分之一。它支持网页开发者所熟知的CSS语法快速轻松地对页面进行设置。了解jQuery选择器是打开高效开发jQuery之门的钥匙。一个典型的jQuery选择器句法形式:
$(selector).methodName();
selector是一个字符串表达示,用于识别DOM中的元素,然后使用jQuery提供的方法集合加以设置。
大多数情况下jQuery支持这样的操作:
$(selector).method1().method2().method3();
这个实例表示隐含DOM中id=”goAway”的元素,然后为其添加一个class=”incognito”属性。
$(’#goAway’).hide().addClass(’incognito’);
提示一下:当选择器表达示匹配多个元素时,可以象JavaScritp数组操作一样,方便灵活地利用数组指针进行选取。这是例子:
var element = $(’img’)[0];
匹配表达示的元素中,第一个元素对象将赋给变量element。
jQuery选择器的分类
有三种分类:基本选择器,位置选择器和自定义选择器。可以将基本选择器理解为“发现型选择器”,事实上它用于搜索DOM中的元素。位置选择器和自定义选择器更像是“筛选型选择器”。
基本选择器
这里提供了一份基本选择器的参考实例。这些选择器都支持CSS3语法准标和语议。
$(‘div’) 选取所有<div>元素。
$(‘fieldset a’) 选择在<fieldset>元素内出现的所有<a>元素。
$(‘li>p’) 选取在<li>标记中直接出现的所有<p>元素。
$(‘div~p’) 选取位为<div>标记之后出现的所有<p>元素。
$(‘p:has(b)’) 选取<p>元素内包含有<b>的所有元素。
$(‘div.someClass’) 选取<div>元素中出现class=”someClass”属性的所有元素。
$(‘.someClass’) 选取出现class=”someClass”属性的所有元素。
$(‘#testButton’) 选取id=”testButton”的元素。元素id属性值在当前DOM中是唯一的。因此我很好奇出现了两个id=”testButton”的元素时它会 怎么选。实验证明它只会选取第一个元素。真正的开发过程中,我们绝对不要在一个DOM中出现多个id相同的元素。
$(‘img[alt]’) 选取具有alt属性的所有<img>元素。
$(‘a[href$=.pdf]’) 选取具有href属性,而且属性的值以.pdf结尾的所有<a>元素。
$(‘button[id*=test]’) 选取所有的按钮,但按钮的id属性要包含”test”。
提示一下:在同一个$()结构中可以用“,”来连接多个不同的选择器,比如这样:
$(’div,p’)
以下是匹配所有具有title属性的<div>元素,和所有具有alt属性的<img>元素:
$(’div[title],img[alt]‘)
位置选择器
这种类型的选择器可以附加到任何基本选择器上,用于进行基于元素位置的筛选。如果缺省基本选择器,则将被视为所有元素。
举一些例子吧。
$(’p:first’) 选取页面中第一个出现的<p>元素。
$(’img[src$=.png]:first’) 选取页面中第一个出现src属性值以.png结尾的<img>元素。
$(’button.small:last’) 选取页面中最后一个出现class=”small”的按钮元素。
$(’li:first-child’) 选取页面中所有<li>列表的第一项元素。
$(’a:only-child’) 选取页面中所有<a>元素,但这些元素只能位于一个父级元素内。比如<li><a href=”url”>An url</a></li>,此时<li>内的<a>是匹配的。
$(‘li:nth-child(2)’) 选取父级元素中第二个<li>元素。<li>也一家要位于一个父级元素内。比如<ul>
<li>1</li>
<li>2</li>
</ul>
此时<li>2</li>是匹配的。
$(’tr:nth-child(odd)’) 选取表格中所有为奇数的行元素。
$(‘li:nth-child(3n)’) 在父级元素中有很多个<li>元素,但只选取隔3次出现的<li>元素。比如
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
其中<li>3</li>,<li>6</li>匹配。
$(’li:nth-child(3n+5)’) 带有偏移量的选取。在父级元素中只选取从第5个<li>元素开始每隔3次出现的<li>元素。比如
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
其中<li>5</li>,<li>8</li>匹配。
$(‘.someClass:eq(1)’) 选取页面中class=”someClass”的第二个元素。jQuery以0为基准,因此(1)表示相当于第2个。
$(‘.someClass:gt(1)’) 选取页面中所有class=”someClass”的元素,除了开头两个。
$(‘.someClass:lt(4)’) 只选取页面中所有class=”someClass”元素中最先的4个元素。
自定义选择器
jQuery提供这类的选择器用于在并不期望有CSS明确规定时,对元素进行方便快捷地选取。自定义选择器有可能会被组合起来,来看一看这些强大的选择器实例。
$(’img:animated’) 选取所有刚刚经历完动画方法调用的<img>元素。
$(’:button:hidden’) 选取所有被hide()方法隐含的按钮类型元素。
$(’input[name=myRadioGroup]:radio:checked’)选取name=”myRadioGroup”的单选框内被选中的项目。
$(’:text:disabled’) 选取所有被禁用的文本框元素。
$(’#xyz :header’) 选取id=”xyz”元素内的所有<h>元素。
$(’option:not(:selected)’) 选取没有被选中的所有的<option>元素。
$(’#myForm button:not(.someClass)’) 选取id=”myForm”的表单内不具有class=”someClass”属性的所有按钮。
$(’select[name=choices] :selected’) 选取name=”choices”的<select>元素中所有被选中的<option>项。
$(’p:contains(coffee)’) 选取所有内容包含有coffee的<p>元素。
无论是单一的或是组合,jQuery选择器能创建强大而简便的一套方案,便于jQuery内置的一些方法地行极富想像力的WEB开发。

什么是jquery选择器

jQuery选择器是jQuery库中非常重要的部分之一。它支持网页开发者所熟知的CSS语法快速轻松地对页面进行设置。了解jQuery选择器是打开高效开发jQuery之门的钥匙。一个典型的jQuery选择器句法形式:
$(selector).methodName();
selector是一个字符串表达示,用于识别DOM中的元素,然后使用jQuery提供的方法集合加以设置。
大多数情况下jQuery支持这样的操作:
$(selector).method1().method2().method3();
这个实例表示隐含DOM中id=”goAway”的元素,然后为其添加一个class=”incognito”属性。
$(’#goAway’).hide().addClass(’incognito’);
提示一下:当选择器表达示匹配多个元素时,可以象JavaScritp数组操作一样,方便灵活地利用数组指针进行选取。这是例子:
var element = $(’img’)[0];
匹配表达示的元素中,第一个元素对象将赋给变量element。
jQuery选择器的分类
有三种分类:基本选择器,位置选择器和自定义选择器。可以将基本选择器理解为“发现型选择器”,事实上它用于搜索DOM中的元素。位置选择器和自定义选择器更像是“筛选型选择器”。
基本选择器
这里提供了一份基本选择器的参考实例。这些选择器都支持CSS3语法准标和语议。
$(‘div’) 选取所有<div>元素。
$(‘fieldset a’) 选择在<fieldset>元素内出现的所有<a>元素。
$(‘li>p’) 选取在<li>标记中直接出现的所有<p>元素。
$(‘div~p’) 选取位为<div>标记之后出现的所有<p>元素。
$(‘p:has(b)’) 选取<p>元素内包含有<b>的所有元素。
$(‘div.someClass’) 选取<div>元素中出现class=”someClass”属性的所有元素。
$(‘.someClass’) 选取出现class=”someClass”属性的所有元素。
$(‘#testButton’) 选取id=”testButton”的元素。元素id属性值在当前DOM中是唯一的。因此我很好奇出现了两个id=”testButton”的元素时它会 怎么选。实验证明它只会选取第一个元素。真正的开发过程中,我们绝对不要在一个DOM中出现多个id相同的元素。
$(‘img[alt]’) 选取具有alt属性的所有<img>元素。
$(‘a[href$=.pdf]’) 选取具有href属性,而且属性的值以.pdf结尾的所有<a>元素。
$(‘button[id*=test]’) 选取所有的按钮,但按钮的id属性要包含”test”。
提示一下:在同一个$()结构中可以用“,”来连接多个不同的选择器,比如这样:
$(’div,p’)
以下是匹配所有具有title属性的<div>元素,和所有具有alt属性的<img>元素:
$(’div[title],img[alt]‘)
位置选择器
这种类型的选择器可以附加到任何基本选择器上,用于进行基于元素位置的筛选。如果缺省基本选择器,则将被视为所有元素。
举一些例子吧。
$(’p:first’) 选取页面中第一个出现的<p>元素。
$(’img[src$=.png]:first’) 选取页面中第一个出现src属性值以.png结尾的<img>元素。
$(’button.small:last’) 选取页面中最后一个出现class=”small”的按钮元素。
$(’li:first-child’) 选取页面中所有<li>列表的第一项元素。
$(’a:only-child’) 选取页面中所有<a>元素,但这些元素只能位于一个父级元素内。比如<li><a href=”url”>An url</a></li>,此时<li>内的<a>是匹配的。
$(‘li:nth-child(2)’) 选取父级元素中第二个<li>元素。<li>也一家要位于一个父级元素内。比如<ul>
<li>1</li>
<li>2</li>
</ul>
此时<li>2</li>是匹配的。
$(’tr:nth-child(odd)’) 选取表格中所有为奇数的行元素。
$(‘li:nth-child(3n)’) 在父级元素中有很多个<li>元素,但只选取隔3次出现的<li>元素。比如
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
其中<li>3</li>,<li>6</li>匹配。
$(’li:nth-child(3n+5)’) 带有偏移量的选取。在父级元素中只选取从第5个<li>元素开始每隔3次出现的<li>元素。比如
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
其中<li>5</li>,<li>8</li>匹配。
$(‘.someClass:eq(1)’) 选取页面中class=”someClass”的第二个元素。jQuery以0为基准,因此(1)表示相当于第2个。
$(‘.someClass:gt(1)’) 选取页面中所有class=”someClass”的元素,除了开头两个。
$(‘.someClass:lt(4)’) 只选取页面中所有class=”someClass”元素中最先的4个元素。
自定义选择器
jQuery提供这类的选择器用于在并不期望有CSS明确规定时,对元素进行方便快捷地选取。自定义选择器有可能会被组合起来,来看一看这些强大的选择器实例。
$(’img:animated’) 选取所有刚刚经历完动画方法调用的<img>元素。
$(’:button:hidden’) 选取所有被hide()方法隐含的按钮类型元素。
$(’input[name=myRadioGroup]:radio:checked’)选取name=”myRadioGroup”的单选框内被选中的项目。
$(’:text:disabled’) 选取所有被禁用的文本框元素。
$(’#xyz :header’) 选取id=”xyz”元素内的所有<h>元素。
$(’option:not(:selected)’) 选取没有被选中的所有的<option>元素。
$(’#myForm button:not(.someClass)’) 选取id=”myForm”的表单内不具有class=”someClass”属性的所有按钮。
$(’select[name=choices] :selected’) 选取name=”choices”的<select>元素中所有被选中的<option>项。
$(’p:contains(coffee)’) 选取所有内容包含有coffee的<p>元素。
无论是单一的或是组合,jQuery选择器能创建强大而简便的一套方案,便于jQuery内置的一些方法地行极富想像力的WEB开发。

jquery中类选择器的功能如何实现实例详解

一、类选择器的概念

类选择器,就是通过class属性获取节点。比如一个html结构中,有三个p标签都具有class=”red”的属性,那么类选择器返回的就是这三个p标签。

在jquery中,我们可以很方便的通过$(“.red”)这种方式按照类获取节点。但是在原生的javascript中,有getElementById(按照id属性获取元素)、getElementsByTagName(按照标签名获取元素)等方法,但是并没有类选择器相关方法。因此,编写原生js实现类选择器的方法非常关键。

二、类选择器的实现

通过利用原生js编写类选择器,可以更深入的了解js中的DOM相关操作,下面我们就来看一个简单的类选择器是如何实现的:

function getElementsByClass(classnames){

var classobj = newArray();

var classint = 0;

var tags =document.getElementsByTagName("*");

for(var i in tags){

if(tags[i].nodeType == 1){

if(tags[i].getAttribute("class") == classnames){

classobj[classint] = tags[i];

classint++;

}

}

}

return classobj;

}我们封装了一个getElementsByClass()方法,该方法的效果是:获取所有DOM节点,它们的class属性为选定值,并返回到一个数组中。该方法传递一个参数,即需要选择的class值。

该类选择器的实现方法,首先创建一个空的数组classobj,用来存放获取到的DOM节点。classint变量用来进行索引的表示,方便数组操作。我们利用getElementsByTagName(“*”)方法获取了这个页面上的所有DOM节点(*表示匹配所有)。

取出了所有DOM节点,我们就可以进行判断了。循环遍历取到的每一个节点,如果它的nodeType是1(元素节点),则利用getAttribute(“class”)方法获取节点的class属性值,并与传递进来的class参数进行比对,如果相同,说明是我们想要的节点,存入事先定义好的数组中。最后返回该数组即可。

三、原生js类选择器测试

下面我们来验证一下我们自己编写的类选择器是否正常工作,测试代码如下:

<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />

<title>无标题文档</title>

<scriptsrc="classtest.js"></script>

<script>

window.onload =function(){

var a = getElementsByClass("atest");

a[0].onmouseover = function(){

alert("class!!");

}

}

</script>

<style>

.atest{background:blue;width:200px;height:200px;margin:40px;color:white;}

.btest{background:green;width:200px;height:200px;margin:40px;color:white;}

</style>

</head>

<body>

<pclass="atest">atestAAA</p>

<pclass="btest">atestBBB</p>

</html>该代码我们利用我们自己封装的方法进行了测试,获取class为atest的元素,鼠标滑过后会弹出对话框。

注意我们封装的这个方法返回的是一个数组,就如同jquery中的sibling()方法一样,需要加入索引才能选中元素。如果一个页面有多个选中元素,可以利用数组循环遍历进行相应操作。

封装了一个盒jquery使用方法相同的库,每次写都有新的想法,所有代码的注释已经写到行间的注释了

/**

* Created by Jason on 2016/12/31.

*/

//jquery 的构造函数

function Jquery(arg){

//用来存选出来的元素

this.elemenets=[];

switch(typeof arg){

case 'function' :

domReady(arg);

break;

case 'string' :

this.elements = getEle(arg);

break;

case 'object' :

this.elements.push(arg);

break;

}

}

//DOM ready onload 如果参数是函数,则进行domReady操作

function domReady(fn){

// FF chrome

if(document.addEventListener){

//jquery中已经省略false,false解决低版本火狐兼容性问题

document.addEventListener('DOMContentLoaded',fn,false);

}else{

document.attachEvent('onreadystatechange',function(){

if(document.readyState=='complete'){

fn();

}

});

}

}

function getByClass(oParent,sClass){

//高级浏览器支持getElementsByClassName直接使用

if(oParent.getElementsByClassName){

return oParent.getElementsByClassName(sClass);

}else{

//不支持需要选中所有标签的类名来选取

var res=[];

var aAll=oParent.getElementsByTagName('*');

for(var i=0;i<aAll.length;i++){

//选中标签的全部类名是个str='btn on red'=aAll[i].className 使用正则 reg=/b sClass b/g

var reg= new RegExp('b'+sClass+'b','g');

if(reg.test(aAll[i].className)){

res.push(aAll[i]);

}

}

return res;

}

}

//如果参数是str 进行选择器的操作

function getByStr(aParent,str){

//用来存放选中的元素的数组 这个数组在getEle存在,为了每次执行的时候都需要清空,所以使用局部函数的变量

var aChild=[];

//aParent开始是[document],再执行完getByStr的时候getEle将aParent指向了getByStr函数的返回值aChild数组以确保循环父级下面的所有匹配元素

for(var i=0;i<aParent.length;i++){

switch(str.charAt(0)){

//id选择器 eg: #box 使用document.getElementById选取

case '#':

var obj=document.getElementById(str.substring(1));

aChild.push(obj);

break;

//类选择器 eg: .box 使用上面封装的getByClass选取

case '.':

//由于一个标签可以有多个类选择器 所以需要进行循环选取

var aRes=getByClass(aParent[i],str.substring(1));

for(var j=0;j<aRes.length;j++){

aChild.push(aRes[j]);

}

break;

//今天先简单的编写选择器 这里我们假设除了id和类选择器,就是标签选择器

default:

// 如果是li.red 那么用正则来判断

if(/w+.w+/g.test(str)){

//先选择标签,在选择类选择器 使用类选择器的时候重复选择器函数即可

var aStr=str.split('.');

var aRes=aParent[i].getElementsByTagName(aStr[0]);

var reg=new RegExp('b'+aStr[1]+'b','g');

//循环选取标签,注意外层已经有i的循环

for(var j=0;j<aRes.length;j++){

if(reg.test(aRes[j].className)){

aChild.push(aRes[j]);

}

}

//如果是li:eq(2) 或者 li:first这样的选择器 书写正则是的时候注意()可有可以无为? 有或者没有为* 至少有一个也就是若干个为+ {2,5}这种则为2-5个

}else if(/w+:w+((d+))?/g.test(str)){

//讲str进行整理 [li,eq,2] 或者 [li,first]

var aStr=str.split(/:|(|)/);

//aStr[2]是eq、lt、gt传入的参数,这里使用n来保存

var n=aStr[2];

//在父级下获取所有匹配aStr[0]项的标签

var aRes=aParent[i].getElementsByTagName(aStr[0]);

//这时候会循环判断aStr[1]项是的内容,jquery中经常使用的为eq、lt、gt、even、odd、first、last

switch(aStr[1]){

//如果是eq则把第n项传入aChild数组即可

case 'eq':

aChild.push(aRes[n]);

break;

//如果是lt需要将aRes数组中获取到的小于n的标签循环推入aChild中

case 'lt':

for(var j=0;j<n;j++){

aChild.push(aRes[j]);

}

break;

//如果是gt则和lt相反

case 'gt':

for(var j=n;j<aRes.legth;j++){

aChild.push(aRes[j]);

}

break;

//如果是event的话需要隔数添加,注意jquery中的event是从第0开始循环的

case 'event':

for(var j=0;j<aRes.length;j+=2){

aChild.push(aRes[j]);

}

break;

//如果是odd的和event不同的只是从第1项开始循环

case 'odd':

for(var j=1;j<aRes.length;j+=2){

aChild.push(aRes[j]);

}

break;

//如果是first,则将aRes[0]推入aChild

case 'first':

aChild.push(aRes[0]);

break;

case 'last':

aChild.push(aRes[aRes.length-1]);

break;

}

//属性选择器 eg:input[type=button] 同样适用正则来判断

}else if(/w+[w+=w+]/g.test(str)){

//将属性选择器切成数组 [input,type,button]

var aStr=str.split(/[|=|]/g);

var aRes=aParent[i].getElementsByTagName(aStr[0]);

//在选中标签中选出有aRes[1]的属性

for(var j=0;j<aRes.length;j++){

//把属性值为aRes[2]的标签推入aChild中

if(aRes[j].getAttribute(aStr[1])==aStr[2]){

aChild.push(aRes[j]);

}

}

//标签选择器 p、span

}else{

var aRes=aParent[i].getElementsByTagName(str);

for(var j=0;j<aRes.length;j++){

aChild.push(aRes[j]);

}

}

break;

}

}

return aChild;

}

function getEle(str){

//如果是字符串的话先要去除收尾空格 eg:" on replace index play auto "

var arr = str.replace(/^s+|s+$/g,'').split(/s+/g);

var aChild = [];

var aParent = [document];

for(var i = 0;i<arr.length;i++){

aChild = getByStr(aParent,arr[i]);

aParent = aChild

}

return aChild;

}

//实现jquery $符号的写法

function $(arg){

return new Jquery(arg);

}

jquery插件中this.$element是什么意思

这里的this.$element其实就相当于是赋值,将ele赋值给this.$element 形成构造函数。

看下面这段代码

这里就是改变该ele(元素)的样式(颜色、字体大小、文本的装饰)。

所以就是将ele赋值给this.$element。

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

jquery有几种选择器

2、子选择器 $("parent&gt;child")示例:$("p&gt;span") 选择元素下的所有元素 (注:子选择器只选择直属于父元素的子元素)3、同辈选择器 $("prev+next")描述:选取紧接在prev元素后的next元素,返回元素集合 示例:$(...

jquery插件中this.$element是什么意思

这里的this.$element其实就相当于是赋值,将ele赋值给this.$element 形成构造函数。看下面这段代码 这里就是改变该ele(元素)的样式(颜色、字体大小、文本的装饰)。所以就是将ele赋值给this.$element。

jquery中的$是什么意思

$()代表jquery()函数,是jquery的入口点;$(element)代表通过元素选择器选择元素;$(this)代表当前被点击的元素等等。另外,$符号还可以与其他库一起使用,在jquery与其他库同时引入的情况下,我们可以使用jquery库中的noC...

js中的$()的用法

三种具体用法:1、$()可以是$(expresion),即css选择器、Xpath或html元素,也就是通过上述表达式来匹配目标元素。比如:$("a")构造的这个对象,是用CSS选择器构建了一个jQuery对象——它选择了所有的这个标签。如: $("...

JQuery里面的几种选择器

jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div") 选择所...

jquery选择器中两个class是什么意思?

解释如下:(".class1 .class2") 选择class1元素下class2的元素(中间有空格)(".class1.class2") 选择同时含有class1和class2的元素(中间没有空格)(".class1,.class2") 选择class1或者class2的元素(中间有逗号)...

什么是jquery选择器

var element = $(’img’)[0];匹配表达示的元素中,第一个元素对象将赋给变量element。jQuery选择器的分类 有三种分类:基本选择器,位置选择器和自定义选择器。可以将基本选择器理解为“发现型选择器”,事实上它用于...

jquery中类选择器的功能如何实现实例详解

一、类选择器的概念类选择器,就是通过class属性获取节点。比如一个html结构中,有三个p标签都具有class=”red”的属性,那么类选择器返回的就是这三个p标签。在jquery中,我们可以很方便的通过$(“.red”)这种方式按照类获取节点。但是...

jquery 选择器选择table中的所有input 元素

1.首先,我们打开jquery并创建一个新的HTML文件。2.然后我们创建一个表单表单。3.如图所示,我们可以看到此时,一个元素下的所有输入元素都没有被选中。4.然后介绍jquery.js。5.JQuery:fileselector选择“file”类型的输入...

jquery.validate里的this.optional(element)这个函数什么意思

jQuery.validate的optional(element),用于表单控件的值不为空时才触发验证。当element为空时this.optional(element)=true,用于在该控件为非必填项目时可以通过验证,及条件可以不填但是不能填错格式。例如:jQuery.validator....

Top