目录
3.1 window.onload()函数和$(document).ready()函数的对比
2. find()
6. prev() next() prevAll() nextAll()
JQuery学习笔记二(节点操作,事件监听,动画相关方法)
一.JQuery了解
1,原生js的问题
在我们变成的时候回很容易发现,原生的js编程会有很多的问题,尤其是在兼容性方面:
选择元素,权限兼容的只有getElementById和getElementsByTagName;其他方法都有兼容问题
样式操作也有兼容问题,还得我们自己封装，封装getStyle（）
动画也麻烦,也得自己封装，封装animation（）
HTML节点操作也挺麻烦的
JS里面麻烦的都是和DOM编程有关的,有兼容问题,还的我们自己封装.
jQuery是原生JS封装的,简化了JS的DOM编程，完美的解决了原生js在DOM操作上的难题
2. JQuery简单介绍
2.1 官方自我介绍:
jQuery是一个快速、小型的、特性很多的JS库，它把很多事儿都变得简单。jQuery是免费的、开源的。
版本线:
1.x版本
2.x版本
3.x版本
jQuery分压缩版和未压缩版 ,以下面的两个版本为例:
- jquery-3.3.1.min.js ：压缩版，发布版84.8KB
- jquery-3.3.1.js ：常规版，开发版265KB
2.2 引入JQuery
<script src="...." >
</script>
二 .JQuery 对象 和 DOM 对象
1.DOM
1.1 DOM 模型
将html xml等文档结构的标签语言 看成dom模型,下图为例,就是一个简单的DOM模型.
1.2 DOM 节点
- 元素节点 <html> <ul>... <p>
- 属性节点 ：title src alt ...
- 文本节点： 文本节点
1.3 DOM 对象
以上三种节点类型的具体对象 就是Dom对象。
使用层面： 凡是JavaSCript能够直接操作的对象，就是Dom对象。
例如，var title = document.getElementById("myTitile");通过js获取到的title对象 就是一个dom对象（就是<p>对象）
2. JQuery对象
凡是jQuery能够直接操作的对象，就是jQuery对象。
例如：var $title = $("#myTitile") ; 通过jquery获取到的 $title 就是一个jquery对象。
同样一个元素，即可以成为一个dom对象（javascript对象），也可以成为一个jquery对象
注意：dom对象 只适用于js的各种语法（函数、属性），jquery对象只用于jquery的各种语法（函数、属性）。
dom对象和jquery对象的各自独立。
例如:
- title 是dom对象，因此可以使用js属性或方法 title.innerHTML
- $title 是jquery对象，因此可以使用jquery属性或方法 $title.html()
建议:
- js对象 直接写title
- jquery 加上$，例如$title
3. JQuery对象和DOM对象的相互转换
例如:
title.innerHTML;title ->$title
$title.html(); $title->title
3.1 DOM 对象转化JQuery对象
DOM 对象转化为JQuery 对象非常简单,只需要用到JQuery工厂$().
语法:
$(DOM对象)
let div = document.querySelector('.box');
div.onclick = function () {
window.alert($(div).html());
}3.2 JQuery对象转化DOM 对象
基础：jquery对象默认是一个数组 或集合；dom对象默认是一个单独的对象
所以将之转化为DOM对象有两种办法:
- 看成数组:JQuery对象[0]
- 看成集合:JQuery对象.get(0)
三.$()选择器
$ 就是jQuery的核心，query就是选择的意思
基础语法:
$(‘选择器’)，jQuery(‘选择器’)
$可以用jQuery代替，$和jQuery是同一个函数
选中某个或某类元素
<style type="text/css">
p {
float:left;
width: 60px;
height: 60px;
background-color: #ccc;
margin-left: 10px;
margin-top: 10px;
}
</style>
<p></p>
<p></p>
<p></p>
<p></p>
<script src="jQuery.js"></script>
<script>
console.log($)
$('p').css('background-color','red');
</script>1.$()选择的结果是一个类数组
console.log($('#box'));
[div#box]
既然是类数组，就不能直接跟原生js的语法
$('#box').style.backgroundColor = 'red';选择结果是类数组,那么很明显上面的方式是错误的,如果想使用元素方法，可以加[0],将jQuery对象转成元素对象
$('#box')[0].style.backgroundColor = 'red';2.使用方法(引号问题)
$(‘选择器’)里面的引号不能丢，在jQuery中只有是以下几个不用加引号，其他全部需要
不需要加引号的选择
- $(this)
- $(document)
- $(window)
3.文档加载
// 文档加载完毕后执行
$(document).ready(function(){
})
// 简写方案
$(function(){
console.log($('div'))
})
3.1 window.onload()函数和$(document).ready()函数的对比
| 函数名 | window.onload() | $(document).ready() |
| 执行时机 | 必须等待网页中所有的内容(如文档,图片,视频等)加载完毕之后才能执行 | 网页中所有DOM结构加载完毕之后即刻开始执行,(如文档,图片,视频等)并没有完全加载完毕 |
| 编写个数 | 同一页面不能编写多个 | 同一页面可以编写多个 |
| 简化写法 | 无 | $(function() {....}) |
四. 选择器
这个是jQuery 的发明 和js没有关系
写在引号里面,:当成筛选的功能符
以下都是序号，筛选器.
1. 基本选择器
1.1 标签选择器
$('标签名')
$("p").html() 获取p标签对象，是jquery对象形式的
$("p").length
1.2 类选择器
$(".class值")
1.3 id选择器
$("#id值")
1.4 并集(或)选择器
逗号分割
$(".class值,#id值")
1.5 交集选择器（同时存在）
连续直接写
$(".class值#id值")
$("p.myStyle").html()：选中 即是p标签，并且class的值是myStyle
注意：不能出现歧义
错误写法 $(".myStylep").html()
交集选择器 在交接处 只能是.或#开头的选择器
1.6 全局选择器：选中全部的元素
选中全部的元素
$("*")
2.层次选择器
2.1 相邻选择器+
$("选择器1+选择器2")
2.2 同辈选择器 ~
$("选择器1~选择器2")
2.3 后代选择器 空格
$("选择器1 选择器2")
2.4 后代选择器 >
$("选择器>选择器2")
3.属性选择器
$("[属性名]")
$("[class]") :选中全部元素中 有class属性的元素
$("[属性名=属性值]")
$("[class=xxx]")
$("[class='xxx']")
- $("[class!=a]") 不等于， 包含两种： 有class但值不是a, 没有class
- $("[class^=a]") class以a开头的元素
- $("[class$=a]") class以a结尾的元素
- $("[class*=a]") class有a的元素
4. 过滤选择器
过滤选择器的一些方法和其他函数类型，例如 $("ul>li:first")等价于$("ul>li").first()
有些不同，例如， 可以$("ul>li:odd") ；错误$("ul>li").odd();基本过滤选择器（从0开始）
- :first：最开头那一个
- :last：最后那一个
- :even：偶数
- :odd:奇数
- :eq(index)：第index个
其他选择过滤器
- :gt(index) : >index的全部元素
- :lt(index): <index的全部元素
- :not(选择器) :除了...以外
- :header:选中所有的标题元素 h1 h2 ...
- :focus: 获取当前焦点的元素
5.可见性选择器
- :visible ：选中所有可见的元素
- :hidden：选中所有隐藏的元素
6.is()
判断是不是返回true,或false
判断点击的这个p标签是不是有这个类叫做
$('p').click(function(){
alert($(this).is('.t'))
})还可以判断是不是奇数的,is()里面可以写筛选器
$('p').click(function(){
alert($(this).is(':odd'))
})五. 序与迭代
1.序号eq()
按照选择器选中的元素,然后在通过序号挑选
<style>
p {
display: block;
width: 200px;
height: 30px;
font-size: 18px;
text-align: center;
line-height: 30px;
margin-bottom: 5px;
border:1px solid #000;
}
</style>
<div class="box1">
<p>this is box 1</p>
<p>this is box 2</p>
<p>this is box 3</p>
</div>
<div class="box2">
<p>this is box 4</p>
<p>this is box 5</p>
<p>this is box 6</p>
</div>
<script>
$('p').eq(1).css('background-color','pink');
$('.box2 p').eq(1).css('background-color','orange');
</script>
也就是说 $()函数将返回一个对象队列,用eq来精确选择这个队列中的你想要的元素
2.index()方法
返回这个元素在亲兄弟中的排名,无视选择器怎么选.
//index()方法
$('p').click(function () {
console.log($(this).index())
})依次点击六个box打印的结果如下:
$(this).index()是一个很常见的写法,表示触发这个事件的元素,在亲兄弟中的排名.
利用index()方法写对应
// 事件绑定在box1里面的p
$('.box1 p').click(function(){
// 改变的是box2里面的对应的p
$('.box2 p').eq($(this).index()).css("background-color","red");
})3.each() 方法
迭代方法,说白了就是循环
表示遍历节点,也叫作迭代符合条件的节点
$('p').each(function(index,item) {
console.log(index);
console.log(item);
//原生js设置样式
// item.style.backgroundColor = '#999';
//JQuery方式
$(item).css('background-color','#58a');
})
4.size()方法和length属性
size() 方法和 length 属性是一样的, 获取jQuery对象中元素的个数.
这两个数字永远相同
//获取所有p元素的个数
console.log($('p').length); //6
console.log($('p').size()); //6值得注意的是,这两个获取到的值死一样的,但是我个人更推荐使用length属性,因为size()方法只有在1.8以下的版本才能用
5. get()方法
get()方法和eq()方法基本一致,都依赖$()的序列
不一样的是:
get()方法返回的是原生js的DOM对象
eq()方法返回的是JQuery对象
$('p').get(0).style.backgroundColor = 'pink';
$('p').eq(1).css('background-color','#999');六. css样式
1. 读取样式值
读取样式，可以读取计算后的样式，写一个参数，为获取值的属性
参数为属性字符串，必须加引号
读取的值有单位
console.log( $('p:first').css('background-color'));
console.log( $('p:first').css('width'))
2. 设置属性值
2.1 设置一个属性值
如果只设置一个属性值，需要传两个参数，
第一个参数为需要设置值的属性
第二个参数为需要设置的值，如果为数值，不需要加单位，
$("p:last").css('background-color','#81C784');
$("p:last").css('width','300');
2.2 设置多个属性值
如果想要同时设置多个属性值，可以写成JSON
$('p:odd').css({
'width':300,
'height':50,
'background-color':'#8BC34A',
'color':'#E0E0E0',
});
当然,我们也可以单独的设置每一个样式达到同样的效果.
2.3 设置的属性可以多样
设置的属性不仅可以为改变后的值，还可以设置+= 的值，就是在原有的基础上加多少像素
$('p:eq(0)').css('width','+=100px');
$('p:eq(2)').css('width','+=100');两种写法效果相同.
3. 自定义属性
3.1 获取自定义属性
通过attr()方法获取自定义属性
console.log($('p:first').attr('data')); //first3.2 设置自定义属性
$('p:first').attr('data','123');
//修改自定义属性data的值从first变为1234. 有关于class类名
4.1 添加类名 addClass()
$('p:last').addClass('last')4.2 删除类名 removeClass()
$('p:last').removeClass('last')4.3 替换类名 toggleClass()
遵循有则删除,无则添加原则
$('p:last').toggleClass('last')5. 关于节点值
5.1 html()
相当于原生JavaScript中的innerHTML
$('p:first').html(); // 获取值
$('p:first').html('<h2>this is h2</h2>'); // 设置值5.2 text()
就是innerText
$('p:first').text(); // 获取值
$('p:first').text('<h2>this is h2</h2>'); // 设置值七. 节点关系
1. children()
选中所有的子元素
表示选取亲儿子,不选择后代,选择所有的子元素
$('.box').children()选择所有子元素中的div元素
$('.box').children('div')还可以添加筛选器
$('.box').children('div:odd')2. find()
查询所有的后代选择器,返回后代所有元素的列表
console.log($('.box1').find('p'))注意,和children()方法不一样,find()方法里面,必须写参数,表示后代的谁,
find就是寻找的意思,就是你找后代里的谁
3. parent()
找父元素,任何一个元素只有一个父元素
console.log($('.box1 p').parent())4. parents()
寻找所有的祖先元素,可以传参数,寻找哪个祖先元素
$('p').parents('div')5. silbling()
寻找所有的亲兄弟元素节点
$('p').sibling()可以添加选择器
$('p').sibling('div')6. prev() next() prevAll() nextAll()
前一个兄弟,后一个兄弟,前所有的兄弟,后所有的兄弟元素节点
7. offsetParent()
查找定位父级
$('p').offsetParent('div')