jQuery是一个JavaScript脚本库,不需要特别的安装,只需要我们在页面 <head> 标签内中,通过 script 标签引入 jQuery 库即可。
二:JQuery的各个样式
1. helloword初体验
<html>
<head>
<title>第一个简单的jQuery程序</title>
<style type="text/css">
div {
padding: 8px 0px;
font-size: 12px;
text-align: center;
border: solid 1px #888;
}
</style><!-- 你下载的JQuery地址-->
<script src="E:\SC_informaion\Jquery\jquery-3.4.1\jquery-3.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div").html("你好,欢迎第一次使用JQuery!!");
});
</script></head>
<body>
<div>123421</div>
</body>
</html>
其中 $(document).ready 的作用是等页面的文档(document)中的节点都加载完毕后,再执行后续的代码,因为我们在执行代码的时候,可能会依赖页面的某一个元素,我们要确保这个元素真正的的被加载完毕后才能正确的使用。
2.JQuery和DOM对象的区别
普通处理,通过标准JavaScript处理,通过document.getElementById("")方法获取的dom元素就是一个DOM对象,在通过innerHTML与style属性处理文本与颜色。
JQuery处理(var $p=$('')),通过$('')的方法获取一个$p的对象,然后$p是一个类数组对象,这个方法与上面的处理结果是一模一样的。
3.JQuery对象转化成DOM对象
利用数组下标的方式
var $div=$('div') //JQuery对象
var div=$div[0]//转化为JSON对象
div.style.color="red"; //操作dom对象的属性
通过JQuery自带的get()方法
var $div=$('div')
var div=$div.get(0)
div.style.color='red';
<body>
<div id="doc1">qwq</div>
<div id="doc2">ewrw</div>
<div id="doc3">wew</div>
<script type="text/javascript">
var $div = $('div'); //jQuery对象
var div = $div.get(2);
div.style.color = 'red'; //操作dom对象的属性
</script>
</body>
DOM对象转化为JQuery对象
var div=document.getElementsByTagName('div');
var $div=$(div);
var $first=$div.first(); //找到第一个div元素
$first.css('color','red'); //给第一个元素设置颜色
三:JQuery选择器
1. id选择器-- $( "#id" )
注:id是唯一的,每个id值在一个页面中只能使用一次。如果多个元素分配了相同的id,将只匹配该id选择集合的第一个DOM元素。但这种行为不应该发生;有超过一个元素的页面使用相同的id是无效的
2. 类选择器-- $(".class")
注: 获取所有class名的dom
3. 元素选择器-- $("element")
注://通过jQuery直接传入标签名p
//标签是可以多个的,所以得到的同样也是一个合集
$("div").css("border", "3px solid red");
4. 全选择器-- $("*")
5. 层级选择器
$("parent>child") 子选择器,选择parent下的直接child子元素
$("ancestor descendant") 后代选择器,选择ancestor里面的所有后代
$("prev +next") 相邻兄弟选择器,选择紧跟在prev后面的元素
$("prev ~sibling") 一般兄弟选择器,匹配prev之后的所有sibling元素并且属于同一个父亲
6. 基本筛选选择器
$(':first') -- 匹配第一个元素
$(':last') -- 匹配最后一个元素
$(':not(selector)') -- 一个 用来过滤的选择器,选择所有元素取出不匹配给定的选择器元素
$(':eq(index)') -- 在匹配集中选择索引值为index的元素
7.内容文本选择器
8. 可见性选择筛选器