▊ jQuery初见
❶ 理解JavaScript库（library）
就是一个JS文件，里面对原生js代码进行了封装，存放在里面，从而可以方便、快捷、高效、无脑 的使用这些封装好的功能
jQuery就是一个JavaScript库，它把js中的DOM操作做了封装。
❷ jQuery的优点
轻量、兼容、开源、无脑 。
❸ jQuery的引入
<script src="jQuery.js"></script> <!-- 提前在<head>上写上 -->
❹ jQuery入口函数
<script>
</script>
<div></div>
<!-- 上面这种写法显然有问题——在DOM加载之前就去操作DOM -->
<!-- 因此需要使用jQuery入口函数 ↓ -->
$(document).ready(function() {
//...
});
// 或者这种简单的写法(推荐)：
$(function (){
//...
});
// 注意 :
// 1.jQuery相当于原生js中的DOMContentLoaded———等到DOM结构渲染完毕后即可执行内部的js代码，不必等到所有外部资源加载完成
// 2.与之类似却不同的是load事件———等到页面文档、外部js文件、css文件、图片加载完毕才执行内部代码
❺ 关于美元符$
- $是jQuery的别称，写$的地方完全可以用jQuery替代
- $是jQuery的顶级对象，相当于原生js中的window。我们最常用的写法是把元素利用$包装成jQuery对象，就可以调用jQuery的诸多方法
❻ DOM对象和jQuery对象
var div = document.querySelector('div'); // 用原生JS获取来的就是DOM对象
$('div'); // 用jQuery对象获取的就是jQuery对象
// jQuery对象的本质是：利用$对DOM对象包装后的对象(以伪数组的形式存储)
// DOM对象使用原生js的属性和方法；jQuery对象使用jQuery里的方法；绝不可以混用(★)
// 下面这段代码可以更直观看出DOM对象和jQuery对象的本质联系
console.log($('div'));
var div = document.querySelector('div');
console.dir(div);
// 观察到，jQuery对象伪数组的第一个值，就是DOM对象 ! ! !
// DOM对象转换为jQuery对象————只需要用$包装一下就行
$(DOM对象);
// jQuery对象转换为DOM对象————因为DOM对象正是jQuery对象(伪数组)的第一个值
$('div')[0]
$('div').get(0)
❼ 隐式迭代 + 链式编程（极其方便的特性）
$("ul li").css("color", "red");
// 获取来的是一个伪数组(lis)，如果是原生js操作DOM对象，需要一个for循环遍历；而jQuery会隐式的对伪数组进行一次遍历(迭代)，极其方便
$(this).addClass("current").siblings().removeClass("current");
// 这是一个链式编程的典例(排他性)，可以看出，逻辑极其流畅
▊ jQuery API
▍jQuery选择器
// 在学习css时，我们都感叹选择器的强大。但使用js后，发现这些强大的选择器有很多都没法用了。还好我们有jQuery。
$("选择器") // 引号内直接写css选择器(基础选择器 + 复合选择器 + CSS3新增选择器)
$("*") // 全选选择器
$(".class") $("#id") // 类选择器，ID选择器
$("div") // 标签选择器
$("div, p, li") // 并集选择器
$("div.box") // 交集选择器
$("ul li") // 后代选择器
$("ul>li") // 子代选择器
$("button[disabled]") // 属性选择器
$("li:first") // 结构伪类选择器
$("li:eq(2)") // 结构伪类选择器(eq后的下标从0开始)(完全等价于nth-child(1)也行)
// 筛选方法
$(".son").parent() //最近的亲父亲
$(".son").parents() //所有的父亲(甚至包括body和html)
$(".nav").children("p") //所有的亲儿子p
$(".nav").find("p") //后代里所有的p
$("ul .current").siblings("li") //当前元素[所有]的兄弟li
$("ul .current").nextAll("li") //当前元素[之后]的兄弟li
$("ul .current").prevAll("li") //当前元素[之前]的兄弟li
$("ul li").eq(2) //等价于$("ul li:eq(2)")
// 除了find，其他的括号内都可以写也可以不写————写了表示对选择出的对象再次加以限制
// 比如$(".nav").children("p")选出nav的所有亲儿子，且都是p；而$(".nav").children()选出了nav的所有亲儿子
▍jQuery样式操作
// 思路仍然是： 简单样式直接修改css； 复杂样式就修改类
// css操作
$(this).css("color") // 没有传入值，则返回属性的值
$(this).css("color", "pink") // 根据传入的属性名和属性值，进行修改(一定都要加引号!)
$(this).css({
width: 300, // 对象形式修改多个属性(属性名不用加引号，但需要驼峰命名；属性值如果是非数字必须加引号)
backgroundColor: "skyblue" // 这是对象形式的键值对，不是原生css的那种写法!!!
})
// 类操作
$(this).addClass("myclass") // 添加类
$(this).removeClass("myclass") // 删除类
$(this).toggleClass("myclass") // 切换类 注：类名前千万不要加点
▍jQuery效果
// 【显示隐藏】
show() // 显示
hide() // 隐藏
toggle() // 切换
// 注：三个可选参数，分别是：
// speed (可选"fast", "slow", "normal", 毫秒数)
// easing (可选"swing", "linear")
// fn (回调函数，在效果结束后执行)
show("fast", "linear", function(){alert(1)}); // 我们一般不这么控制动画效果，因为真的不好看>_<
// 【滑动】
slideDown() // 下拉
slideUp() // 上拉
slideToggle() // 切换
// 可以理解为"一种优化了的show()和hide()"，用show和hide的地方都能用slideDown和slideUp替代
// demo: 通过事件切换(hover)，简化写法
$(this).hover(function() { // hover(function(){}, function(){})两个function分别在鼠标经过和离开时触发
$(this).children().slideDown();
}, function() {
$(this).children().slideUp();
})
//
// 再次简化
$(this).hover(function() { // 当hover只有一个function参数时，在鼠标经过和离开时都会触发它
$(this).children().slideToggle();
})
//
// 优化
$(this).hover(function() { // 操作过快时，导致一个画面出现多个滑动效果("动画排队")
$(this).children().stop().slideToggle(); // 因此我们在使用一个动画时，利用stop()结束上一个动画
})
// 【淡入淡出】
fadeIn()
fadeOut()
fadeToggle() // 也都是优化了的 show()和 hide()
fadeTo() // 参数为speed, opacity透明度, easing, fn (前两个参数是必须的；透明度的取值是[0, 1])
// 【自定义动画】
animate(对象, [speed], [easing], [fn])
// demo:
$(".box").animate({
left: 200,
top: 300,
opacity: 0
}, 1000)
// 【设置或获取元素属性】
// 固有属性就是元素本身自带的属性，比如a标签的href，input标签的type(原生js中直接img.src)
prop("属性名") // 获取
prop("属性名", "属性值") // 设置
// 元素的自定义属性(data-)用prop获取不过来，需要使用attr(这类似有原生js的setAttribute和getAttribute)
attr("属性名") // 获取
attr("属性名", "属性值") // 设置
// 数据缓存，即将一个"属性键值对"设置在元素上，但不会改变DOM元素结构，刷新后数据移除
data("属性名") // 获取
data("属性名", "属性值") // 设置
// 注:
// 1.总结一下，prop用于自带属性; attr用于自定义属性; data用于附加和获取临时属性
// 2.data还有一个作用，就是"获取H5的自定义属性(data-开头的)"，而且写属性名时省略"data-"，且返回数字形式的值时为数字型
// 3.它们各自用于不同的情景，是完全不能混用的
▍jQuery内容文本值
// 1.普通元素内容 html()(相当于原生的innerHTML)
html()
// 2.普通文本内容 text()(只有文字没有标签，相当于原生的innerText)
text()
// 表单内容 val (相当于原生的value属性)
val()
▍jQuery元素操作
// 遍历
// (隐式迭代是对一整个伪数组做了相同的操作，但有时的需求是对每个元素做不同的操作)
$("div").each(function(index, domElement){}) // 回调函数的参数是下标，和每个DOM对象(不是jQuery对象!!!需要$包装一下!!!)
$.each(arr, function(key, value){}) // 第一个参数是数组/对象("键值对")，第二个参数是回调函数(参数一看便知)
// 第一种each用在遍历一个对象伪数组的情况———因为回调函数的参数有domElement
// 第二种each用在遍历数组/对象(数据)的情况———这个回调函数的参数正好是键值对
// 创建元素
$("<li></li>") // 动态创建了一个li元素
var li = $("<li></li>") // 起个名字
// 添加元素
// (内部添加)
$("ul").append(li); // 内部的最后
$("ul").prepend(li); // 内部的最前
// (外部添加)
$("div").after(div); // 目标元素的后面
$("div").before(div); // 目标元素地前面
// 删除元素
$("div").remove(); // 删除该元素
$("ul").empty(); // 删除该元素的所有孩子
$("ul").html(""); // 效果等价于empty()
▍jQuery事件
// 事件注册 (之前常用，用于单个事件的注册)
element.事件(function() {事件处理程序})
// 事件处理 (用on一次性绑定多个事件)
element.on(事件, [选择器], 回调函数)
// 0.下面的用法等价于"单个事件注册"。之后的是on的其他优势用法
element.on("click", function(){事件处理程序})
// 1.一次性绑定多个 事件+事件处理程序
element.on({
click: function() {事件处理程序},
mouseover: function() {事件处理程序}
})
// 2.当事件处理程序相同时(通常是toggle事件)。注意事件之间用空格隔开
element.on("click mouseover", function(){事件处理程序})
// 3.事件委派 (就是把原来多个子元素身上绑定的事件，委派到一个父元素身上。虽然事件绑定父亲，但实际的触发者是子元素)
$("ul").on("cilck", "li", function(){事件处理程序})
// 4.on可以给未来创建的元素绑定事件(不用再向原生那样，每次动态增删元素节点后，就要再循环注册一次!!!)
// 事件解绑
element.off() // 解除所有事件
element.off("click") // 解除某个事件
$("ul").off("click", "li") // 解除事件委托
element.one(事件, function(){事件处理程序}) //one()是一种触发一次就自动解绑的on; 参数设置和on一样
// 自动触发事件
// 1.通过小括号()立即触发
element.click();
// 2.trigger触发
element.trigger("click");
// 3.triggerHandler(不会触发元素的默认行为，比如input的focus事件的光标闪烁)
element.triggerHandler("click");
// 事件对象
element.on(事件, [选择器], fn(event){})
// 这个event就是事件对象。它与之前在DOM中学习的事件对象完全一致：
div.addEventListener('click', function(event) {
console.log(event);
})
// 在jQuery中，同样可以用于【打印事件对象的相关属性】、【阻止事件默认行为】、【阻止事件冒泡】
$("div").on("click", function(e) {
console.log(e.target); // 打印事件的触发者<div></div>
console.log(e.type); // 打印事件的类型 "click"
e.preventDefault(); // 阻止默认行为
e.stopPropagation(); // 阻止冒泡
})
▍jQuery对象拷贝
$.extend([deep], target, obj, [obj...])
// 参数：
// [deep]默认为false，浅拷贝；可选true，改为深拷贝
// 将obj(有可能不止一个)拷贝给target
// 特点：冲突的属性会覆盖；不冲突的属性会保留 (所以并不是完全覆盖)
// demo:
var target = {
id: 233,
name: "chino"
};
var obj = {
name: "alice",
age: 12
}
$.extend(target, obj);
// 将obj拷贝到target后，target最终的值为：{id:233, name:"alice", age:12}
▍jQuery尺寸、位置操作
// 尺寸
width() / height() // width/height
innerWidth() / innerHeight() // width/height + padding
outerWidth() / outerHeight() // width/height + padding + border
outerWidth(true)/outerHeigth(true) // width/height + padding + border + margin
width(300) // 设置大小(直接传入纯数字)
// 位置
offset().top / offset().left // 相对于文档的偏移
position().top / position().left // 相对于有定位的父级
scrollTop() / scrollLeft() // 被卷去的长度
// 注：
// offset()和position()返回值都是对象(两个属性分别为top和left)
// offset可以设置偏移量，position不行：
$("div").offset({
top: 100,
left: 100
})
// scrollTop()/scrollLeft()当然可以设置：
$(document).scrollTop(300);
▍补充知识点：jQuery多库共存
// 问题：如果其他库也使用了$作为标识符，一起使用会引起冲突
// 解决：
// 1. 不使用$，使用完全等价的jQuery
jQuery("div")
// 2. 给$自定义一个名称，名称$释放
var loli = $.noConflict();
loli("div")
// 说明：
// 1. jQuery这个名称一直可以放心的使用；$是可以解绑的
// 2. 如此一来，就算其他库也是用了$，仍可以与jQuery库一起使用，称之为"多库共存"
▊ jQuery 插件
♬ jQuery之家 ：戳这里（无登录，免费开源，极其炫酷）
♪ jQuery插件库：戳这里（更多资源，风格中规中矩）
(tip：直接下载，打开演示html，对照着html以及文档，进行css，js，font的复制与引入)
bootstrap框架：戳这里
<!-- 先将文件复制到正确的位置 -->
<link rel="stylesheet" href="css/bootstrap.min.css"> <!-- 引入bootstrap css文件 -->
<script src="js/jQuery.js"></script> <!-- 在引入bootstrap库之前引入jQuery库(bootstrap是基于jQuery的) -->
<script src="js/bootstrap.min.js"></script> <!-- 引入bootstrap库的js文件 -->
(tip：不要忘了用<div class="container"></div>包起来)
☀ Loli & JS
♫ Suki
扫一扫
2112
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
