jQuery概述和基本使用
概述
JavaScript库
仓库：可以把很多东西都放到这个仓库里面，找东西只需要到仓库里面查找就可以了
JavaScript库：即library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个
库中，封装了很多预先定义好的函数在里面，比如动画animate,hide,show，比如获取元素等
简单理解：就是一个js文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能
比如jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）
jQuery的概念
jQuery是一个快速，简洁的javascript库，其设计的宗旨是“write less，do more”，即倡导写更少的代码，做更多的事情
j就是JavaScript，Query查询；意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能
jquery封装了javascr常用的功能代码，优化了DOM操作，事件处理，动画设计和Ajax交互
学习jQuery本质：就是学习调用这些函数（方法）
jquery出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率
jQuery的优点
轻量级。核心文件才几十kb，不会影响页面加载速度
跨浏览器兼容。基本兼容了现在主流的浏览器
链式编程，隐私迭代
对事件，样式，动画支持，大大简化了DOM操作
支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单，日期控件，轮播图等
免费，开源
基本使用
首先需要导入jQuery文件，文件去官网下载即可
<script src="js/jquery.min.js"></script>
jQuery的入口函数
- 等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery帮我们完成了封装
- 相当于原生js中的 DOMContentLoaded
- 不同于原生js中的load事件是等页面文档，外部的js文件，css文件，图片加载完毕才执行内部代码
入口函数有两种写法
注意：入口函数是等着页面DOM加载完毕再去执行js代码
// 1. $(document).ready(function(){
// 内容
})
// 2. $(function(){
// 内容
})
jQuery的顶级对象 $
$ 是jQuery的别称，同时也是jQuery的顶级对象
比方说想要获取一个div，我们可以这样
$(“div”)
还可以这样
jQuery(""div)
jQuery对象和DOM对象
DOM对象：利用原生js获取过来的对象就是DOM对象
var div = document.querySelector('div'); // DOM对象
jQuery对象：用jQuery方式获取的对象是jQuery对象 本质：通过$把DOM元素进行了包装
$('div'); // jQuery对象
注意：jQuery对象只能用jQuery方法，DOM对象则使用原生的js属性和方法
jQuery对象和DOM对象转换
DOM对象和jQuery对象之间是可以相互转换的
因为原生js比jQuery更大，原生的一些属性和方法jQuery没有给我们封装
要想使用这些属性和方法，需要把jQuery对象转换成DOM对象使用
- DOM对象转换为 jQuery对象
$(‘div’)
- jQuery对象转换成DOM对象（两种方式） index是索引号
$(‘div’)[index]
$(‘div’).get(index)
jQuery选择器
$(“选择器”) 里面选择器直接写css选择器，但是要加引号
基础选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| ID选择器 | $("#id") | 获取指定id的元素 |
| 全选选择器 | $("*") | 匹配所有元素 |
| 类选择器 | $(".class") | 获取同一类class的元素 |
| 标签选择器 | $(“div”) | 获取同一类标签的所有元素 |
| 并集选择器 | $(“div,p,li”) | 选取多个元素 |
| 交集选择器 | $(“li.current”) | 交集元素 |
| 子代选择器 | $(“ul>li”) | 使用>，获取亲儿子层级的元素，注意并不会获取孙子层级的元素 |
| 后代选择器 | $(“ul li”) | 使用空格，代表后代选择器，获取ul下所有的li元素，包括孙子等 |
jQuery筛选选择器
| 语法 | 用法 | 描述 |
|---|---|---|
| :first | $(“li:first”) | 获取第一个li元素 |
| :last | $(“li:last”) | 获取最后一个li元素 |
| :eq(index) | $(“li:eq(2)”) | 获取到的li元素中，选择索引号为2的元素，索引号index从0开始 |
| :odd | $(“li:odd”) | 获取到的li元素中，选择索引号为奇数的元素 |
| :even | $(“li:even”) | 获取到的li元素中，选择索引号为偶数的元素 |
jQuery筛选方法（重点）
| 语法 | 用法 | 说明 |
|---|---|---|
| parent() | $(“li”).parent() | 查找父级 |
| children(selector) | $(“ul”).children(“li”) | 相当于$(‘ul>li’),最近一级(亲儿子) |
| find(selector) | $(‘ul’).find(‘li’) | 相当于$(‘ul li’)，后代选择器 |
| siblings(selector) | $(’.first’).siblings(‘li’) | 查找所有兄弟节点，不包括自己本身 |
| nextAll([expr]) | $(’.first’).nextAll() | 查找当前元素之后所有的同辈元素 |
| prevtAll([expr]) | $(’.first’).prevtAll() | 查找当前元素之前所有的同辈元素 |
| hasClass(class) | $(‘div’).hasClass(‘proteoted’) | 查找当前的元素是否含有某个特定的类，如果有，则返回true |
| eq(index) | $(‘li’).eq(2) | 相当于$(‘li:eq(2)’),index从0开始，里面可以放变量 |
jQuery的排他思想
隐式迭代（重要）
遍历内部DOM元素（伪数组形式存储）的过程就叫做隐式迭代
简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用
$(function(){
// 1. 隐式迭代 给所有按钮都添加了点击事件
$("button").click(function(){
// 2. 当前的元素变化背景颜色
$(this).css("background","pink");
// 3. 其余的兄弟去掉背景颜色 隐式迭代
$(this).siblings().css("background","");
})
})
<button>贝贝</button>
<button>贝贝</button>
<button>贝贝</button>
<button>贝贝</button>
<button>贝贝</button>
<button>贝贝</button>
<button>贝贝</button>
jQuery样式操作
操作css方法
jQuery可以使用css方法来修改简单元素样式，也可以操作类，修改多个样式
- 参数只写属性名，则是返回属性值，如下如果颜色是red，这个的返回值就是red
$(this).css("color");
- 参数是属性名，属性值，逗号分离，是设置一组样式，属性名必须加引号，值如果是数字可以不用跟单位和引号
$(this).css("color","red")
- 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号
$(this).css({
color:"write",
font-size:"20px"
})
操作类样式方法
- 添加类
$("div").addClass("current")
- 移除类
$("div").removeClass("current")
- 切换类
$("div").toggleClass("current")
注意：
类操作与className区别 原生js中className会覆盖原先里面的类名
jQuery里面的类操作只是对指定类进行操作，不影响原先的类名
复合属性必须采取驼峰命名法，如果值不是数字，则需要加引号
jQuery属性操作
设置或获取元素固有属性值 prop()
所有元素固有属性就是元素本身自带的属性，比如a元素里面的href，比如input元素里面的type
(1) 获取属性语法
prop("属性")
(2) 设置属性语法
prop("属性","属性值")
设置或获取自定义属性值 attr()
用户自己给元素添加的属性，我们称为自定义属性。比如给div添加index = ‘1’
(1) 获取属性语法
attr("属性") // 类似原生 getAttribute()
(2) 设置属性语法
attr("属性","属性值") // 类似原生 setAttribute()
数据缓存 date()
date()方法可以在指定的元素上存取数据，并不会修改DOM元素结构。一旦页面刷新，之前存放的数据都将被移除
(1) 附加数据语法
data("name","value") // 向被选元素附加数据
(2) 获取数据语法
data("name") // 向被选元素获取数据
同时还可以读取html自定义属性 data-index,得到的是数字型
jQuery效果
jquery给我们封装了很多动画效果，最为常见的如下
显示隐藏：
- show() 显示
- hide() 隐藏
- toggle() 可以使用 toggle() 方法来切换 hide() 和 show() 方法
滑动：
- slideDown() 向下滑动元素
- slideUp() 向上滑动元素
- slideToggle() 可以在 slideDown() 与 slideUp() 方法之间进行切换
显示隐藏：
- fadeIn() 淡入
- fadeOut() 淡出
- fadeToggle() 可以在fadeIn()与fadeOut()之间切换
- fadeTo() 允许渐变为给定的不透明度（值介于 0 与 1 之间）
自定义动画：
- animate()
语法
animate(params,[speed],[easing],[fn])
参数
params：想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法boderLeft。其余参数都可以省略
speed：三种预定义速度之一的字符串（“slow”，“normal”，“fast”）或表示动画时长的毫秒数值（如：1000）
easing：（Optioal）用来指定切换效果，默认是“swing”，可用参数“linear”
fn：回调函数，在动画完成时执行的函数，每个元素执行一次
案例
注意：做动画的元素需要添加定位！！
<style>
div {
position: absolute;
width: 100px;
height: 100px;
margin-top: 20px;
background-color: plum;
}
</style>
$(function () {
$("button").click(function () {
$("div").animate({
left: 200,
top: 200,
opacity: .5,
width: 200,
height: 200,
})
})
})
<button>点我</button>
<div></div>
jQuery内容文本值
主要针对元素的内容还有表单的值操作
元素内容 html() 相当于原生innerHTML
普通元素文本内容 text() 相当于原生innerText
表单的值 val() 相当于原生value
<div>
<span>我是内容</span>
</div>
<input type="text" value="请输入内容"" name="" id="">
$(function(){
// 1. 获取设置元素内容 html()
console.log($("div").html());
// $("div").html("123")
// 2. 获取设置元素文本内容 text()
console.log($("div").text());
$("div").text("312");
// 3. 获取设置表单值 val()
console.log($("input").val());
$("input").val("123");
})
扫一扫
1291
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
