JavaScript
- 什么是jQuery
- jQuery对象
- 相互转化
- jQuery API
- 筛选选择器
- 筛选方法
- jQuery获取
- 操作方法
- jQuery效果
- prop() 属性值
- attr()
- 数据缓存
- 获取内容
- 元素操作
来源博客:【Harryの心阁】
什么是jQuery
- jQuery是一个JavaScript函数库。jQuery是一个轻量级的"写的少,做的多"的JavaScript库。
- jQuery库包含以下功能:
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
<script src="https://cdn.jsdelivr.net/gh/Rr210/hexofixed@v0.47/js/jquery-3.5.1.min.js"></script>
jQuery对象
- 等待页面加载完毕
$(document).ready(function(){})
或者$(function(){})
-
$
是jQuery的别称,dollar符号,顶级对象 - 原生jsDOM对象,jQuery对象
$()
里面不能使用原生属性和方法
相互转化
- DOM对象转化为jQuery对象,
$(obj)
- jQuery对象转化为DOM对象
$('div')[index]
或者$('div').get(index)
jQuery API
- 选择器
$('')
与css获取一致 - 隐式迭代
$('').css('','')
(伪数组形式存储)
筛选选择器
- 筛选元素的方法-
first/last/eq(index)/odd/even
$(function(){
$('ul li:first').css('color','red'); //获取第一个元素
$('ul li:last').css('fontSize','20px');//获取最后一个
$('ul li:eq(4)').css('backgroundColor','#ccc');//获取指定元素
$('ul li:odd').css('textShadow','1px 2px 3px #ccc'); //获取偶数元素
$('ul li:even').css('textIndent','10px');//获取奇数元素
$('ul').css('listStyle','none')
})
筛选方法
-
parent()
,最近一级的父代 -
children()
亲儿子 -
find()
包括儿子和孙子 $().mouseover/mouseout
-
$(this)
当前元素,this
不要加引号 - 兄弟元素
$().siblings
,除了自身的所有元素 -
nextAll([])
,查找元素之后所有的同辈元素,prevAll([expr])
查找之前的所有同辈元素 -
hasClass('类名')
, 检查当前元素是否含有某个特定的类,如果有,返回true -
eq(index)
或者使用选择器$(li:eq(index))
-
partent()
children()`` find()`` eq()
-
$(this).index()
得到当前元素的索引号
<style>
*{
padding: 0;
margin: 0;
}
section{
width: 600px;
height: 200px;
background-color: #ccc;
margin: 100px auto;
display: flex;
overflow: hidden;
border-radius: 10px;
border: 1px solid rgb(78, 177, 202);
}
ul{
flex:1;
display: flex;
flex-direction: column;
}
ul li{
flex: 1;
border-bottom: 2px solid rgb(194, 150, 83);
text-align: center;
line-height: 50px;
}
li{
list-style: none;
}
.content{
flex:5
}
.content img {
width: 100%;
vertical-align: middle;
}
</style>
<body>
<section>
<ul>
<li>你好世界</li>
<li>你好世界</li>
<li>你好世界</li>
<li>你好世界</li>
</ul>
<div class="content">
<li><img src="https://cdn.jsdelivr.net/gh/Fuukei/WebP_API/PC/web-illust_66413382_20171223_233200.webp" alt=""></li>
<li><img src="https://cdn.jsdelivr.net/gh/Fuukei/WebP_API/PC/web-illust_71658260_20181119_230056.webp" alt=""></li>
<li><img src="https://tva1.sinaimg.cn/large/a15b4afely1fnt9605xzwj21hc0u07ld.jpg" alt=""></li>
<li><img src="https://cdn.jsdelivr.net/gh/Fuukei/WebP_API/PC/web-illust_69810542_20180804_165122.webp" alt=""></li>
</div>
</section>
<script>
$(function(){
$('ul li').eq(3).css('border-bottom','none');
$('.content li').eq(0).siblings().hide();
$('ul li').mouseover(function(){
var index = $(this).index();
$('.content li').eq(index).show();
$('.content li').eq(index).siblings().hide();
})
})
</script>
jQuery获取
- jQuery.parent(expr),找父亲节点,可以传入expr进行过滤,比如(“span”).parent(".class")
- jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素
- jQuery.children(expr),返回所有子节点,这个方法只会返回直接的孩子节点,不会返回所有的子孙节点
- jQuery.contents(),返回下面的所有内容,包括节点和文本。这个方法和children()的区别就在于,包括空白文本,也会被作为一个jQuery对象返回,children()则只会返回节点
- jQuery.prev(),返回上一个兄弟节点,不是所有的兄弟节点
- jQuery.prevAll(),返回所有之前的兄弟节点
- jQuery.next(),返回下一个兄弟节点,不是所有的兄弟节点
- jQuery.nextAll(),返回所有之后的兄弟节点
- jQuery.siblings(),返回兄弟姐妹节点,不分前后
- jQuery.find(expr),跟jQuery.filter(expr)完全不一样:
- jQuery.filter(),是从初始的jQuery对象集合中筛选出一部分,而
- jQuery.find(),的返回结果,不会有初始集合中的内容,比如(“p span”)`
操作方法
- 属性名一定要加引号,数值不需要加引号
- 符合属性,用
,
隔开,并用驼峰名法.css({,})
- 设置类样式
- 添加类
addClass('不需要加.')
- 删除类`removeClass(‘类名’)
- 切换类
toggleClass('类名')
- 链式操作
jQuery效果
显示隐藏
- show() hide() toggle() 显示 隐藏 切换
- show([speed,[easeing],[fn]])
滑动
- slideDown() 向下滑动
- slideUp() 向上滑动
- slideToggle()
- hover(over,out) 事件切换
- 包括鼠标经过离开的符合写法
- 只写一个参数 使用
sildeToggle()
, 使用stop() 结束上一次动画
淡入淡出
-
fadeIn()
淡入效果 -
fadeOut()
淡出效果 -
fadeToggle()
淡入淡出切换 fadeTo('[speed],opacity,[easeing],[fn]')
自定义动画
- animate(params,[speed])
- params 以对象形式传递{ },属性名可以不带引号,复合属性使用驼峰命名法
- 手风琴案例
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.box{
width: 950px;
margin: 100px auto;
height: 100px;
background-color: rgb(213, 233, 125);
}
ul {
width: 1000px;
height: 100%;
list-style: none;
margin: 0;
padding: 0;
}
li{
position: relative;
float: left;
width: 100px;
height: 100px;
margin: 0;
margin-right: 20px;
border-radius: 10px;
overflow: hidden;
}
li .small{
position: absolute;
width: 100px;
height: 100px;
top:0;
z-index: 100;
}
li .big{
display: none;
width: 224px;
height: 100%;
}
ul li:nth-child(1){
width: 224px;
}
ul li:nth-child(1) .small{
display: none;
}
ul li:nth-child(1) .big{
display: block;
}
</style>
<body>
<div class="box">
<ul>
<li><img src="https://cdn.jsdelivr.net/gh/Rr210/image@master/admin/qqavatar.jpeg" alt="" class="small"><img src="https://cdn.jsdelivr.net/gh/Rr210/image@master/hexo/4/161211-1552378331dafb.webp" alt="" class="big"></li>
<li><img src="https://cdn.jsdelivr.net/gh/Rr210/image@master/admin/qqavatar.jpeg" alt="" class="small"><img src="https://cdn.jsdelivr.net/gh/Rr210/image@master/hexo/4/161211-1552378331dafb.webp" alt="" class="big"></li>
<li><img src="https://cdn.jsdelivr.net/gh/Rr210/image@master/admin/qqavatar.jpeg" alt="" class="small"><img src="https://cdn.jsdelivr.net/gh/Rr210/image@master/hexo/4/161211-1552378331dafb.webp" alt="" class="big"></li>
<li><img src="https://cdn.jsdelivr.net/gh/Rr210/image@master/admin/qqavatar.jpeg" alt="" class="small"><img src="https://cdn.jsdelivr.net/gh/Rr210/image@master/hexo/4/161211-1552378331dafb.webp" alt="" class="big"></li>
<li><img src="https://cdn.jsdelivr.net/gh/Rr210/image@master/admin/qqavatar.jpeg" alt="" class="small"><img src="https://cdn.jsdelivr.net/gh/Rr210/image@master/hexo/4/161211-1552378331dafb.webp" alt="" class="big"></li>
<li><img src="https://cdn.jsdelivr.net/gh/Rr210/image@master/admin/qqavatar.jpeg" alt="" class="small"><img src="https://cdn.jsdelivr.net/gh/Rr210/image@master/hexo/4/161211-1552378331dafb.webp" alt="" class="big"></li>
<li><img src="https://cdn.jsdelivr.net/gh/Rr210/image@master/admin/qqavatar.jpeg" alt="" class="small"><img src="https://cdn.jsdelivr.net/gh/Rr210/image@master/hexo/4/161211-1552378331dafb.webp" alt="" class="big"></li>
</ul>
</div>
<script>
$(function(){
$('.box').css('borderRadius',10)
$('.box ul li').mouseenter(function(){
$(this).stop().animate({
width:224
},200).children('.small').stop().fadeOut().siblings('.big').stop().fadeIn();
$(this).siblings('li').stop().animate({
width: 100
},200).children('.big').stop().fadeOut().siblings().stop().fadeIn();
})
})
</script>
prop() 属性值
-
element.prop('属性名')
获得固有属性值 prop('属性名','属性值')
attr()
-
attr('属性名')
元素的自定义属性 - 设置和prop方法一致
数据缓存
-
data('key','value')
存放在元素的内存里面 - 获取的时候(
data('key')
) - 或者H5自定义属性,不需要加
data-
,而且返回的是数字型
<body>
<style>
* {
margin: 0;
padding: 0;
}
body{
font-size: 13px;
}
table{
text-align: center;
margin: 100px auto;
border-radius: 10px;
overflow: hidden;
}
thead{
background-color: #008dd0;
}
</style>
<body>
<table width="300px" border="1" cellspacing="0">
<thead>
<tr>
<th><label for="all">全选<input type="checkbox" id="all"></label></th>
<th>hello</th>
<th>world</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>你好世界</td>
<td>你好世界</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>你好世界</td>
<td>你好世界</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>你好世界</td>
<td>你好世界</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>你好世界</td>
<td>你好世界</td>
</tr>
</tbody>
</table>
<script>
$(function(){
$('#all').change(function(){
$('td input').prop('checked',$(this).prop('checked'))
console.log($(this).prop('checked'));
})
$('td input').attr('data-index',1);
console.log($('td input').attr('data-index'));
$('td input').change(function(){
console.log($(this).prop('checked'));
if($('td input:checked').length == $('td input').length){
$('#all').prop('checked',true);
}else{
$('#all').prop('checked',false);
}
})
})
// var main = document.getElementById('all');
// var input = document.querySelector('tbody').getElementsByTagName('input');
// // 当点击全选按钮时,下方的选框同步
// main.onclick = function () {
// console.log(this.checked);
// for (var i = 0; i < input.length; i++) {
// input[i].checked = this.checked;
// }
// }
// // 当去除下方选框,或者全部将input选框点击或取消时,全选按钮同步发生改变
// for (var i = 0; i <= input.length - 1; i++) {
// input[i].onclick = function () {
// var flag = true;
// for (var i = 0; i <= input.length - 1; i++) {
// if (!input[i].checked) {
// flag = false;
// }
// }
// main.checked = flag;
// }
// }
</script>
</body>
获取内容
-
html()
带有标签 -
text()
只获取文本 - 表单中的值
val()
- 获取指定的祖先元素
$(this).partents('类名')
, -
(n*n).toFixed(2)
保留两位小数
元素操作
- 遍历元素
$('类').each(回调函数function(index,domEle))
可以自己命名 -
$.each($('类')
,function(index,domELe))
,遍历数组
$(function () {
$('#all').change(function () {
$('td .da').prop('checked', $(this).prop('checked'))
// console.log($(this).prop('checked'));
})
$('td .da').attr('data-index', 1);
// console.log($('td .da').attr('data-index'));
$('td .da').change(function () {
// console.log($(this).prop('checked'));
console.log($('td .da').length / 2);
if ($('td .da:checked').length == $('td .da').length) {
$('#all').prop('checked', true);
} else {
$('#all').prop('checked', false);
}
})
// 购物车🚗增加案例
$('.box .adds').click(function () {
var n = $(this).siblings('#nums').val();
n++;
// console.log($(this).siblings('#nums').val(n));
$(this).siblings('#nums').val(n);
// 计算小计金额
var p = $(this).parents('td').next('.tup').text().substr(1);
// console.log($(this).parents('td').eq(2).text('¥' + (p * n).toFixed(2)));
$(this).parents('td').next('.tup').next('.xj').text('¥' + (p * n).toFixed(2));
getSum();
})
$('.box .subs').click(function () {
var n = $(this).siblings('#nums').val();
if (n <= 1) {
return false;
}
n--;
// console.log($(this).siblings('#nums').val(n));
$(this).siblings('#nums').val(n);
// 计算小计金额
var p = $(this).parents('td').next('.tup').text().substr(1);
$(this).parents('td').next('.tup').next('.xj').text('¥' + (p * n).toFixed(2));
getSum();
})
// 当文本框中的数量发生变化时,小计同步变化
$('#nums').change(function () {
console.log($(this).parents('td').next().text().substr(1));
var con = $(this).val();
console.log($(this).val());
var p = $(this).parents('td').next().text().substr(1);
$(this).parents('td').next().next().html('¥' + (p * con).toFixed(2));
if ($(this).val() == 1) {
$(this).parents('td').next().next().html() = $(this).parents('td').next().text()
}
getSum();
})
// 计算总计数量
getSum();
function getSum() {
var count = 0;
var money = 0;
$('td #nums').each(function(n,ele){
count += parseInt($(ele).val());
})
$('.xj').each(function(n,ele){
money += parseFloat($(ele).text().substr(1));
})
$('.count').text(count);
$('.money').text(money.toFixed(2));
}
})