jquery的选择器有哪些?如何对元素取值和设置值

时间: 2018-04-16阅读: 2109标签: 选择器


jquery基本选择器

$("*")                                     //选择文档中的所有的元素
$("div")                                   //选择所有的div标签元素,返回div元素数组 
$("name")                                  //通过name选控件
$("#id")                                   //通过id选控件,id重复的话只选第一个
$(".class")                                //选择使用myClass类的css的所有元素


jquery层叠选择器  

$("form input")                            //选择所有的form元素中的input元素
$("#myid > *")                             //选择id值为myid的所有的子元素
$("label + input")                         //选择所有的label元素后面的input元素
$("#somediv~[title]")                      //选择id为somediv的对象后面所有带有title属性的元素


jquery基本过滤选择器  

$("tr:first")                              //选择所有tr元素的第一个
$("tr:last")                               //选择所有tr元素的最后一个
$("input:not(:checked) +span")             //选择没有checked的input元素
$("tr:even")                               //选择所有的tr元素的第0,2,4...个元素 (注意:因为所选择的多个元素时为数组,所以序号是从0开始)
$("tr:odd")                                //选择所有的tr元素的第1,3,5...个元素 
$("td:eq(2)")                              //选择所有的td元素中序号为2的那个td元素
$("td:gt(4)")                              //选择td元素中序号大于4的所有td元素 
$("td:lt(4)")                              //选择td元素中序号小于4的所有的td元素
$(":header")                               //选择所有h1,h2,h3一类的header标签
$("div:animated")                          //匹配所有正在执行动画效果的元素


jquery内容过滤选择器

$("div:contains('John')")                  //选择所有div中含有John文本的元素
$("td:empty")                              //选择所有的为空(也不包括文本节点)的td元素的数组 
$("div:has(p)")                            //选择所有含有p标签的div元素
$("td:parent")                             //选择所有的以td为父节点的元素数组


jquery可视化过滤选择器  

$("div:hidden")                            //选择所有的被hidden的div元素
$("div:visible")                           //选择所有的可视化的div元素


jquery属性过滤选择器  

$("div[id]")                               //选择所有含有id属性的div元素
$("input[name='newsletter']")              //选择所有的name属性等于'newsletter'的input元素
$("input[name!='newsletter']")             //选择所有的name属性不等于'newsletter'的input元素
$("input[name^='news']")                   //选择所有的name属性以'news'开头的input元素
$("input[name$='news']")                   //选择所有的name属性以'news'结尾的input元素
$("input[name*='man']")                    //选择所有的name属性包含'news'的input元素
$("input[id][name$='man']")                //可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且那么属性以man结尾的元素


jquery子元素过滤选择器  

$("ul li:nth-child(2)")                    //选择ul下的第三个li
$("ul li:nth-child(odd)")                  //选择ul下的第1,3,5... ...个li
$("ul li:nth-child(3n + 1)")               //选择ul下的第3n+1个li
$("div span:first-child")                  //返回所有的div元素的第一个子节点的数组
$("div span:last-child")                   //返回所有的div元素的最后一个节点的数组
$("div button:only-child")                 //返回所有的div中只有唯一一个子节点的所有子节点的数组
$(this).find("img")                        //返回当前元素的[img]子元素


jquery表单元素选择器  

$(":input")                                //选择所有的表单输入元素,包括input, textarea, select 和 button 
$(":text")                                 //选择所有的text input元素 
$(":password")                             //选择所有的password input元素
$(":radio")                                //选择所有的radio input元素
$(":checkbox")                             //选择所有的checkbox input元素
$(":submit")                               //选择所有的submit input元素
$(":image")                                //选择所有的image input元素
$(":reset")                                //选择所有的reset input元素
$(":button")                               //选择所有的button input元素
$(":file")                                 //选择所有的file input元素
$(":hidden")                               //选择所有类型为hidden的input元素或表单的隐藏域


jquery表单元素过滤选择器

$(":enabled")                              //选择所有的可操作的表单元素
$(":disabled")                             //选择所有的不可操作的表单元素 
$(":checked")                              //选择所有的被checked的表单元素
$("select option:selected")                //选择所有的select 的子元素中被selected的元素


jquery综合选择器

$("input[@name =S_03_22]").parent().prev()          //选择一个 name=”S_03_22″的input text框的上一个td的text值
$("input[@name ^='S_']").not("[@name $='_R']")      //选择名字以”S_”开始,并且不是以”_R”结尾的
$("input[@name ='radio_01'][@checked]")             //一个名为 radio_01的单选框(checked)
$("#id, a, .bgRed")


jquery相对选择器

$(this).parent()                       //选择当前控件的父元素   
$(this).prev()                         //选择当前控件的前一个元素
$(this).prev().prev()                  //选择当前控件的前前一个元素
$(this).next()                         //选择当前控件的后一个元素
$(this).next().next()                  //选择当前控件的后后一个元素
$(this).parent().next()                //选择当前控件的父元素的后一个元素
$("body div")                          //选择<body>内所有<div>
$("body>div")                          //选择<body>内子<div>元素
$(".one+div")                          //选择class="one"的下一个<div>元素
$("#two~div")                          //选择id="two"的后面所有<div>元素


jquery取控件值

$("#ID").val();                                    //所选元素的文本内容
$("#ID").text();                                   //表单字段的值
$("#ID").html();                                   //所选元素的内容(包括 html 标记)
$('input:radio[name="CountryID"]:checked').val()   //单选框
$("li").attr("id")                                 //控件的id
$("#ID").attr("class")                             //控件的属性值
$("#ID").css("background-color")                   //控件的样式的属性值
$("li").click(function(){   
    var index = $("li").index($(this)[0]);         //当前控件在所有Li控件中的位置index
}); 
$("#ddlRegType").find("option:selected").text();    //获取select 选中的 text
$("#ddlRegType ").val();                            //获取select选中的 value
$("#ddlRegType ").get(0).selectedIndex;             //获取select选中的索引
$('#Active').is(':checked')                         //判断复选框是否被选中


