目录
元素选择器
列：段落隐藏
#id选择器
列：
.class选择器
列：
CSS选择器
列：
*选取所有元素
列：#选择器、*选择器、类选择器、元素选择器练习
this选取当前html元素
列：选择器练习
列：实现样式的设置
元素选择器
$("p"); //在页面中选取所有 <p> 元素
列：段落隐藏
<script src="///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="///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="///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="///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="///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="///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>
