jQuery第一天
1.为什么要学jQuery
jq主要是来实现页面用户交互操作的
1.获取元素的方式很简单
2.不用考虑兼容性问题
3.jQuary提供了很多动画相关的函数,动画制作方便
4.代码比原生js简单了很多
2.jQuery初体验
<script>
$('#btn1').click(function () {
// jq的隐藏特性 隐式迭代:不需要手动写for循环了,会自动进行遍历
$('div').css('display', 'block');
})
$("#btn2").click(function () {
$('div').text('哈哈哈哈');
});
</script>
3.*入口函数*
写法:
//写法1
$(document).ready(function() {
});
//写法2 推荐
$(function() {
});
好处:
1.等元素解析完毕再执行jq,保证能获取到元素
2.自己在一个区域内,防止全局变量污染
与js的window.onload的区别:
1.如果window.onload绑定多次,会造成覆盖。而jq的入口不会覆盖,可以同时添加多个。
2.jq的入口函数先触发,在解析完页面结构时就会触发。 window.onload在页面元素全部加载完毕之后才会触发。
4.jQuery使用步骤
1.引入js文件
<script src="jquery-1.11.1.js"></script>
如果不考虑兼容性,随意引入哪个版本都行
2.写入口函数
$(function(){ });
3.在函数内部实现需求功能
1.获取元素、2.事件绑定、3.分析业务、4.找到api实现
$(function () {
$('.groupTitle').click(function () {
$(this).next().slideToggle();
})
})
5.*jQuery对象与DOM对象*
dom对象:
通过原生js方法获取元素返回的对象就是dom对象
dom对象 转 jq对象:
$( dom对象 )
jq对象:
通过$() 获取元素返回的对象就是jq对象
jq对象 转 dom对象
通过下标取出对应下标的dom对象
[index] 或 get(index)
注意:
1. DOM对象与jQuery对象的方法不能混用。
2. DOM对象可以和jQuery对象相互转化
6.$符号的详解
$是jq提供的函数
参数为 | 作用 | 语法表示 |
---|---|---|
函数 | 入口函数 | $(function(){}) |
选择器 | 获取元素 | 如$(“div”) |
dom对象 | 将dom对象转成jq对象 | $(dom对象) |
7.*选择器*
什么是jQuery选择器?
1.jQuery选择器是jQuery为我们提供的一组方法,让我们更加方便的获取到页面中的元素。
2.jQuery选择器有很多,基本兼容了CSS1到CSS3所有的选择器,并且jQuery还添加了很多更加复杂的选择器。
3.jQuery选择器返回的是jQuery对象。
css选择器
jQuery完全兼容css选择器
名称 | 用法 | 描述 |
---|---|---|
ID选择器 | $(“#id”); | 获取指定ID的元素 |
类选择器 | $(“.class”); | 获取同一类class的元素 |
标签选择器 | $(“div”); | 获取同一类标签的所有元素 |
并集选择器 | $(“div,p,li”); | 使用逗号分隔,只要符合条件之一就可。 |
交集选择器 | $(“div.redClass”); | 获取class为redClass的div元素 |
子代选择器 | $(“ul>li”); | 使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素 |
后代选择器 | $(“ul li”); | 使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等 |
过滤选择器
这类选择器都带冒号:
名称 | 用法 | 描述 |
---|---|---|
:eq(index) | $(“li:eq(2)”).css(“color”, ”red”); | 获取到的li元素中,选择索引号为2的元素,索引号index从0开始。 |
:odd | $(“li:odd”).css(“color”, ”red”); | 获取到的li元素中,选择索引号为奇数的元素 |
:even | $(“li:even”).css(“color”, ”red”); | 获取到的li元素中,选择索引号为偶数的元素 |
:first | $(“li:first”).css(“color”, ”red”); | 获取到的li元素中的第一个 |
:last | $(“li:last”).css(“color”, ”red”); | 获取到的li元素中的最后一个 |
筛选选择器(方法)
筛选选择器的功能与过滤选择器有点类似,但是用法不一样,
筛选选择器
主要是方法。
名称 | 用法 | 描述 |
---|---|---|
children(selector) | $(“ul”).children(“li”) | 获取当前元素的所有子元素中的li元素 |
find(selector) | $(“ul”).find(“li”); | 获取当前元素中的后代元素中的li元素 |
siblings(selector) | $(“#first”).siblings(“li”); | 查找兄弟节点,不包括自己本身。 |
parent() | $(“#first”).parent(); | 查找父亲 |
eq(index) | $(“li”).eq(2); | 相当于$(“li:eq(2)”) ,index从0开始 |
next() | $(“li”).next() | 找下一个兄弟 |
prev() | $(“li”).prev() | 找上一次兄弟 |
8.一些方法
1.index() 获取当前元素在所有兄弟中的索引
2.show() 展示 hide() 隐藏
3.css() 操作样式
(1)css(属性名称,属性值)
(2)css({属性名称:属性值,属性名称:属性值})
注意:方法是js的二次封装,是函数,调用必须加括号
9.*几个案例*
【案例:下拉菜单】
<script>
// 函数入口
$(function () {
//1.用$(dom对象)得到jq对象
//2.添加鼠标移入事件
$('a').mouseenter(function () {
//3. 隐式迭代:不需要手动写for循环了,会自动进行遍历。
//当前a的兄弟元素都向下滑动打开
$(this).siblings('ul').slideDown();
})
$('a').mouseleave(function () {
//当前a的兄弟元素都向上滑动收起
$(this).siblings().slideUp();
})
})
</script>
【案例:突出展示】
<script>
$(function () {
$('li').mouseenter(function () {
//排他思想:当前li的透明度都变亮,他的兄弟元素变暗
$(this).css('opacity', '1');
$(this).siblings().css('opacity', '0.3');
})
/*
// 如果用li移出,鼠标移到li外面的空隙会有变化。
$('li').mouseleave(function () {
$('this').css('opacity', '1');
})
*/
//用li的父元素获取当前li控制鼠标移出则不会有bug
$('.wrap').mouseleave(function () {
// console.log($(this));
$(this).find('li').css('opacity', 1);
})
})
</script>
【案例:手风琴】
<script>
// 1.获取所有的标题
// 2.为标题绑定click事件
// 3.在事件中找到当前标题的下一个div元素,让其展开,同时让其它的任何的被展开的div合并
$(function () {
$('.groupTitle').click(function () {
// $(this).next().slideDown()
// slideToggle:实现展开和合并的切换,如果是展开的,就合并,如果是合并的就展开
$(this).next().slideToggle()
$(this).parent().siblings().find('div').slideUp()
})
})
</script>
【案例:淘宝精品】
<script>
// 我们发现:导航项的索引应该对应着图片的索引(右侧应该进行单独的处理)
// 处理这个效果的关键问题在于能够到当前li的索引,从而让对应索引位置的图片显示,让其它的图片隐藏
// index()只能获取当前元素在所有兄弟元素中的索引,它是jq的方法
$(function () {
// 获取所有图片
let $imgs = $('#center li')
// console.log($('#left>li,#right>li'))
// $('#left>li,#right>li').mouseenter(function () {
// 这种方式获取索引值有问题
// console.log($(this).index())
// })
$('#left>li').mouseenter(function () {
let index = $(this).index()
// fadeIn():渐渐显示
// fadeOut():渐渐消失
$imgs.eq(index).siblings().fadeOut()
$imgs.eq(index).fadeIn()
})
$('#right>li').mouseenter(function () {
let index = $(this).index() + $('#left>li').length
// fadeIn():渐渐显示
// fadeOut():渐渐消失
$imgs.eq(index).siblings().fadeOut()
$imgs.eq(index).fadeIn()
})
})
</script>
10.区分jQuery与Javascript
–JavaScript是一门编程语言,jQuery仅仅是用JavaScript实现的一个JavaScript库,目的是简化我们的开发。
–JavaScript库:把JavaScript里面经常用的功能代码封装成一个文件,使用的时候直接引进来即可。
–JavaScript是一门编程语言,用来编写客户端浏览器脚本。
11.jq对象是个伪数组
伪数组:本质上不是一个数组,但是操作方式看起来像数组,但是注意它没有数组的方法
<body>
<ul>
<li>今天是jq第1天</li>
<li>今天是jq第2天</li>
<li>今天是jq第3天</li>
</ul>
<script>
// 伪数组:本质上不是一个数组,但是操作方式看起来像数组,但是注意它没有数组的方法
let obj = {
0: "a",
1: "b",
2: "c",
length: 3
}
// 对象有两种取值方式:对象.属性 + 对象[属性]
for (let i = 0; i < obj.length; i++) {
console.log(obj[i])
}
[].push.call(obj, 'd')
console.log(obj)
console.log(document.querySelectorAll('li'))
console.dir($('li'))
console.dir($('li').__proto__.constructor) // jQuery >> init()
console.log($('li')[0].__proto__.constructor) // htmlElement
</script>
</body>