元素选择器

列：段落隐藏

#id选择器

列：

.class选择器

列：

CSS选择器

列：

*选取所有元素

列：#选择器、*选择器、类选择器、元素选择器练习

this选取当前html元素

列：选择器练习

列：实现样式的设置

元素选择器

$("p"); //在页面中选取所有 <p> 元素

列：段落隐藏

     <script src="//libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script>$(function() {$("button").click(function() {$("p").hide();});});</script></head><body><h2>这是一个标题</h2><p>这是一个段落。</p><p>这是另一个段落。</p><button>点我</button></body>

结果：

#id选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素

$("#test")

列：

<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(function(){$("button").click(function(){$("#test").hide();});
});
</script>
</head><body>
<h2>这是一个标题</h2>
<p>这是一个段落</p>
<p id="test">这是另外一个段落</p>
<button>点我</button>
</body>

.class选择器

jQuery 类选择器可以通过指定的 class 查找元素。

$(".test")

列：

<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(function(){$("button").click(function(){$(".test").hide();});
});
</script>
</head>
<body><h2 class="test">这是一个标题</h2>
<p class="test">这是一个段落。</p>
<p>这是另外一个段落。</p>
<button>点我</button>
</body>

CSS选择器

$("p").css("background-color","red");

列：

     <script src="//libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script>$(function() {$("button").click(function() {$("p").css('background-color','red');});});</script></head><body><h2>这是一个标题</h2><p>这是一个段落。</p><p>这是另一个段落。</p><button>点我</button></body>

结果：

*选取所有元素

选取body标签中的所有元素

     <script src="//libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script>$(function() {$("button").click(function() {$("*").hide();});});</script></head><body><h2>这是一个标题</h2><p>这是一个段落。</p><p>这是另一个段落。</p><button>点我</button></body>

列：#选择器、*选择器、类选择器、元素选择器练习

结果：

html代码：

 <body><input type="button" id="btn1" value="标签选择器" /><input type="button" id="btn2" value="类选择器" /><input type="button" id="btn3" value="元素选择器" /><input type="button" id="btn4" value="*全选选择器" /><input type="button" id="btn5" value="任意多个选择器" /><hr /><div id="one"><div class="mini">111</div></div><div id="two"><div class="mini">222</div><div class="mini">333</div></div><span id="four">我是span</span></body>

jQuery代码

