JQuery_01
一、认识JQuery
二、对象
三、获取元素
四、隐式迭代
五、筛选选择器
六、事件绑定
七、筛选方法(父级,后代,兄弟)
八、排他思想
九、链式编程(一行代码解决问题)
一、认识JQuery
本质上其实就是封装了一系列操作原生 dom 元素的功能库
优点:
(1) 轻量级,核心文件几十kb,不影响页面加载速度
(2) 跨浏览器兼容
(3) 链式编程和隐式迭代,大大提升了开发效率
(4) 对事件、样式、动画的支持,大大简化了 DOM 操作
(5) 丰富的插件生态圈,如树形菜单、轮播图、日期控件等
(6) 免费、开源
入口函数
为了解决script标签可以在任意位置使用,我们需要添加 入口函数
$ ( function () {
} )
二、对象
JQ 中的顶级对象
$ 符号是 jQuery 的别称,是同一个函数
consolelog($ === jQuery) // true
- 原生DOM对象
和
jQuery对象
原生DOM对象就是 通过webAPIs 获取的元素对象
其实jQuery元素对象就是封装了原生DOM对象得到的
使用 $(参数) 获取的元素 是伪数组的形式
jQuery的操作方法只有jQuery元素对象可以使用,原生DOM对象不可以
3.原生DOM对象和jQuery对象转换
原生DOM元素对象 ===> jQuery元素对象
在原生DOM对象后面加上 [0] 或者 .get(0)
let div = $('div')[0] // 在原生DOM对象后面加上 [0] 或者 .get(0) 都可以将 jq 元素装欢成原生 DOM 元素 let div2 = $('div').get(0) console.log(div, div2);
jQuery元素对象 ===> 原生DOM元素对象
$(dom对象)
let div3 = $(document.querySelector('div')) console.log(div3);
三、获取元素
jquery 获取元素:$(‘选择器’)
$(function () { // 1. 类名 console.log($('.box')); // 2. id 名 console.log($('#foo')); // 3. 标签名 console.log($('h2')); // 4. 后代选择器 console.log($('ul li span')); // 5. 子代选择器 console.log($('ul>li')); // 6. 属性选择器 console.log($('[class=box]')); })
四、隐式迭代
意思就是jQuery可以同时操作一组元素
<body><div>元素1</div> <div>元素2</div> <div>元素3</div> <div>元素4</div></body><script>$(function() { $('div').css('background', 'pink')})</script>
五、筛选选择器
注意是放在 $(‘selector’) 里进行使用
// 1. 获取第一个子元素 console.log($('li:first')); // 2. 获取最后一个子元素 console.log($('li:last')); // 3. 获取第 index 个子元素 (jq 当中元素的索引 index 从 0 开始) console.log($('li:eq(2)')); // 4. 获取 索引号 为奇数 odd 的元素 (因为索引号是从 0 开始的,所以选出来的元素是第偶数个) console.log($('li:odd')); $('li:odd').css('background', '#abcdef') $('li:odd').css('width', '200px') // 5. 获取 索引号 为偶数 even 的元素 (因为索引号是从 0 开始的,所以选出来的元素是第奇数个) console.log($('li:even')); $('li:even').css('background', 'pink') $('li:even').css('width', '300px') $('li:even').css('listStyle', 'none')
六、事件绑定
jq对象.事件名称(function () { })
$(function() {$('div').click(function() {console.log('hello'); // jq 事件处理函数中 this 指向 原生DOM元素 })})
七、筛选方法(父级,后代,兄弟)
jq对象.方法名() 进行调用
// !!jq 中所有的方法都要加 () // 1. 获取父元素 console.log($('ul').parent()); // 1.1 获取指定的祖先元素 console.log($('li').parents()); // 2. 获取所有的子元素 console.log($('ul').children()); // 3. 查找获取所有的后代元素(包括子和孙) console.log($('.box').find('.foo')); // 4. 获取所有的兄弟元素(不包括自己) console.log($('.bar').siblings()); // 总结:以上方法的小括号中都可以使用 jq 的选择器;
// 1. 获取上一个元素 console.log($('.bar').prev()); // 1.1 获取前面所有的元素 console.log($('.bar').prevAll()); // 2. 获取下一个元素 console.log($('.bar').next()); // 2.1 获取后面所有的元素 console.log($('.bar').nextAll()); // 3. 判断某个元素是否包含某个特定的类名 console.log($('.bar').hasClass('foo')); // 4. (重要)获取第 n 个元素 (元素索引 n 从 0 开始) console.log($('li').eq(3));
八、排他思想
通过隐式迭代的方法给一组元素设置点击事件
$(function() {$('button').click(function() {$(this).css('background', 'pink').siblings().css('background', '') }) })
九、链式编程(一行代码解决问题)
原理:每次调用完 jq 方法后,会返回当前调用的 jq 对象
<body> <div class="father"> <div class="son"> Hello </div> <div class="foo"> world </div> </div> <script> // 链式编程:一行代码解决问题 // 改变 son 的背景颜色 改变 father 的背景 $(function() {$('.son').css('background', 'pink').parent().css('background', 'red').children('.foo').css('background', 'orange') }) // 链式编程的原因:每次调用完 jq 方法后,会返回当前调用的 jq 对象 </script></body>
赞 (0)