JQuery理解
Jquery其实是对JS的一个初步封装，简化了JavaScript的语法，并且丰富了一些功能，后面其实对还有在Jquery基础上进行封装发展的技术，其实还是对Javascript的封装，只不过更高级一点。使用更方便，但是封装的程度更高，不容易看到实现过程。
Jquery使用前提
一定要先引入Jquery的JS脚本源码，否则无法使用
在head中引用，注意版本，有些版本可能不支持某些功能
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
JQuery 语法和选择器
这里只说明部分使用方法，因为实在是太多了，可以直接到Jquery官网看到更多的使用方法和说明或者下载API文档来看。
使用方法直接写到注释里面，边试边看
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// $(function(){ //网页加载时运行的方法
// alert($("*").length)
// alert($("#in2").length)
//
// $("#in2").val("in2value") //类选择器和id选择器
//
// alert($(".inclas2").length)
// alert($(".inclas").length)
// alert($(".inclas .inclas2").length) //多个类的选择
// $(".inclas3").val("vals3333333")
// })
$(function(){
alert($("#father div").length) //找所有子孙标签
alert($("#father>div").html()) //只找儿子标签
alert($("#father+div").html()) //跟在这个标签后的第一个标签
alert($("#father~div").length) //在后面的所有同级标签
})
</script>
</head>
<body>
<input id="in1" class="inclas" />
<input id="in2" class="inclas inclas2"/> <!--//可有多类名-->
<input id="in3" class="inclas inclas2 inclas3"/>
<div id="father">
fubiaoqian
<div id="son">
son
<div id="sonson">
sonson
</div>
</div>
</div>
<div id="father2">deierge biaoqian </div>
<div id="father3">dishange biaoqian<div class="ew2">dad</div></div>
</body>
</html>
再看其他的选择器写法案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.jishu{
background: greenyellow;
color: white;
text-align: center;
}
.oushu{
background: lightcoral;
}
.red{
background: red;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<script type="text/javascript">
$(function(){
$("tr:even").addClass("jishu") //偶数行
$("tr:odd").addClass("oushu") //奇数行
$("tr:eq(4)").addClass("red") //选定某一行 从零开始 列表也可以使用
$("tr:gt(5)").addClass("red") //大于某一行的
// $("tr.lt(4)").addClass("red")
// $("tr").removeClass("red")
})
</script>
</head>
<body>
<table border="1px" cellpadding="5px" cellspacing="0px">
<tr>
<td>name</td>
<td>age</td>
<td>address</td>
</tr>
<tr>
<td>ADSD</td>
<td>2345</td>
<td>从，直接把内存空间</td>
</tr>
<tr>
<td>ADSD</td>
<td>2345</td>
<td>从，直接把内存空间</td>
</tr><tr>
<td>ADSD</td>
<td>2345</td>
<td>从，直接把内存空间</td>
</tr><tr>
<td>ADSD</td>
<td>2345</td>
<td>从，直接把内存空间</td>
</tr><tr>
<td>ADSD</td>
<td>2345</td>
<td>从，直接把内存空间</td>
</tr>
</table>
</body>
</html>
7594
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
