JQ与JS节点转换
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-3.4.1.min.js"></script>
</head>
<style>
ul{
list-style: none;
}
.red{
color: red;
}
.blue{
color: blue;
}
</style>
<body>
<h1>dom节点初识</h1>
<ul id="myUl">
<li class="red">1</li>
<li class="blue">2</li>
<li class="red">3</li>
<li class="blue">4</li>
</ul>
<form action="">
用户名：<input name="username" type="text"><br>
密码：<input name="pwd" type="password"><br>
爱好：<input name="ins" type="checkbox" value="sing">唱歌
<input name="ins" type="checkbox" value="code">编程<br>
<select name="sl" id="">
<option value="">北京</option>
<option value="">上海</option>
<option value="">南京</option>
</select><br>
<p><button type="submit">提交</button></p>
</form>
<script>
$(document).ready(function(){
// console.log(document.getElementById("myUl"));
//1.jq转js
var $myUl = $("#myUl");
console.log($myUl[0]);//通过下标的方式将jq节点转为具体的js原生节点
//2.js转jq
var myUl = document.getElementById("myUl");
console.log($(myUl));//将原生节点直接作为选择器
});
</script>
</body>
</html>
节点索引与内容获取
1、text() 设置或返回所选元素的文本内容 2、html() 设置或返回所选元素的内容(包括HTML标记) 3、val() 设置或返回表单字段的值
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-3.4.1.min.js"></script>
</head>
<style>
ul{
list-style: none;
}
.red{
color: red;
}
.blue{
color: blue;
}
</style>
<body>
<h1>dom节点初识</h1>
<ul id="myUl">
<li class="red">1</li>
<li class="blue">2</li>
<li class="red" id="Li3">3</li>
<li class="blue">4</li>
</ul>
<form action="">
用户名：<input name="username" type="text"><br>
密码：<input name="pwd" type="password"><br>
爱好：<input name="ins" type="checkbox" value="sing">唱歌
<input name="ins" type="checkbox" value="code">编程<br>
<select name="sl" id="">
<option value="">北京</option>
<option value="">上海</option>
<option value="">南京</option>
</select><br>
<p><button type="submit">提交</button></p>
</form>
<script>
$(document).ready(function(){
//通过index方法可以获得某个节点在jq节点集合中的索引
/*var index = $("li").index($("#Li3"));//可以使用JQ节点获取索引
console.log(index);*/
/*var index = $("li").index(document.getElementById("Li3"));//可以使用原生获取索引
console.log(index);*/
//alert($("h1").text("改变h1的文本内容"));//就是js原生中的innerText
/*$("h1").text("<div>jq节点非常棒</div>");//将会把所有字符显示出来，包括html标记
$("h1").html("<div>jq节点非常棒</div>");//html标记不会显示而作为标记进行处理*/
$(":button")[0].onclick = function (){
alert($(":input").val());
}
});
</script>
</body>
</html>