jquery设控件值  

$("#ID").val("xxx");                                       //设置所选元素的文本内容(下拉框选择也适用)
$("#ID").text("xxx");                                      //设置表单字段的值
$("#ID").html("xxx");                                      //设置所选元素的内容(包括 html 标记)
$("#ID").attr("class", "unCheckedTab");                             //class属性
$("#ID").removeClass().addClass("green button");                    //class属性
$("#ID").css("属性", "值");                                         //添加css样式
$("#ID").css("background-color", "#CCC");                           //css样式
$('#divStreetAddress1').show();                                     //设为显示
$('#divStreetAddress2').hide();                                     //设为隐藏
$("#IncludeTransitCover").attr("disabled", "disabled");             //设为只读
$("#IncludeTransitCover").removeAttr("disabled");                   //去掉只读
$("#selpmodel").removeAttr("disabled").selectmenu("enable");        //去掉只读(下拉框)
$("#IncludeTransitCover").attr("checked", "checked");               //单选框选择
$("#IncludeTransitCover").removeAttr("checked");                    //单选框不选择
$('.div').animate({ left: '-=' + 1000 }, 'fast');                   //控件向左滑动1000PX(可以是一个控件,也可以是一组控件)
$('.div').animate({ left: '+=' + 1000 }, 'fast');                   //控件向右滑动1000PX
var count=$("#ddlRegType option").length;                           //设置select 选中的text
for(var i=0;i<count;i++) {
    if ($("#ddlRegType ").get(0).options[i].text == text) { 
        $("#ddlRegType ").get(0).options[i].selected = true; 
        break; 
    } 
}
$("#ddlRegType ").attr("value","Normal");                           //设置select 选中的value
$("#ddlRegType ").val("Normal");
$("#ddlRegType ").get(0).value = value;
$("#ddlRegType ").get(0).selectedIndex=index;                       //设置select 选中的索引
$("#select_id").append("<option value='Value'>Text</option>");      //添加一项option
$("#select_id").prepend("<option value='0'>请选择</option>");        //在前面插入一项option
$("#select_id option:last").remove();                              //删除索引值最大的Option
$("#select_id option[index='0']").remove();                        //删除索引值为0的Option
$("#select_id option[value='3']").remove();                        //删除值为3的Option
$("#select_id option[text='4']").remove();                         //删除TEXT值为4的Option
$("#ddlRegType ").empty();  清空 Select
$('#Suburb').removeAttr('disabled')                            //下拉框:取消只读属性 -> 清空下拉框内容 -> 添加下拉框内容
            .empty()
            .append($('<option></option>').val(data.Suburb)
           .html(data.Suburb));
$("#ID").load("*.html");                                       //载入一个文件 页面
$("p").empty();


来源:https://blog.csdn.net/qq_36330228/article/details/79947583

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/638

javascript选择器有哪些?

JavaScript选择器常用的有getElementById()、getElementsByName()、getElementsByTagName()、getElementsByClassName()、querySelector()、querySelectorAll()。

css 选择器符号

空格:后代选择器,表示div元素里面所有的p元素。> 子选择器:表示div元素里面所有的子代(不含孙代及以后)p元素,~兄弟元素选择器:表示.cls元素往后的同级的p元素

css兄弟选择器(+ 和 ~)的使用和区别

这篇文章主要讲解css中兄弟选择器的使用,以及+和~的区别有哪些?+ 选择器:如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器。 ~ 选择器:作用是查找某一个指定元素的后面的所有兄弟结点。

jQuery选择器

选择器是jQuery的根基,在jQuery中,对事件处理,遍历DOM和Ajax操作都依赖于选择器。不仅能简化代码,而且可以达到事半功倍的效果.jQuery的优点:1.简洁的语法,2.完善的事件处理机制

微信小程序文档没写支持, 但是实际支持的选择器有哪些?

目前支持的选择器有,在实践中我发现, 除了文档上说的几种选择器, 经过测试发现其实还有几种支持的选择器没有列举!还支持哪些选择器?

CSS选择器及优先级

!important > 内联 > ID选择器 > 类选择器 > 标签选择器。优先级是由A、B、C、D的值来决定的,其中它们的值计算规则如下:如果存在内联样式,那么A = 1, 否则A = 0;B的值等于ID选择器出现的次数;

巧用CSS属性值正则匹配选择器

这3种属性选择器是字符匹配,而非单词匹配。其中,尖角符号^、美元符号$以及星号*都是正则表达式中的特殊标识符,分别表示前匹配、后匹配和任意匹配。利用这些选择器,纯CSS就可以做出很炫酷的功能。

CSS选择器_伪元素选择器之处理父元素高度及外边距溢出

最小高度为100px的父元素,嵌套一个300px高度的子元素,当子元素浮动时,父元素高度并不随之升高。在某些特殊的条件下,为子元素设置上外边距时,有可能会作用到父元素上。

CSS 伪选择器 focus-within 介绍

CSS中的 :focus-within 伪选择器可有点“不寻常”,尽管它的名称看上去很简单,而且相当直观。但它的解释是:选择一个包含具有:focus 的任何子元素的元素。有点绕是不是,但仔细读应该也能理解,下面通过具体的例子你就更能理解了

css怎么选择父元素下的某个元素?

css可以通过一些选择器来实现选择父元素下某个元素的效果。:first-child p:first-child(first第一个 child子元素)(找第一个子元素为p):last-child p:last-child(last倒数 child子元素)(找倒数第一个子元素为p)

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广