JQuery中选择元素的方法:

document.getElementById(‘div1‘);
document.getElementsByTagName(‘div‘);
getByClass(document,‘box‘);

$(‘#div1‘).css(‘background‘,‘red‘);
$(‘div‘).css(‘background‘,‘red‘);
$(‘.box‘).css(‘background‘,‘red‘);

$(‘li:eq(2)‘).css(‘background‘,‘black‘);//所选择的元素集合中下标为2的元素,下标从0开始;
$(‘li:odd‘).css(‘background‘,‘red‘);//匹配下标为基数的元素
$(‘li:even‘).css(‘background‘,‘red‘);//下标为偶数的元素

$(‘li‘).filter(‘.box‘).css(‘background‘,‘red‘);//className为box的li元素;

$(‘li‘).filter(‘[title=hello]‘).css(‘background‘,‘red‘);

1.基本元素选择器

$(“p”)            //选取<p>元素

$(“p.info”)      //选取所有class=”info”的<p>元素

$(“p#demo”)      //选取id=”demo”的第一个<p>元素

分层选择器:使用这种选择器时,需要传入多个值,并用空格或大于号分隔。例如:

$(“div input”)        //选择div下所有的input

$(“div > input”)     //选择父元素(div)下的子元素(input)

2、基本条件选择器

使用这种选择器时,需要在元素的选择符后加上基本条件运算符,这些条件运算符都是jQuery内置的运算符。例如:
复制代码

$(“p:first”)      //选择第一个段落

$(“p:last”)       //选择最后一个段落

$(“tr:even”)      //选择偶数表格行

$(“tr:odd”)      //选择奇数表格行

$(“input:not(:checked)”)   //选择所有未被选中的元素

$(“tr:eq(1)”)      //选择索引值为1的表格行

$(“tr:gt(0)”)      //选择索引值大于0的表格行

$(“tr:lt(2)”)      //选择索引值小于2的表格行

$(“:header”)      //选择所有标题元素

$(“:animated”)      //选择所有正在执行动画的元素

3、内容条件选择器

使用这种选择器时,需要在元素的后面加上内容筛选运算符。例如: $(“div:contains(„John?)”)   //选择包含‘John’文本的层元素

$(“td:empty”)      //选择不包含文本或者子元素的表格单元

$(“div:has(p)”)     //选择包含段落元素的层元素

$(“td:parent”)      //选择包含文本或者子元素的表格单元

4、可见性条件选择器

使用这种选择器时,需要在元素后面加上可见性条件。例如:

$(“tr:hidden”)      //选择所有隐藏的表格行

$(“tr:visible”)      //选择所有可见的表格行

5、属性选择器

使用这种选择器时,需要利用元素属性并使用一定条件来进行选择。例如: $(“div[id]”)      //选择具有id属性的层
复制代码

$(“input[name=?newletter?]”)  //选择具有属性name并且属性值为‘newletter’的表单输入元素

$(“input[name!=?newsletter?]”) //选择具有属性name并且属性值不为‘newletter’的表单输入元素

$(“input[name^=?news?]”)  //选择具有属性name并且属性值以‘news’为起始内容的表单输入内容

$(“input[name$=?letter?]”)  //选择具有属性name并且属性值以‘letter’为结束内容的表单输入元素

$(“input[name*=?man?]”)   //选择具有属性name并且属性值包含‘man’内容的表单输入元素

$(“input[id][name$=?man?]”)  //选择具有属性id和name并且name的值以‘man’为结束内容的表单输入内容

复制代码

6、子元素选择器

使用这种选择器时,需要加入子元素的选择条件。例如:
复制代码

$(“ul li:nth-child(2)”)    //选择第2个列表项

$(“ul li:nth-child(even)”)   //选择偶数索引列表项

$(“ul li:nth-child(odd)”)   //选择奇数索引列表项

$(“ul li:nth-child(3n)”)   //选择索引值为3的倍数的列表项

$(“ul li:first-child”)    //选择第一个列表项

$(“ul li:last-child”)    //选择最后一个列表项

$(“ul li:only-child”)    //选择列表出现且仅出现一个的列表项

复制代码

7、表单元素选择器

使用这种选择器时,需要加入代表不同表单元素类型的标示符。例如:
复制代码

$(“:input”)       //选择所有input,textarea,select和button元素

$(“:text”)       //选择单行文本框

$(“:password”)     //选择密码框

$(“:radio”)       //选择单选按钮

$(“:checkbox”)     //选择复选框

$(“:submit”)      //选择提交按钮

$(“:image”)      //选择所有图像域

$(“:reset”)       //选择重置按钮

$(“:button”)      //选择普通按钮

$(“:file”)       //选择文件域

$(“:hidden”)      //选择隐藏域

$(“input:enabled”) //选择所有可用元素

$(“input:disabled”)    //选择所有不可用元素

$(“input:checked”)  //选择所有被选中的复选框和单选按钮

$(“select option:selected”)  //选择所有被选中的option

时间: 2024-08-06 11:48:03

JQuery中选择元素的方法:的相关文章

jQuery选择器选择元素的方法完整篇

    1. 先说说通过位置选择的几个操作: :first:默认情况下是相对整个页面来说的第一个,如:li:first表示整个页面的第一个li元素,而ul li:first表示整个页面的第一个li元素,并且是在ul下的子元素: :last:同上了,只是是最后一个而已: :first- child:为每个父元素匹配第一个子元素,如li:first-child返回每个ul的第一个li元素.可以这样理解,页面中的元素有相同的父元素 的,并且里面又包含li元素的,那么就取第一个li元素,每个子类集合都要

jquery iframe父子框架中的元素访问方法

jquery教程 在web开发中,经常会用到iframe,难免会碰到需要在父窗口中使用iframe中的元素.或者在iframe框架中使用父窗口的元素js在父窗口中获取iframe中的元素1.格式:window.frames["iframe的name值"].document.getElementById("iframe中控件的ID").click();实例:window.frames["ifm"].document.getElementById(&

jQuery中的事件绑定方法

在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知道,不管你用的是(live/ bind / delegate)之中那个方法,最终都是jQuery底层都是调用on方法来完成最终的事件绑定;.unbind(), .die(), .undelegate(),也是一样的都是通过.off()来实现的; 因此从某种角度来讲除了在书写的方便程度及习惯上挑选,不

jquery中html 与 text方法的区别

jquery中html 与 text方法的区别 24 May 2012/in 网站设计和开发 /by Bruce 接鉵jquery的时间并不长,以前都是用直接用js写的,现在发现在jquery这个框架用起来很方便,不但代码量少了,使用也比较简单,对于浏览器的兼容问题也不用担心,在使用的过程中也会遇到一些疑问,在html标签中附加子标签时所用的方法html()与text()的区别. 通常在用jquery写ajax时,都会用到html()这个方法,而不用text()这个方法,他们之间有什么区别呢?

JQuery中each()的使用方法说明

对于jQuery对象,只是把each方法简单的进行了委托:把jQuery对象作为第一个参数传递给jQuery的each方法.换句话说:jQuery提供的each方法是对参数一提供的对象的中所有的子元素逐一进行方法调用 each(callback) 以每一个匹配的元素作为上下文来执行一个函数. 意味着,每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元素(每次都是一个不同的匹配元素).而且,在每次执行函数时,都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的

详细介绍jQuery淡入淡出元素的方法

转载请注明出处:http://www.uphtm.com/js/147.html 为了达到更为生动的效果,可以把一个元素淡出或淡入,在任何一种情况下,都只是随着时间来改变元素的透明度.jQuery提供了3个和淡入淡出相关的函数: ·fadeIn()使得一个隐藏的元素淡入视野.首先,元素占据的空间出现在页面上(这可能意味着页面上的其他元素要移走):然后,元素逐渐地变得可见.如果元素在页面上已经可见,则这个函数没有任何效果.如果没有提供一个速度值,元素使用“常规”设置来淡入(400毫秒). ·fad

jQuery基本选择 元素

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>ddd</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script l

60秒验证码倒计时js代码 js样式代码 方块上下左右随机移动(定时器) js中获取元素的方法 js中表单提交

60秒验证码倒计时js代码 <script type="text/javascript"> var countdown=60; function settime(val) { if (countdown == 0) { //removeAttribute() 方法删除指定的属性. disabled属性规定应该禁用 input 元素. val.removeAttribute("disabled"); val.value="免费获取验证码"

jQuery 中get 和post 方法传值注意事项

用 jQuery 的都知道,jQuery 的 get 和 post 方法有三个参数:地址,数据 和回调函数,但我们知道地址也可以跟随数据的(形如:get_data.php?v1=1&v2=2),而且第二个参数可以省略,即第二个参数可 以直接写回调函数,那么数据写在地址后面和写在 data 参数里有什么区别呢? 刚刚做了几个实验,看看下面的代码就清楚了:以下内容需要回复才能看到 jquery_data.php echo "post: ";print_r($_POST);echo