Jquery
1.Jquery 的定义
简单来说，jQuery是一个小巧，功能丰富的 js 库存
2. Jquery 的基本使用
2.1引入jQuery文件**
2.2写 一个入口函数**
2.3找到你要操作的元素(jQuery选择器)，去操作它(给他添加属性，样式，文本)
3.入口函数的两种种写法
$(document).ready(function(){})$(function(){})//常用写法
4.window.onload = function(){} 与 $(function(){}) 的执行顺序先后
3.4.1版本之前都是 $(function(){}) 先执行，在3.4.1后 window.onload = function(){}先执行
5.$是一个函数
1.jquery文件结构
( function(){ window.jQuery = window.$ = jQuery; } () ); 一个自动执行函数
2.js文件执行过程
-
引入一个js 文件，会执行这个文件中的代码
-
jQuery文件是一个自执行函数，执行这个jQuery文件中的代码就是执行这个自执行函数
-
这个自执行文件就是给window对象添加一个jQuery属性和$属性
3.$是一个函数
1. 如果参数传递的是一个匿名函数——入口函数
$(function(){});
**2. **如果参数传递的是一个字符串—选择器/创建一个标签
$(’#one’)
$(‘
**3. **如果参数传递的是一个dom对象，那么它会把dom对象转化为jQuery对象
1. dom对象
原生js获取到的对象，特点是：只能调用dom方法和属性，不能调用jQuery的方法和属性
var div1 = document.getElementById('one');
div1.style.backgroundColor = 'red'// 正常调用dom属性
div1.css('backgroundColor','green') ，//报错 因为不能调用jQuery的方法和属性
2.jQuery对象
利用jQuery选择器获取到的对象，特点: 只能调用jquer方法和属性，不能调用dom的方法和属性
var $div1 = $('#one')
$div1.css('backgroundColor','green') ;//正常
$div1.style.backgroundColor = 'red' //报错 因为不能调用dom对象的属性
3.jQuery对象是什么样子的？
首先jQuery对象是一个伪数组，jQuery对象其实就是dom对象的一个包装集
4.dom对象转化为jQuery对象
$(dom对象)
5. jQuery对象转化为dom对象
5.1使用下标取出来
var $divs = $('div'); //jQuery对象
var div1 = $divs[0]; //dom对象
5.2使用jQuery的方法 get(index);
var div2 = $divs.get(1)
6.jQuery对象的方法
6.1 text() 方法
获取文本： text() 方法不给参数；会获取标签中的所有文本，包括后代元素的文本
设置文本：text(‘我是新设置的文本’) ; 设置的文本会覆盖原来的文本信息，如果设置的文本包含标签，不会解析
如果jQuery对象 里面包含多个dom元素，所有dom元素的文本都会被新设置的文本覆盖
6.2 css() 方法
**获取样式：css(‘样式名’) **css(‘width’) //结果 200px css(‘border’) //结果 2px solid rgb(255,0,0)
**注意：**获取包含了多个dom元素的jQuery对象的样式，只能获取到第一个dom对象的样式
**设置样式:** css(样式名，样式值)
6.2.1设置单样式( css(样式名，样式值) )
$('#div1').css('width','300px')
$('#div1').css('backgroundColor','red')
6.2.2设置多样式( css({}) )
$('#div1').css({
width:300,
height:'400px',
backgroundColor:'green' })
7.jQuery的基本选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| ID选择器 | $(’#id’) | 获取指定ID的元素 |
| 类选择器 | $(’.class’) | 获取同一类class的元素 |
| 标签选择器 | $(‘div’) | 获取同一类标签的元素 |
| 并集选择器 | $(‘div,p,li’) | 使用逗号分隔，只要符合条件之一即可 |
| 交集选择器 | $(‘div.redClass’) | 获取类名为redClass的div元素 |
7.2jQuery过滤选择器
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VvwbJ3kX-1610593939755)(D:\D盘存放\md笔记\Jquery\lALPDgtYvN76vTXNAdvNBUM_1347_475.png_720x720q90g.jpg)]
7.3jQuery筛选选择器(方法)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Hczt5rNu-1610593939758)(D:\D盘存放\md笔记\Jquery\lALPDiQ3M2BpE2rNAkPNBUE_1345_579.png_720x720q90g.jpg)]
8.鼠标事件
mouseover 事件在鼠标移动到选取的元素及其子元素时触发
mouseenter 事件只在鼠标移动到选取的元素时触发
moustout 事件在鼠标离开时触发
9.class类操作
**9.1添加类 addClass(类名)**
$('#div1').addClass('class01') //添加单个类 class01
$('#div1').addClass('class01 class02') //添加多个类 class01 class02 (中间用空格隔开)
9.2移除类 removeClass(类名)
$('#div1').removeClass('class01') //删除单个类 class01
$('#div1').removeClass('class01 class02') //删除多个类 class01 class02 (中间用空格隔开)
$('#div1').removeClass() //删除所有类
9.3判断类 hasClass()
$('#div1').hasClass('class01') //判断一个元素有没有这个类，有就返回true，没有则为false
9.4切换类 toggleClass()
$('#div1').toggleClass('class01') //如果元素有这个类则移除这个类，没有这个类则添加这个类
10.jquery动画
**10.1 show() 显示方法**
参数1：代表执行动画的时长，毫秒值，也可以是时长字符串 fast(200ms)，normal(400ms), slow(600ms) 例：show(2000)
参数2：动画执行完毕之后的回调函数 例子： show(2000, function(){} )
10.2hide() 隐藏方法
参数1：代表执行动画的时长，毫秒值 例子：hide(2000)
参数2：动画执行完毕之后的回调函数 例子：hide(2000, function(){} )
10.3toggle()方法
注意：如果元素是隐藏状态就动画显示，如果是显示状态就动画隐藏
10.4 slideDown() 滑下来
参数：与show() 相同
10.5 slideUp() 滑上去
参数：与show() 相同
10.6 slideToggle() 切换
注意：如果元素是隐藏状态就滑下来，如果是显示状态就滑上去
**10.7 fadeIn() 淡入**
10.8 fadeOut() 淡出
10.9 fadeToggle() 切换
10.10 fadeTo() 到什么状态
例子：fageTo( 1000, 0.5 ) //0.5表示opacity
11.自定义动画 animate()
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I7MvkrEn-1610593939760)(D:\D盘存放\md笔记\Jquery\lALPDgQ9v5VxUZ_NATfNBJc_1175_311.png_720x720q90g.jpg)]
11.2 stop() 停止动画
参数1：是否清除队列
参数2：是否跳转到最终结果
例子: $(’#div1’).stop( true, true ) 默认 stop(false,false)
12.动态创建元素
12.1 html(参数) 创建
- 会把原来的内容覆盖
- 如果设置的内容包含了标签，会把标签解析出来
12.2 $() 创建元素
可以创建元素，但是元素只存在于内存中，要在页面上显示就要追加
var $link = $('<a href="https://news.baidu.com">新闻</a>')
$('#div1').append($link) //追加元素
13.添加节点的几种方法
-
append() 方法
- 父元素.append(子元素) //作为最后一个子元素添加
- 把ul里面存在的li添加到ul中去，则把原来存在的li剪切后作为最后一个子元素添加
-
prepend() 方法
-
父元素.prepend(子元素) //作为第一个子元素添加
-
把ul里面存在的li添加到ul中去，则把原来存在的li剪切后作为第一个子元素添加
-
before() 方法
-
元素A.before(元素B) // 把元素B插入到元素A的前面，作为兄弟元素添加
-
after() 方法
- 元素A.before(元素B) // 把元素B插入到元素A的后面，作为兄弟元素添加
-
appendTo() 方法
- 子元素.appendTo(父元素) //把子元素作为父元素的最后一个子元素添加
14.克隆节点
-
jQuery中克隆节点 clone() 方法
- 只存在于内存中，要在页面显示就要追加到页面
- clone() 方法的参数不管是 true 还是 false 都会克隆到后代节点
- clone() 方法的参数为true表示会把事件一起克隆，false表示不会把事件克隆，没参数默认是false
-
var() 获取表单的值或者设置值
- 不给参数就是获取值 // val()
- 传参就是设置值 //val(‘啦啦啦’)
15 jQuery操作属性
-
attr() 方法设置属性
- 例子：对图片的属性进行设置 $(‘img’).attr( ‘src’, ‘666.gif’) //把原来src的属性值修改
- $(‘img’).attr( ‘aaa’, ‘888’ ) //如果元素没有这个属性，就是添加属性
-
attr() 方法获取属性
- $(‘img’).attr( ‘src’) // 获取图片自带的src 属性，也可以获取自定义的属性
-
removeAttr() 方法移除属性
- $(‘img’).removeAttr( ‘src’) //移除图片自带的src属性
16.操作布尔类型的属性
- 使用的是prop() 操作
- 对于checked，selected，disabled，这类Boolean类型的s属性，不能使用attr方法只能使用prop方法
17.jQuery尺寸和位置操作
-
width()方法和height()方法
-
设置或者获取高度和宽度，不包括内边距和外边距
$('#div1').height(200) //设置高度为200 $('#div1').height() //获取高度
-
-
innerWidth() 方法和innerHeight() 方法
-
返回元素的宽高 ，包括内边距
-
outWidth() 方法和outHeight() 方法
-
返回元素的宽高 ，包括内边距和边框
-
outWidth(true) 方法和outHeight(true) 方法
-
返回元素的宽高 ，包括内边距，外边距，边框
-
获取页面可视区的宽高
-
$(window).width() $(window).height()
-
offset() 方法
- 获取的是一个对象，里面包含了top和left的值
- offset方法获取的是元素距离document的位置
-
position() 方法
- 获取的是一个对象，里面包含了top和left的值
- position方法获取的是元素距离有定位的父元素的位置
-
scrollTop() 方法和 scrollLeft() 方法
- 分别表示元素被卷曲出去的高度和宽度
- 传入参数表示设置元素被卷曲出去的高度和宽度
-
$(window).scrollLeft() $(window).scrollTop()
- 获取页面被卷曲的宽度和高度
18.事件注册(on 统一了事件注册方式)
- on注册简单事件
- 不支持动态注册
$('div').on('click',function(){
console.log('我是单击事件')
})
- on 委托注册
- 支持动态注册
$('body').on('click','div',function(){ // body表示父级元素 (利用事件冒泡上传)
console.log('单击事件')
})
- 事件解绑 off()
- $(’#one’).off() //解绑所以事件
- $(’#one’).off(‘click’) //解绑指定事件
度
18.事件注册(on 统一了事件注册方式)
- on注册简单事件
- 不支持动态注册
$('div').on('click',function(){
console.log('我是单击事件')
})
- on 委托注册
- 支持动态注册
$('body').on('click','div',function(){ // body表示父级元素 (利用事件冒泡上传)
console.log('单击事件')
})
- 事件解绑 off()
- $(’#one’).off() //解绑所以事件
- $(’#one’).off(‘click’) //解绑指定事件
扫一扫
543
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
