jQuery(二)
0. jQ对象是伪数组
//jQ得到的元素是个伪数组，中包含了需要设置的样式名和样式值
//伪数组：本质上不是一个数组，但是操作方式看起来像数组，但是注意它没有数组的方法
//所以像forEach()是不能用的
<ul>
<li>今天是jq第1天</li>
<li>今天是jq第2天</li>
<li>今天是jq第3天</li>
</ul>
<jscript>
console.log(document.querySelectorAll('li')) //NodeList(3) [li, li, li]
console.dir($('li')) //jQuery.fn.init(3)
console.dir($('li')[0]) //li
console.dir($('li').__proto__.constructor) // jQuery >> init()
console.log($('li')[0].__proto__.constructor) // htmlElement
</jscript>
1. jQuery操作样式
1. 1 css操作
缺点: 样式要自己写, 代码不能复用, 繁琐.
更符合实际开发的是单独在css里写样式, 给需要的元素添加相关类名, 利用层叠性覆盖
//语法:
css(name, value);
//使用案例
$('#one').css('background','gray');
设置多个样式
//jQ得到的元素是个伪数组，中包含了需要设置的样式名和样式值
//伪数组：本质上不是一个数组，但是操作方式看起来像数组，但是注意它没有数组的方法
//所以像forEach()是不能用的
//语法:
css(obj);
//使用案例
$('#one').css({
'background':'gray',
'width':'400px',
'height':'200px'
});
获取样式
//语法
css(name);
//案例
$('div').css('background-color');
<ul>
<li style="color:red">今天是jq第1天</li>
<li style="color:green">今天是jq第2天</li>
<li style="color:blue">今天是jq第3天</li>
</ul>
// 获取元素的样式,只能获取满足条件的第一个元素的样式值
console.log($('li').css('color')) //rgb(255, 0, 0)
1.2 class操作
添加样式类
//语法
addClass(name);
//例子,给所有的div添加one的样式。
$('div').addClass('one');
移除样式类
//语法
removeClass(name);
//例子，移除div中one的样式类名
$('div').removeClass('one');
判断是否有某个样式类
//name: 用于判断的样式类名，返回值为true false
hasClass(name)
//例子，判断是否有one的样式类
$('div').hasClass('one');
hasClass()能够判断所有元素是否有该类名, 不限于第一个元素
<ul>
<li name="li1" class="1">1</li>
<li name="li2" class="2">2</li>
<li name="li3" class="3">3</li>
</ul>
console.log($('li').hasClass('2')) //true
console.log($('li').hasClass('4')) //false
切换样式类
toggle /ˈtɒɡl/ 切换
//name:需要切换的样式类名，如果有，移除该样式，如果没有，添加该样式。
toggleClass(name);
//例子
$('div').toggleClass('one');
2. jQuery操作属性
2.1 attr操作
设置单个属性
//语法
attr(name, value);
//第一个参数：需要设置的属性名
//第二个参数：对应的属性值
//用法举例
$(“img”).attr('title','哎哟，不错哦');
$(“img”).attr('alt”,'哎哟，不错哦');
设置多个属性
//语法
attr(obj)
//参数是一个对象，包含了需要设置的属性名和属性值
//用法举例
$('img').mouseenter(function () {
$(this).attr({
src: './images/07.jpg',
width: '500px',
height: 500, //行内式可以不用加单位, 默认px
alt: '面向对象.jpg',
title: '真面向"对象"呀?',
myattr: 1 //不存在的自定义属性, 往里面添加
})
//传需要获取的属性名称，返回对应的属性值
attr(name)
//用法举例
var oTitle = $('img').attr('title');
alert(oTitle);
.attr(name) 和获取样式一样, 只能获取到第一个元素的对应属性
<ul>
<li name="li1">1</li>
<li name="li2">2</li>
<li name="li3">3</li>
</ul>
console.log($('li').attr('name')) //li1
移除属性
//参数：需要移除的属性名，
removeAttr(name);
//用法举例
$('img').removeAttr('title');
.removeAttr(name)会操作所有的元素 , 不限于第一个
<ul>
<li name="li1">1</li>
<li name="li2">2</li>
<li name="li3">3</li>
</ul>
$('li').removeAttr('name')
console.log($('li').attr('name')) //undefined
常见错误(jq对象和dom对象转换): attr()方法是jq方法, 如果要在循环里为每一个元素使用, 那么不能用\((name)[i]. attr() 而是要使用==\)(name).eq(i) .attr()==
<!DOCTYPE html>
<html>
<head lang="en">
<Meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
font-family: "Helvetica", "Arial", serif;
color: #333;
background-color: #ccc;
margin: 1em 10%;
}
h1 {
color: #333;
background-color: transparent;
}
a {
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
ul {
padding: 0;
}
li {
float: left;
padding: 1em;
list-style: none;
}
#imagegallery {
list-style: none;
}
#imagegallery li {
margin: 0px 20px 20px 0px;
padding: 0px;
display: inline;
}
#imagegallery li a img {
border: 0;
}
</style>
<script src="../js/jquery-1.12.4.min.js"></script>
</head>
<body>
<h2>美女画廊</h2>
<ul id="imagegallery">
<li><a href="images/1.jpg" title="美女A">
<img src="images/1-small.jpg" width="100" alt="美女1" />
</a></li>
<li><a href="images/2.jpg" title="美女B">
<img src="images/2-small.jpg" width="100" alt="美女2" />
</a></li>
<li><a href="images/3.jpg" title="美女C">
<img src="images/3-small.jpg" width="100" alt="美女3" />
</a></li>
<li><a href="images/4.jpg" title="美女D">
<img src="images/4-small.jpg" width="100" alt="美女4" />
</a></li>
</ul>
<div style="clear:both"></div>
<img id="image" src="images/placeholder.png" alt="" width="450px" />
<p id="des">选择一个图片</p>
<script>
//第一种方法
// $(function () {
// //把a标签的href存到自定义属性
// let as = $('#imagegallery a')
// for (i = 0; i < as.length; i++) {
// as.eq(i).attr('myhref', as.eq(i).attr('href'))
// //a标签跳转失效 href="javascript:;"
// as.eq(i).attr('href', 'javascript:;')
// }
// //点击li, 获取当前li的后代a的myhref, 赋值给#image的src
// $('li').click(function () {
// let src = $(this).find('a').attr('myhref')
// let txt = $(this).find('a').attr('title')
// $('#image').attr('src', src)
// $('#des').html(txt)
// })
// })
// 另一种方法: 用jq的even方法
$(function () {
$('ul li a').click(function (e) {
// e.stopPropagation() 阻止冒泡
e.preventDefault();// 阻止默认事件
$('#image').attr('src', $(this).attr('href'))
$('#des').text($(this).attr('title'))
})
})
</script>
</body>
</html>
2.2 prop操作
在jQuery1.6之后，对于checked、selected、disabled这类boolean类型的属性来说，不能用attr方法，只能用prop方法。
官方的建议: true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()。
prop:property属性
//设置属性
$(“input:checked”).prop(“checked”,true);
//获取属性
$(“input:checked”).prop(“checked”);//返回true或者false
//单选框和复选框的逻辑:
//1.单击复选框, 把单选框的状态和复选框一致
//2.单击单选框, 当选中的单选框数量等于单选框总数量时, 复选为true, 否则为false
$('input:checked') css的伪类选择器
jQ也有checked选择器 $(':checked'), 选取所有选中的复选框或单选按钮
https://www.w3school.com.cn/jquery/selector_input_checked.asp
3. jQuery动画+
3.1 三组基本动画
//语法
$(selector).show(speed,easing,callback)
| 参数 | 描述 |
|---|---|
| speed | 可选。规定显示效果的速度。默认为 "0". 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000) 备注: slow, normal, fast要加引号 |
| easing | 可选。规定在动画的不同点上元素的速度。默认值为 'swing'。可能的值：'swing'- 在开头/结尾移动慢，在中间移动快, 'linear' - 匀速移动 备注: linear 和swing要加引号 |
| callback | 可选。show() 方法执行完之后，要执行的函数。 |
slide动画:
3.2 自定义动画
animate: 自定义动画
$(selector).animate({params},[speed],[easing],[callback]);
// {params}：要执行动画的CSS属性，带数字（必选）
// speed：执行动画时长（可选）
// easing: 执行效果，默认为swing（缓动） 可以是linear（匀速）
// callback：动画执行完后立即执行的回调函数（可选）
3.3 动画队列与停止动画
在同一个元素上执行多个动画，那么对于这个动画来说，后面的动画会被放到动画队列中，等前面的动画执行完成了才会执行。
//stop方法：停止动画队列中的所有动画效果
//jq对象.stop().当前要调用的动画
stop(clearQueue, jumpToEnd);
//第一个参数(可选)：是否清除队列
//第二个参数(可选)：是否跳转到最终效果
<script>
$(function () {
//鼠标移入
$('li').mouseenter(function () {
$(this).children('ul').stop().slideDown();
});
// 鼠标移出
$('li').mouseleave(function () {
$(this).children('ul').stop().slideUp();
});
});
</script>
4. 其他
隐式迭代
jQ内的方法普遍遍历内部的dom数组
js用单引号
为形成个人代码风格, 后续js一律有限单引号
js不用分号结束
es6推荐不使用;号结束一行代码, 为节省按键, 后续省略分号, 但如果下一行行首是(或者[, 就必须加分号, 不然会解析错误
jQ的链式写法
$(*this*).addClass('active').siblings().removeClass('active')
实际上链式操作仅仅是通过对象上的方法最后return this
把对象再返回回来，对象当然可以继续调用方法啦，所以就可以链式操作了
浏览器调试模式常见错误
访问一个不存在的变量，则报错，访问对象的不存在的属性，返回undefined
使a标签跳转失效
方法一: href="javascript:;"
event.preventDefault() 方法阻止元素发生默认的行为。
例如：
- 当点击提交按钮时阻止对表单的提交
- 阻止以下 URL 的链接
元素.click.(function(e){
e.preventDefault()
})
//联想: DOM Event 对象也有preventDefault()方法
//e.stopPropagation(), 不再派发事件,阻止冒泡
