jQuery
<!DOCTYPE html>
<html>
<head>
<title>jQuery概述</title>
<script src="jQuery.min.js"></script>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<!--1.1 JavaScript库
仓库:可以把很多东西放到这个仓库里面。 找东西只需要到仓库里面查找到就可以了。
JavaScript库:即library ,是一个封装好的特定的集合(方法和函数) .从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate. hide. show ,比如获取元素等。
简单理解:就是一个JS文件,里面对我们原生js代码进行了封装,存放到里面。这样我们可以快速高效的使用这些封装好的功能了。
比如jQuery ,就是为了快速方便的操作DOM ,里面基本都是函数(方法)-->
<!-- 常见的JavaScript库
●jQuery
●Prototype
●YUI
●Dojo
●ExtJS
●移动端的zepto
这些库都是对原生JavaScript的封装,内部都是用原生JavaScript实现的,我们主要学习的是jQuery -->
<!-- jQuery是一个快速、简洁的JavaScript库,其设计的宗旨是"write Less , Do More”, 即倡导写更少的代码,
做更多的事情。
j就是JavaScript; Query 查询;意思就是查询js ,把js中的DOM操作做了封装,我们可以快速的查询使用里
面的功能。
jQuery封装了JavaScript 常用的功能代码,优化了DOM操作、事件处理、动画设计和Ajax交互。
学习jQuery本质:就是学习调用这些函数(方法)。
jQuery出现的目的是加快前端，人员的开发速度,我们可以非常方便的调用和使用它,从而提高开发效率。-->
<!-- 优点
●轻量级。 核心文件才几十kb ,不会影响页面加嗽速度
●跨浏览器兼容。 基本兼容了现在主流的浏览器
●链式编程、 隐式迭代
●对事件、 样式、动画支持,大大简化了DOM操作
●支持插件扩展开发。 有着丰富的第三方的插件,例如:
树形菜单、日期控件、轮播图等
●免费、开源 -->
<!-- jQuery版本:
●1x :兼容IE 678等低版本浏览器。官网不再更新
●2x :不兼容IE 678等低版本浏览器,官网不再更新
●3x :不兼容IE 678等低版本浏览器,是官方主要更新维护的版本
各个版本的下载: https://code/jquery.com/ -->
<div></div>
<script type="text/javascript">
// 理论上先有dom元素才能操作dom元素
// 原生js中使用load页面加载完毕后在执行js代码或者是domcontentloaded等待主要的dom元素加载完毕后再执行js代码
// 原生js的DOMContentLoaded主要的dom元素加载完毕就执行js代码
// 等待页面DOM加载完毕再去执行js代码
// 页面DOM加载完成的入口函数
// 1.等着DOM结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完成, jQuery帮我们完成了封装。
// 2.相当于原生js中的DOMContentLoaded.
// 3.不同于原生js中的load事件是等页面文档、外部的js文件、Css文件、图片加载完毕才执行内部代码。
$(document).ready(function(){
$('div').hide();
})
// 页面DOM加载完成的入口函数
$(function(){
$('div').hide();
})
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>jQuery的*对象</title>
<script src="jQuery.min.js"></script>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<!-- 1.$是jQuery的别称,在代码中可以使用jQuery代替$,但般为了方便,通常都直接使用$.
2.$是jQuery的项级对象，相当于原生JavaScript中的window.把元索利用$包装成jQuery对象。就可以调用jQuery的方法。
-->
<script type="text/javascript">
// 1. $是jQuery的别称(另外的名字)
// $(function() {
// alert(11)
// });
// 页面DOM加载完成的入口函数
jQuery(function() {
// alert(11)
// $('div').hide();
jquery( 'div').hide();
});
// 2. $同时也是jQuery的 *对象
//
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>jQuery对象和dom对象</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<script src="jQuery.min.js"></script>
</head>
<body>
<div></div>
<span></span>
<script type="text/javascript">
//1.用原生J5犹取来的对象就是DOM对象
//2. jQuery方法获取的元素就足jQuery对象。
//3. jQuery对象本质是:利用$对DOM对象包装后产生的对象(伪数组形式存储)。
console . dir(myDiv);
// 2. jQuery对象: 用jquery方式获取过来的对象是jQuery对象。 本质:通过$把DOM元素进行了包装
$('div'); // $("div')是一 个jQuery对象
$('span'); // $('span' )是一个jQuery对象
console .dir($('div'));
// 3. jQuery 对象只能使用jQuery 方法，DOM对象则使用原生的JavaScirpt 属性和方法
// myDiv. style.display = 'none';
// myDiv. hide(); myDiv是 个dom对象不能使用jquery里面的hide方法
// $('div').style. display = 'none'; 这个$( 'div')是 个jQuery对象不能使用原生js的属性和方法
// 1. DOM对象: 用原生js获取过来的对象就是DOM对象
var myDiv = document.querySelector('div'); // myDiv是DOM对象
var mySpan = document.querySelector('span'); // mySpan 是DOM对象
console.dir(myDiv);
// 2. jQuery对象: 用jquery方式获取过来的对象是jQuery对象。 本质:通过$把DOM元素进行了包装
$('div'); // $("div')是一 个jQuery对象
$('span'); // $('span' )是一个jQuery对象
console .dir($('div'));
// 3. jQuery 对象只能使用jQuery 方法，DOM对象则使用原生的JavaScirpt 属性和方法
// myDiv. style.display = 'none';
// myDiv. hide(); myDiv是 个dom对象不能使用jquery里面的hide方法
// $('div').style. display = 'none'; 这个$( 'div')是 个jQuery对象不能使用原生js的属性和方法
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>jQuery对象和DOM对象的相互转换</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<script src="jQuery.min.js"></script>
</head>
<body>
<div></div>
<span></span>
<video src="https://vd2.bdstatic.com/mda-mm79vqbfe8mhy69b/720p/h264/1638946718132450833/mda-mm79vqbfe8mhy69b.mp4?v_from_s=hkapp-haokan-hna&auth_key=1639105481-0-0-3b262f75065bf21219557e659d3192fd&bcevod_channel=searchbox_feed&pd=1&pt=3&abtest=17376_2&klogid=2081547980" muted ></video>
<!-- DOM对象与jQuery对象之间是可以相互转换的。
因为原生js比jQuery更大,原生的一-些属性和方法jQuery没有给我们封装.要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。
1. DOM对象转换为jQuery对象: $(DOM对象)
$("div")
2. jQuery对象转换为DOM对象(两种方式)
$('div") [index]
index是索引号 -->
<script type="text/javascript">
// 1. DOM对象转换为jQuery对象
// (1) 我们直接获取视频，得到就是jQuery对象
// $('video');
// (2) 我们已经使用原生js获取过来DOM对象
// var myvideo = document . querySelector( 'video');
// $(myvideo). play();
// jquery里面没有play这个方法
// 2.jQuery对象转换为DOM对象
// myvideo.play();
$('video')[0].play()
$('video').get(0).play()
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>jQuery选择器</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<script src="jQuery.min.js"></script>
</head>
<body>
<!-- 1.1 jQuery 基础选择器
原生JS获取元素方式很多,很杂,而且兼容性情况不一致,因此jQuery给我们做了封装,使获取元素统-标准。
$( "选择器”) //里面选择器直接写CSS选择器即可,但是要加引号
名称 用法 描述
ID选择器 $("#id") 获取指定ID的元素
全选选择器 $(*") 匹配所有元素
类选择器 $(".class") 获取同一类class的元素
标签选择器 $("div") 获取同一类标签的所有元素
并集选择器 $("divp,i") 选取多个元素
交集选择器 $("li.current") 交集元素
1.2 jQuery层级选择器
名称用法描述
子代选择器
$("ul>li");
使用>号,获取亲儿子层级的元素;注意,并不会获取孙子层级的元素
后代选择器
$("ul li");
使用空格，代表后代选择器，获取ul下的所有Ii元素，包括孙子等
-->
<div >
我是div
</div>
<div class="nav">我是nav div</div>
<p>我是p</p>
<ol>
<li>我是ol的</li>
<li>我是ol的</li>
<li>我是ol的</li>
<li>我是ol的</li>
</ol>
<ul>
<li>我是ul的</li>
<li>我是ul的</li>
<li>我是ul的</li>
<li>我是ul的</li>
</ul>
</body>
<script type="text/javascript">
$(function(){
console.log($(".nav"));
console.log($('ul li'));
})
</script>
</html><!DOCTYPE html>
<html>
<head>
<title>隐式迭代</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<script src="jQuery.min.js"></script>
</head>
<body>
<div>hhhhh</div>
<div>hhhhh</div>
<div>hhhhh</div>
<div>hhhhh</div>
<ul>
<li>hhh</li>
<li>hhh</li>
<li>hhh</li>
<li>hhh</li>
</ul>
<!-- jQuery设置样式
$('div').css("属性";"值")
1.3隐式迭代(重要)
遍历内部DOM元素(伪数组形式存储)的过程就叫做隐式迭代。
简单理解:给匹配到的所有元索进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作,
方便我们调用。
子代选择器-->
<script type="text/javascript">
// 1.获取四个div元素
console .log($("div" ));
// 2.给四个div设省背景颜色为粉色jquery对象不能使用style
$("div").css("background", "pink" );
// 3.隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法,一般是进行相同操作
$("ul 1i").css("color", "red" );
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>jQuery筛选选择器</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<script src="jQuery.min.js"></script>
</head>
<body>
<!-- 1.4 jQuery筛选选择器
语法
用法
描述
:first
$('li:first')
获取第一个li元素
:last
$(li:last')
获取最后一个i元素
:eq(index)
$("li:eq(2)")
获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
:odd
$("li:odd")
获取到的li元素中，选择索引号为奇数的元素
:even
$("li:even")
获取到的li元素中，选择索引号为偶数的元素 -->
<ul>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
</ul>
<ol>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
</ol>
<script type="text/javascript">
$(function() {
$("ul li:first").css("color", "red" );
$("ul li:eq(2)").css("color", "blue");
})
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<script src="jQuery.min.js"></script>
</head>
<body>
<!-- 1.5 jQuery筛选方法(重点)
语法
用法
说明
parent()
$("li"). parent();
查找父级
children(selector)
$("ul"). children("li")
相当于$("ul>li"),最近一级(亲儿子)
find(selector)
$("ul"). find("li");
相当于$("ul li"),后代选择器
siblings(selector)
$(" . first").siblings("1i");
查找兄弟节点，不包括自己本身
nextA1l([expr])
$(". first"). nextAll()
查找当前元素之后所有的同辈元素
prevtAll([expr])
$(" .last"). prevAll()
查找当前元素之前所有的同辈元素
检查当前的元素是否含有某个特定的类,如
hasClass(class)
$('div').hasClass("protected")
如果有，则返回true
eq(index)
$("li").eq(2);
相当于$("li:eq(2)"), index从0开始 -->
<div class="grandfather">s
<div class="father">
<div class="son">儿子</div>
</div>
</div>
<div class="nav">
<p>woship</p>
<div>
<p>hhh</p>
</div>
</div>
<script type="text/javascript">
//注意一下都是方法带括号
$(function() {
// 1.父 parent()
// 返回的是最近一级的父级元素 亲爸爸
console .log($(" . son" ) .parent());
</script>
</body>
</html>