对象入门
1.jq
- 为了 简化 程序员 对 dom操作的 语法！
2.jq入口函数
-
为啥要有入口函数？
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-50jfYHYU-1620890052963)(assets/image-20210428102839133.png)]
-
代码：
// 入口函数
$(function(){
})
3.jq对象
- jquery就是一个函数
var version = "3.5.1"
var jQuery = function( selector, context ) {
// 函数内部 创建了一个 jquery 实例，并返回这个实例
return new jQuery.fn.init( selector, context );
};
- $就是jquery函数的别名
if ( typeof noGlobal === "undefined" ) {
window.jQuery = window.$ = jQuery;
}
4.jq和dom对象
- dom对象：通过 webapi 获取的 dom树里的对象
- jq对象：通过 jquery函数 获取的 就是 Jq对象
- 注意：语法不能相互乱用
5.jq和dom互转
- jquery 函数 接收参数时：可以是 选择器，也可以是 dom对象
- 传 选择器：jquery函数 会根据 选择器 到dom树中 查找 dom，并将找到的 dom 装入 新的 jq对象返回
- 传 dom对象：jquery 函数 直接 将 dom对象 装入新的jq对象 返回！
//1.dom转 jquery
let div = document.querySelector('div')
let $div2 = $(div)
//2.jquery转 dom
let $div = $('div')
$div[0].innerHTML = '不可能！'
$div.get(0).innnerHTML='绝对不可能！'
- 能通过 [ ] 下标访问，因为 jq对象本身就是 伪数组
能通过 get 方法访问，因为 jq对象内包含 共享的方法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JlroObsU-1620890052978)(assets/image-20210428110712245.png)]
6.隐式迭代
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lLcHP87f-1620890052981)(assets/image-20210428113924159.png)]
7.jqeury事件
- 语法：jq对象.事件( callback)
$('div').click(function(){
//1.jq事件处理函数中的 this 就是事件源！
// 注意：由于 事件源 都是 dom对象，所以 如果需要使用 jq函数，必须先转成 jquery对象
$(this).css('color','red')
})
8.weibo菜单案例
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y6fpk60Q-1620890052987)(assets/image-20210428142732767.png)]
9.过滤选择器，过滤器方法
9.1 过滤选择器
- $(‘div:first’)
9.2 过滤器方法
- $(‘div’).first()
问题：到底用哪个？
需求：当 要 获取 将 页面上 第1个div设置成红色背景，将最后一个div设置成蓝色背景，用哪种方式呢？
//1.如果用过 过滤选择器实现，将会创建 两个 jq对象
$('div:first').css('backgroundColor','red')
$('div:last').css('backgroundColor','blue')
//2.如果用过滤器方法实现 ，将会创建 三个 jq对象
let $div = $('div')
$div.first().css('backgoundColor','red')
$div.last().css('backgoundColor','blue')
-
常见过滤方法：
-
children() - 获取所有子元素
-
find() - 获取所有后代元素
-
siblings() - 获取所有兄弟元素
-
eq() - 获取指定下标的元素
-
parent() - 获取最近父元素
-
parents() - 获取所有祖先元素（父亲、爷爷 … 一直到 根元素(html标签)）
<body> <div> <ul> <li> <button> 讨厌，死鬼 </button> </li> </ul> </div> </body> <script> //通过 按钮找到 div let $btn = $('button') //方式1： let $div1 = $btn.parent().parent().parent() //方式2： let $div2 = $btn.parents('div') </script>
-
-
找兄弟元素
-
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IRLTyOeA-1620890052988)(assets/image-20210428143109484.png)]
10.通过 index() 找下标
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kbH2TUzw-1620890052989)(assets/image-20210428162946685.png)]
11.链式编程
- 定义：由于 jq大部分方法，内部会返回 jq对象，所以 可以 继续 通过 .语法 调用 Jq函数
- 原理：jq大部分方法 内部 会返回 jq对象
- 注意：
- jq方法 有一些 是不返回 jq对象的，没有办法 链式编程
- 比如：
$('div').css('color')返回 颜色值字符串
- 比如：
- jq方法 返回 jq对象有两种情况：
- 返回 之前的 jq对象
- 返回 新的 jq对象
- jq方法 有一些 是不返回 jq对象的，没有办法 链式编程
12.css操作行内样式表
- 强调：css方法 操作的 是 行内样式表（dom.style）
- 用法：
- 传1个参数，获取 行内样式表的值 ：
let strWidth = $("div").css('width') - 传2个参数，修改 行内样式表的值：
$("div").css('backgroundColor','red') - 传对象，批量设置行内样式表的值：
$("div").css({ color:"red",width:200 })
- 传1个参数，获取 行内样式表的值 ：
13.操作类名
- 添加类名
$('div').addClass('类名') - 删除类名
$('div').removeClass('类名') - 切换类名
$('div').toggleClass('类名')
14.动画函数
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jTgGlMEI-1620890052990)(assets/image-20210428185623201.png)]
属性与操作
1.属性操作
1.1 操作标准属性
property 属性
- 修改标准属性值：
$('div').prop('id','2') - 获取标准属性值：
$('div').prop('id')
1.2 操作自定义属性
attribute 属性(特性)
- 修改自定义属性值：
$('div').attr('myid',1) - 获取自定义属性值：
$('div').attr('myid') - 修改【自定义h5】属性值：
$('div').attr('data-myid',1) - 获取【自定义h5】属性值：
$('div').attr('data-myid')
1.3 操作jq缓存数据
- 修改设置自定义数据：
$('div').data('mydog','ruiky') - 获取自定义数据：
$('div').data('mydog') - 修改【自定义h5】属性值：
$('div').data('myid',1) - 获取【自定义h5】属性值：
$('div').data('myid')
2.jq提供的两个each方法
2.1 jq对象的each
- 作用：用来 遍历 jq对象 里的 dom元素
$('div').each(function (i, dom) {
console.log(i, '->', dom)
})
- 作用：相当于 for in 循环，用来遍历 目标 数组 或 对象 的 成员
- 遍历 对象： 取出 属性名 和 属性值
- 遍历 数组：取出 下标 和 元素
let arr = ['p城', '小王子', 'awm', '猿爸爸']
$.each(arr,function(i,ele){
console.log(i,ele)
})
1220
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
