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" /> ]