$("*") //选择文档中的所有的元素
$("div") //选择所有的div标签元素,返回div元素数组
$("name") //通过name选控件
$("#id") //通过id选控件,id重复的话只选第一个
$(".class") //选择使用myClass类的css的所有元素
$("form input") //选择所有的form元素中的input元素
$("#myid > *") //选择id值为myid的所有的子元素
$("label + input") //选择所有的label元素后面的input元素
$("#someDiv~[title]") //选择id为someDiv的对象后面所有带有title属性的元素
$("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") //匹配所有正在执行动画效果的元素
$("div:contains('John')") //选择所有div中含有John文本的元素
$("td:empty") //选择所有的为空(也不包括文本节点)的td元素的数组
$("div:has(p)") //选择所有含有p标签的div元素
$("td:parent") //选择所有的以td为父节点的元素数组
$("div:hidden") //选择所有的被hidden的div元素
$("div:visible") //选择所有的可视化的div元素
$("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结尾的元素
$("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]子元素
$(":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元素或表单的隐藏域
$(":enabled") //选择所有的可操作的表单元素
$(":disabled") //选择所有的不可操作的表单元素
$(":checked") //选择所有的被checked的表单元素
$("select option:selected") //选择所有的select 的子元素中被selected的元素
$("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")
$(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>元素
$("#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') //判断复选框是否被选中
$("#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
arget作为目标伪类选择器,是css3中的新特性之一。URL 带有后面跟有锚名称 #,指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。:target 选择器可用于选取当前活动的目标元素。
这篇文章主要讲解css中兄弟选择器的使用,以及+和~的区别有哪些?+ 选择器:如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器。 ~ 选择器:作用是查找某一个指定元素的后面的所有兄弟结点。
在CSS中 :focus-within 是一个伪类,CSS中伪类:focus-within能非常方便处理获取焦点状态, 当元素本身或其后代获得焦点时,:focus-within伪类的元素就会有效。
vue项目中,当<style>标签有scoped属性时,它的 CSS 样式只作用于当前组件中的元素,父组件的样式将不会渗透到子组件中。如果你希望 scoped 样式中的一个选择器能够作用得更深,例如影响子组件
空格:后代选择器,表示div元素里面所有的p元素。> 子选择器:表示div元素里面所有的子代(不含孙代及以后)p元素,~兄弟元素选择器:表示.cls元素往后的同级的p元素
总结30个CSS3选择器:*选择器是选择页面上的全部元素,上面的代码作用是把全部元素的margin和padding设为0,最基本的清除浏览器默认样式的方法。
基础选择器是选择器的所有选择器的基本组成元素,也最简单,包含如下5个类别:ID选择器,标签选择器,类选择器,属性选择器,通配选择器
CSS3 中有很多表示元素序号的选择器,有以下几种:first-child、:first-of-type、:last-of-type、:only-of-type、:only-child、:nth-child(n)、:nth-last-child(n)、:nth-of-type(n)、:nth-last-of-type(n)、:last-child
目前支持的选择器有,在实践中我发现, 除了文档上说的几种选择器, 经过测试发现其实还有几种支持的选择器没有列举!还支持哪些选择器?
今天就讲一下css选择器:nth-child()和:nth-of-type()的使用。:nth-child()和:nth-of-type()的支持度,所有主流浏览器均支持:nth-child()和:nth-of-type()选择器,除了 IE8 及更早的版本。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!