Jquery基础
1.了解jquery
1.1什么是jquery
jquery是一个高效，精简并且功能丰富的JavaScript 工具库
jquery极大的简化了javascript编程
1.2什么是JS类库
它就是一些函数集合，就是把特定的效果写好，你只需要在用的时候，要用很少的代码去调用
起主导的是你的代码，由你来决定合适使用类库
1.3常见的JS类库
jQuery
Extjs
zepto.js
prototype.js
2.jQuery的引入方式
本地引入
<script src="jquery-1.12.4.min.js"></script>
<script>
//下载地址 https://jquery.com/download/
</script>
CDN引入
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <script> </script>
2.1 jquery对象
$是jquery的别名
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
console.log($)；
console.log(jQuery)；
jQuery("xxx"); $("xxxx") 选取方式是一样的
</script>
3.jQuery的选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="p1" alex="sb">0000</p>
<p id="p2" alex="sb">1111</p>
<div class="outer">
hello
<div>
<p>ahha</p>
</div>
<p>123456</p>
<p>56789</p>
</div>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<input type="text" name="">
<input type="checkbox" name="">
<input type="submit" name="">
<script src="jquery-1.12.4.min.js"></script>
<script>
//基本选择器 .class属性 # id属性 直接选取元素
// $(".test").css("color","red")
// $("#test").css("color","red")
// $("test").css("color","red")
//层级选择器
// $(".outer p").css("color","red");
// $(".outer>p").css("color","red");
// $(".outer+p").css("color","red")
//基本筛选器 last:最后一个 first：第一个 eq(number)按下标选取(默认下标从零开始) lt()区间选取不包括自己
// $("li:last").css("color","red");
// $("li:first").css("color","red");
//$("li:eq(2)").css("color","red");
//$("li:lt(2)").css("color","red")
//
//属性选择器
//$("[alex='sb'][id='p1']").css("color","red")
//
//
//表单选择器
//$("[type='checkbox']").attr("checked","true")
//
//只有input类型的type属性表单能这样进行选择
$(":text").css("width","400px");
</script>
</body>
</html>
4.jQuery的筛选器
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <ul> <li>111</li> <li id="end">222</li> <li>333</li> <li>4444</li> <li>55555</li> <li>6666</li> <li>77777</li> <li>88888</li> </ul> <div class="outer">222
<p>999</p> <div class="inner"> <p>22333</p> </div> </div> <input type="text" name=""> <input type="checkbox" name=""> <input type="submit" name=""> <script src="jquery-1.12.4.min.js"></script> <script> //过滤筛选器 //$("li").eq(2).css("color","red") // $('li:first').css("color","red"); // $("li").last().css("color","red"); // // // 查找筛选器 // $(".outer").children("p").css("color","red")查找当前选择对象下的子类元素 // $(".outer").find("p").css("color","red")匹配查找当前对象下的指定元素 // // nextAll()查找指定元素下面所有,next查找下一个 //$("li").eq(2).nextAll().css("color","red"); //$("li").eq(2).next().css("color","red"); //$("li").nextUntil("#end").css("color","red");从指定元素下面开始查找，不包括本身 //查找指定元素的上一位,eq()方法默认从0为开始查找 // $("li").eq(4).prev().css("color","red"); // $("li").eq(4).prevAll().css("color","red"); // $("li").eq(4).prevUntil("#end").css("color","red") //console.log($(".outer .inner p").parent().html());parent查找父类html //console.log($(".outer .inner p").parents().css("color","red");parents查找所有父类 //$(".outer .inner p").parentsUntil("body").css("color","red"); $(".outer").siblings().css("color","red"); </script> </body> </html>
4.2 jQuery变量的定义
jquery 基础变量定义
var $i=$("#D1");
var i=$("#D2");
function(){
//这里获取控件对象值
var d1=$i.val();
var d2=$(i).val();
}
$i： 表示jquery对象
i：表示普通对象