目录
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')); //first
3.2 设置自定义属性
$('p:first').attr('data','123');
//修改自定义属性data的值从first变为123
4. 有关于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')