<script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
<script>$(function(){$('#btn1').click(function(){//id选择器$('#one').css('background-color','pink');});$('#btn2').click(function(){//类选择器$('.mini').css('background-color','pink');});$('#btn3').click(function(){//元素选择器$('span').css('background-color','red');}); $('#btn4').click(function(){//全选选择器$('*').css('background-color','aqua');});    $('#btn5').click(function(){$("#four,hr,#two").css("background-color","pink");});});
</script>

this选取当前html元素

<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){$("button").click(function(){$(this).hide();});
});
</script>
<h2>这是标题</h2>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<button>点我</button>

列：选择器练习

<html><head><meta charset="UTF-8"><style type="text/css">#box{display: none;width:200px;height: 200px;border:1px solid red;background: green;}</style><title></title><script src="js/jquery-2.0.2.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){//id选择器$(".box").css('background','red');var allObject=$('*'); alert(allObject)for(i=0;i<allObject.length;i++){alert(allObject[i].tagName)//获取所有元素}//选择多个元素设置背景$('.box,span').css('background','red');//后代(包括子，孙...元素) $('div span').css('background','red');//div中的所有span元素变红//后代（子元素）$('div>span').css('background','red');//紧跟着后面$('div+span').css('background','red');//只要跟着div后面的所有的span元素$('div~span').css('background','red');//li中第一个元素$('li:first').css('background','red');//li中除了第一个元素$('li:not(li:first)').css('background','red');//li中的偶数元素$('li:even').css('background','red');//li中大于1的元素$('li:gt(1)').css('background','red');//获取根元素$(":root").css("background-color","yellow");//整个html文件变黄色//包含 $('span:contains("span")').css('background','red');//span中的所有span变红//找li中内容为空的元素$('li:empty').html('kkkk');//找li中内容为空的元素，给他设值为kkkk$('li:first').html();取li中的值//div中含有span的元素变红$('div:has(span)').css('background','red');//获取隐藏的元素（div）的值alert($('div:hidden').html());//获取隐藏域的值alert($('input:hidden').val());//alert($(':input').length);alert($(':text').length) //结果：2//获取文本框的值alert($('#username').val());alert($('#age').val());//获取复选框的值alert($(':input[name="newsletter"]').attr('checked',true));});</script></head><body><input type="checkbox" name="newsletter" value="Hot Fuzz" /><input type="checkbox" name="newsletter" value="Cold Fusion" /><input type="checkbox" name="xxx" value="Cold Fusion" /><input type="hidden" value="9999" />用户名:<input type="text" value="容儿" id="username" />年龄:<input type="text" value="22" id="age"/>密码:<input type="password" value="fendou" /><ul><li></li><li>aaaa</li><li>bbbb</li><li>cccc</li><li>dddd</li><li>eeee</li></ul><div class="box">mydiv</div><span>span1</span><div><span>span2</span><p><span>span3</span></p></div><span>span4</span><span>span5</span><div id="box">divdiv</div></body>
</html>

列：实现样式的设置

     <style type="text/css">*{margin: 0;}.div1{position:absolute;width:200px;height: 200px;top:20px;left:10px;background-color: blue;}.div2{position:absolute;width:100px;height: 100px;top:50px;background-color: red;}</style><script type="text/javascript" src="js/jquery-2.0.2.min.js" ></script><script>$(function(){//设置第二个p标签的样式$('p:eq(1)').css({color:"green",background:"pink",width:300,height:100})//offset() 相对页面左上角的坐标//position()相对父元素在左上角的坐标$('#btn1').click(function(){var offset1=$('.div1').offset();console.log(offset1.left,offset1.top)var offset2=$('.div2').offset();console.log(offset2.left,offset2.top)var p1=$('.div1').position();console.log(p1.left,p1.top)var p2=$('.div2').position();console.log(p2.left,p2.top)});});</script></head><body><p style="color:red">ppppp</p><p style="color:blue">ppppp</p><div class="div1"><div class="div2">测试offset</div></div><button id="btn1">测试offset和position</button><button id="btn2">设置offset</button></body>
</html>

jquery选择器、标签选择器、类选择器、元素选择器、*选择器、this关键字相关推荐

CSS：基本概念、选择器、伪类伪元素
基本概念 HTML使用结构化标记的理由:易于建立内容索引.增加文档可用性.增加可访问性.易于维护. 元素(element):文档结构的基础,每个元素生成一个框(box)其中包含元素的内容, 元素的两 ...
js获取Id，标签，类的几种选择器
//获取标签方法function $(TagName){return typeof TagName==="string" ? document.getElementsByTagNa ...
jquery兄弟标签_JQ获取兄弟元素的值
在之前有遇到过table中JQ获取兄弟元素的值,写法是var id = $(this).parents("tr").find(".id").text(); 然后 ...
jquery兄弟标签_jQuery----获取兄弟元素的方法
① $(this).next(): 获取的是当前元素的下一个兄弟元素 ②$(this).nextAll(); 获取的是当前元素的后面的所有的兄弟元素 ③$(this).pre ...
设置某个元素的标签内容、设置元素的样式、层次选择器、总结选择器
点击按钮设置某个元素的标签内容 <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
CSS选择器详解（一）常用选择器
目录类型选择器类选择器 ID选择器伪类伪元素类型选择器通过类型选择器可以选择某一类型的html标签,并对其使用样式. 语法: selector {property1: value; pro ...
html css子标签,HTML+CSS系列:CSS选择器(标签、ID、类、通配符、后代、子元素、并集、伪类）...
一.标签选择器 Document h1 { color: red; } h2{ color: green; } Hello World! Hello World! Hello ! Hello ! 二. ...
jquery兄弟标签_jquery 子元素及兄弟元素选择器
.children() 获得匹配元素集合中每个元素的子元素,选择器选择性筛选. list item 1 list item 2 ss list item 3 $(function(){ $('ul') ...
jQuery查找标签--选择器,筛选器,模态对话框, 左侧菜单栏
查找标签选择器: 基本选择器(同css) id选择器 $("#id")标签选择器 $('tagName')class选择器 $(".className")配合 ...
jQuery对象，jQuery查找标签，层级选择器，属性选择器，表单筛选器，操作节点标签事件...
目录 jQuery jQuery介绍 jQuery的优势 jQuery版本 jQuery内容: jQuery对象 jQuery基础语法查找标签基本选择器层级选择器: 基本筛选器: 属性选择器表 ...

jquery选择器、标签选择器、类选择器、元素选择器、*选择器、this关键字

元素选择器

列：段落隐藏

#id选择器

列：

.class选择器

列：

CSS选择器

列：

*选取所有元素

列：#选择器、*选择器、类选择器、元素选择器练习

this选取当前html元素

列：选择器练习

列：实现样式的设置

jquery选择器、标签选择器、类选择器、元素选择器、*选择器、this关键字相关推荐

最新文章

热门文章