jQuery-jQuery引入和jQuery选择器
jQuery引入和jQuery选择器
jQuery引入
先下载jQuery文件,再通过script导入
<!DOCTYPE html> <html> <head> <meta charset=‘utf-8‘/> <title>jQuery</title> </head> <body> <div class="body"> <ul> <li id="login">登录</li> <li id="register">注册</li> </ul> </div> <!--引入jQuery--> <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script> <script> // 利用jQuery提供的功能获取标签文本 var value = $(‘#login‘).text(); console.log(value); </script> </body> </html>
jQuery对象和DOM对象
DOM对象和jQuery对象都为标签提供了各种各种功能,并且两者之间可以进行相互转换。
Dom对象转换jQuery对象:$(dom对象)
jQuery对象转换成Dom对象:jQuery对象[0]
<!DOCTYPE html> <html> <head> <meta charset=‘utf-8‘/> <title>jQuery</title> </head> <body> <div id="content">人生如烟,烟如雾。</div> <!--引入jQuery--> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script> // DOM操作 // 获取文本 var txt = document.getElementById(‘content‘).innerText; document.getElementById(‘content‘).innerText = ‘沙雕‘; // jQuery操作 var text = $(‘#content‘).text(); $(‘#content‘).text(‘二货‘); // Dom对象转换jQuery对象:$(dom对象) $(document.getElementById(‘content‘)) // jQuery对象转换成Dom对象:jQuery对象[0] $(‘#content‘)[0] </script> </body> </html>
选择器
id选择器
HTML代码:
<div id="notMe"> <p>id="notMe"</p> </div> <div id="myDiv">白日依山尽</div>
jQuery代码:
$("#myDiv");
结果:
[<div id="myDiv">id="myDiv"</div> ]
class选择器
HTML代码:
<div class="notMe">窗前明月光</div> <div class="myClass">疑是地上霜</div> <span class="myClass">举头望明月</span>
jQuery代码:
$(".myClass");
结果:
[ <div class="myClass">窗前明月光</div>, <span class="myClass">举头望明月</span> ]
标签选择器
HTML代码:
<div>DIV1</div> <div>DIV2</div> <span>SPAN</span>
jQuery代码:
$("div");
结果:
[ <div>DIV1</div>, <div>DIV2</div> ]
多选择器
HTML代码:
<div>鸡</div> <p class="myClass">我顶你个肺</p> <span>你太美</span> <p class="notMyClass">哈哈哈哈哈哈</p>
jQuery代码:
$("div,span,p.myClass")
结果:
[ <div>鸡</div>, <p class="myClass">我顶你个肺</p>, <span>你太美</span> ]
层级选择器
HTML代码:
<form> <label>Name:</label> <input name="name" /> <div> <label>Newsletter:</label> <input name="newsletter" /> </div> </form> <input name="none" />
jQuery代码:
$("form input")
结果:
[ <input name="name" />, <input name="newsletter" /> ]
属性选择器
HTML代码:
<input type="checkbox" name="newsletter" value="Hot Fuzz" /> <input type="checkbox" name="newsletter" value="Cold Fusion" /> <input type="checkbox" name="accept" value="Evil Plans" />
jQuery代码:
$("input[name=‘newsletter‘]")
结果:
[ <input type="checkbox" name="newsletter" value="Hot Fuzz" />, <input type="checkbox" name="newsletter" value="Cold Fusion" /> ]
表单选择器
HTML代码:
<form> <input type="button" value="Input Button"/> <input type="checkbox" /> <input type="file" /> <input type="hidden" /> <input type="image" /> <input type="password" /> <input type="radio" /> <input type="reset" /> <input type="submit" /> <input type="text" /> <select> <option>Option</option> </select> <textarea> </textarea> <button>Button</button> </form>
jQuery代码:
$(":text") // 找到所有input标签且type=text的标签 //$(":input") //找到所有input标签 //$(":password") //找到所有input且type=password的标签 //$(":radio") //找到所有input且type=radio的标签 //$(":checkbox") //找到所有input且type=checkbox的标签
结果:
[ <input type="text" /> ]