文章目录
JQuery框架
该部分需要下载个jquery.js文件，我下载的是jquery-3.6.0.js
<script src="jquery-3.6.0.js"></script>要注意文件jquery-3.6.0.js放在哪，位置不同，" "内的内容不同
找到某标签，读或设置其style、属性
css,attr
<script src="jquery-3.6.0.js"></script>
<body>
<h1>Hello</h1>
<h1>World</h1>
<script>
// 找出页面中的所有h1标签，设置其颜色为红色
// 核心函数：工厂函数，相当于document.getElementByTagName('h1')
// 工厂函数返回值就是一个jquery对象
$('h1').css('color','red'); // 一个参数为读，两个参数为写
$('h1').attr('haha','123'); // 设置属性
alert(a);
</script>
</body>
2、核心函数：$('选择器') 或者 jQuery('选择器')
按照选择器的规则在网页中选取元素，将所有选中的元素包装成JQuery对象并返回
| 种类 | 选择器 |
|---|---|
| id选择器 | #id名 |
| 类选择器 | .类名 |
| 标签选择器 | 标签名 |
| 伪类选择器 | a:hover |
| 后代选择器 | A B |
| 子选择器 | A>B |
设置style
<script src="jquery-3.6.0.js"></script>
<body>
<div>
<p>层中的段落</p>
<a href="#">百度</a>
<section><p>abc</p></section>
<div> </div>
</div>
<p class="odd">层外部的段落1</p>
<p class="even">层外部的段落2</p>
<p class="odd">层外部的段落3</p>
<p id="p4">层外部的段落4</p>
<script>
// 设置所有的段落中的文字的颜色为红色
$('p').css('color','red'); // 一个参数为读，两个参数为写
// 设置所有实施了类样式odd的元素加一个边框
$('.odd').css('border','1px solid red');
// 选取id为p4加边框
$('#p4').css('border','1px solid red');
// 选取div后代p加边框,子孙后代都选
$('div p').css('border','1px solid red');
// 选取div子代p加边框，只能子代，不能孙代
$('div>p').css('border','1px solid red');
</script>
</body>
工厂函数的返回值是一个jQuery对象，只能调用jQuery属性和方法,不能再调用JavaScript中元素对象的属性和方法
jquery对象=>dom元素对象：jquery对象名[下标]
dom元素对象=>jquery对象：$(dom元素对象名)
<script>
// $('p').style.border='1px solid red'; //$('p')是jquery对象 错误
// jquery对象=>dom元素对象 $('p')[0]是dom元素对象
$('p')[0].style.border='1px solid red';
$($('p')[0]).css('border','1px solid red'); // dom元素对象=>jquery对象
</script>
事件驱动
事件名前面没有on：click,dblclick,mouseover
订阅事件处理函数：jquery对象.bind('事件名'，function(){})或jquery对象.事件名(function(){})
单击添加、取消边框
<script src="jquery-3.6.0.js"></script>
<body>
<p class="odd">层外部的段落3</p>
<p id="p4">层外部的段落4</p>
<button id="btnSet">设置段落边框</button>
<script>
$('#btnSet').click(function(){
if(parseInt($('p').css('borderWidth'))){
$('p').css('border','0px none black');
}else{
$('p').css('border','1px solid red');
}
});
</script>
</body>
取消绑定事件
jquery对象.unbind():取消jquery对象上所有事件的所有事件处理函数
jquery对象.unbind(事件名):取消jquery对象上指定事件的所有事件处理函数
jquery对象.unbind(事件名，函数名):取消jquery对象上指定事件的指定事件处理函数
<style>
#div1{
width: 200px;
height: 200px;
border:1px solid red;
}
</style>
<script src="jquery-3.6.0.js"></script>
</head>
<body>
<div id="div1"></div>
<button id="btnBind">绑定事件处理函数</button>
<button id="btnUnBind1">取消绑定所有事件处理函数</button>
<button id="btnUnBind2">取消绑定click事件处理函数</button>
<button id="btnUnBind3">取消绑定click事件f1处理函数</button>
<script>
$('#btnBind').click(function(){
//给div绑定click mousemove事件的处理函数
$('#div1').click(f1 = function(){
console.log('第一个单击事件处理函数')
}).click(function(){ // 连缀写法
console.log('第二个单击事件处理函数')
}).mousemove(function(){
console.log('鼠标移动');
})
});
$('#btnUnBind1').click(function(){
$('#div1').unbind();
});
$('#btnUnBind2').click(function(){
$('#div1').unbind('click');
});
$('#btnUnBind3').click(function(){
$('#div1').unbind('click',f1);
});
</script>
</body>
特殊事件处理函数的绑定：
jquery对象.one(事件名，function(){}) ：时间处理函数只响应一次事件的发生，就自动取消绑定
绑定只响应一次
<style>
#div1{
width: 200px;
height: 200px;
border:1px solid red;
}
</style>
<script src="jquery-3.6.0.js"></script>
<body>
<div id="div1"></div>
<button id="btnOne">取消绑定click事件f1处理函数</button>
<script>
$('#btnOne').click(function(){
$('#div1').one('mouseover',function(){
console.log('响应一次')
});
});
</script>
</body>
经常组合使用的：mouseover和mouseleave
鼠标悬停在标题显示内容，否则不显示
<script src="jquery-3.6.0.js"></script>
</head>
<body>
<div id="news">
<h3>新闻标题</h3>
<div class="content" style="display: none;">新闻内容</div>
</div>
<script>
$('#news>h3').mouseover(function(){
$(this).next().css('display','block');
}).mouseleave(function(){
$(this).next().css('display','none');
});
</script>
</body>
选择器
所有css选择器就是基础选择器
过滤器
下标过滤器：基本选择器:下标过滤器
| 函数 | 说明 |
|---|---|
| first | 下标=0 |
| last | 下标=长度-1 |
| even | 下标值为偶数 |
| odd | 下标值为奇数 |
| eq(index) | 下标值=index |
| gt(index) | 下标值>index |
| lt(index) | 下标值>index |
隔行换色
<script src="jquery-3.6.0.js"></script>
</head>
<body>
<table>
<tr>
<td>商品名称</td>
<td>单价</td>
<td>库存数量</td>
<td>折扣率</td>
</tr>
<tr>
<td>毛尖茶</td>
<td>60</td>
<td>1000</td>
<td>0.9</td>
</tr>
<tr>
<td>普洱</td>
<td>120</td>
<td>100</td>
<td>0.99</td>
</tr>
<tr>
<td>铁观音</td>
<td>50</td>
<td>300</td>
<td>0.8</td>
</tr>
<tr>
<td>君山银针</td>
<td>80</td>
<td>230</td>
<td>0.85</td>
</tr>
<tr>
<td>大红袍</td>
<td>10000</td>
<td>30</td>
<td>1</td>
</tr>
</table>
<script>
//$('tr:odd').css('backgroundColor','#999'); // odd过滤器 偶数行背景色
//$('tr:even').css('backgroundColor','#ccc'); // even过滤器 奇数行背景色
$('tr:gt(2)').css('backgroundColor','#ccc'); // gt过滤器 第3行以后的背景色
</script>
</body>
属性过滤器： 基本过滤器[属性过滤器]
| 函数 | 说明 |
|---|---|
| 属性名 | 保留有属性名指定属性的 |
| 属性名=value | 有属性并且属性值=value |
| 属性名^=value | 有属性并且属性值以value开始 |
| 属性名$=value | 有属性并且属性值以value结尾 |
| 属性名*=value | 有属性并且属性值包含value |
<body>
<ul>
<li>苹果</li>
<li price="20">水蜜桃</li>
<li>菠萝</li>
<li price="18">火龙果</li>
<li price="10">香蕉</li>
</ul>
<script src="jquery-3.6.0.js"></script>
<script>
// $('li[price]').css('color','red');//修改有属性price的li的字体颜色
// $('li[price^="1"]').css('color','red');//修改有属性price以1开头的li的字体颜色
$('li[price$="0"]').css('color','red');//修改有属性price以0结尾的li的字体颜色
</script>
</body>
内容过滤器： 基本选择器:内容过滤器
| 函数 | 说明 |
|---|---|
| contains(文本) | 元素的内容中包含文本 |
| empty | 没有内容的 |
| parent | 有内容的 |
| has(选择器) | 内容中包含有选择器选取的元素 |
<body>
<div></div>
<div>我和我的团</div>
<div>我的父亲</div>
<div><a href="#">百度</a></div>
<script src="jquery-3.6.0.js"></script>
<script>
$('div:contains(我)').css('color','red');// 内容中包含我
$('div:empty').css('width','100px').css('height','50px').css('border','1px solid red');// 设置div为空的style
$('div:has(a)').css('width','100px').css('height','50px').css('border','1px solid red');// 设置div中有a标签的style
</script>
</body>
表单选择器
专门用于获取表单中的表单元素
| 函数 | 说明 |
|---|---|
| :input | 选择所有的表单元素 |
| :text | 选择所有的文本框 |
| :password | 选择所有的密码文本框 |
| :radio | 选择所有的单选按钮 |
| :checkbox | 选择所有的复选框 |
<body>
<form action="#" method="post">
<input type="text" placeholder="abc"><br>
<input type="text" placeholder="def"><br>
<input type="password" placeholder="登入密码"><br>
<input type="password" placeholder="银行密码"><br>
<input type="radio" name="gender">男<br>
<input type="radio" name="gender">女<br>
<input type="checkbox">看书<br>
<input type="checkbox">踢足球<br>
<input type="checkbox">玩游戏<br>
<input type="checkbox">交女朋友<br>
</form>
<script src="jquery-3.6.0.js"></script>
<script>
$(':input').css('border','1px solid red'); // 所有
console.log($(':input'));
console.log($(':text')); // text框个数
console.log($(':radio'));
console.log($(':checkbox'));
</script>
</body>
其他选择器
| 函数 | 说明 |
|---|---|
| ：disabled | 禁用的 |
| ：enabled | 启用的 |
| ：checked | 选中的 |
| ：selected | 被选中的 |
| ：hidden | 隐藏的 |
| ：visible | 可见的 |
操作元素的html属性，样式属性，内容等的方法
| 函数 | 说明 |
|---|---|
| prop() | 读写系统定义的属性 |
| attr() | 读写所有的属性，包括了自定义的属性 |
<body>
<a href="http://www.baidu.com"></a>
<a href="http://www.cmblogs.com"></a>
<button id="btnPropR">读href属性值</button>
<button id="btnPropW">修改href属性值</button>
<button id="btnNewAttr">新增xx属性值</button>
<button id="btnReadAttr">读属性值</button>
<script src="jquery-3.6.0.js"></script>
<script>
$('#btnPropR').click(function(){
// 读取第一个超链接元素的href属性值
alert($('a').prop('href'));
})
$('#btnPropW').click(function(){
// 修改所有a超链接元素的href属性值
$('a').prop('href','www.baidu.com');
})
$('#btnNewAttr').click(function(){
// 给超链接新增一个xx属性
$('a').attr('xx','www.baidu.com'); //attr可以新增自定义属性，prop只能新增系统定义的属性
})
$('#btnReadAttr').click(function(){
// 读取超链接新增的xx属性
alert($('a').attr('xx')); //attr可以新增自定义属性，prop只能新增系统定义的属性
})
</script>
</body>
读取标签html、内容
<script src="jquery-3.6.0.js"></script>
<body>
<p class="odd">层外<a>部的</a>段落3</p>
<script>
console.log($('p').html()); // 输出html 层外<a>部的</a>段落3
$('p').html('插入内容'); // 修改内容
console.log($('p').html()); //输出html 插入内容
</script>
</body>
删除添加类样式名
| 函数 | 说明 |
|---|---|
| css() | 读写样式属性值，一次只能读写一个样式属性 |
| addClass() | 添加类样式名 |
| removeClass() | 删除类样式名 |
| $(this).parent().remove() | 删除该节点的父节点 |
<style>
.a{
color:red;
}
.b{
font-size: 20px;
}
.c{
background-color: pink;
}
</style>
<body>
<div id="div1" >这是一个层</div>
<button class="create">新增一个类样式</button>
<button class="delete">删除一个类样式</button>
<script src="js/jquery.min.js"></script>
<script>
$('.create').click(function(){
//原来没有类样式，添加a类，原有1个类样式，添加b类
//原有2个类样式，添加c类，原有3个类样式，弹出对话框
var div = $('#div1')[0];
switch(div.classList.length){
case 0:$(div).addClass('a');break;
case 1:$(div).addClass('b');break;
case 2:$(div).addClass('c');break;
case 3:alert('已经满了，不能添加类样式了');break;
}
})
$('.delete').click(function(){
//如果有类样式，就删除掉最后一个类样式
//否则，弹出对话框，通知没有类样式了
var div = $('#div1')[0];
if(div.classList.length>0){
var cls = div.classList[div.classList.length-1];
$(div).removeClass(cls);
}else{
alert('已经没有类样式可以删除了');
}
})
</script>
</body>
删除标签节点
<body>
<body>
<table id="cart">
<tr class="data">
<td><input type="checkbox" /></td>
<td id="aa">苹果IPAD</td>
<td>4500</td>
<td>2</td>
<td>9000</td>
<td>
<a class="delete" href="javascript:void(0);">删除</a>
</td>
</tr>
</table>
<script>
$('.delete').click(function(){
$(this).parent().parent().remove(); // 删除该标签的父标签
});
</script>
</body>
</body>
插入、读取内容html、text
<body>
<div id="div1"></div>
<button id="btnSetContent">在层中设置一个文本框</button>
<button id="btnReadContent">读取层中的内容</button>
<script>
$('#btnSetContent').click(function(){
// //1 创建新元素
// var text = $('<input />');
// //2 操作html属性，样式属性，内容
// text.prop('type','text')
// .prop('value','输入你的账号')
// .css('color','red');
// //3 调用父元素的方式添加新元素
// $('#div1').append(text);
var html = '<input type="text" value="输入你的账号..." />';
$('#div1').html(html); // 插入内容
})
$('#btnReadContent').click(function(){
alert($('#div1').html()); //读取内容
})
</script>
</body>
获取所有的层each，遍历function(index,chk)
复选框
<script src="jquery-3.6.0.js"></script>
</head>
<body>
<table id="cart">
<tr>
<th><input type="checkbox" class="chkAll" /></th>
<th>商品名称</th>
</tr>
<tr class="data">
<td><input type="checkbox" class="chkOne" /></td>
<td>华硕笔记本</td>
</tr>
<tr class="data">
<td><input type="checkbox" class="chkOne" /></td>
<td>苹果IPAD</td>
</tr>
</table>
<script>
//给全选复选框订阅click事件的处理函数
//其他复选框的checked = 全选复选框的checked
$('.chkAll').click(function(){
$('.chkOne').prop('checked', $(this).prop('checked'));
})
//给其他复选框订阅click事件的处理函数
//所有其他复选框都选中，全选复选框才选中
$('.chkOne').click(function(){
var result=true;
$('.chkOne').each(function(index,chk){
result = result && $(chk).prop('checked');
})
$('.chkAll').prop('checked',result);
});
</script>
</body>
获取该元素的前一个元素、子元素
<body>
<script>
var text = $(this).prev('input'); // this的前一个input标签
var tds = $(this).children('td'); // 获取this所有子标签td
</script>
</body>
购物车
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>购物车</title>
</head>
<body>
<h2>我的购物车</h2>
<hr>
<table id="cart">
<tr>
<th><input type="checkbox" class="chkAll" /></th>
<th>商品名称</th>
<th>单价</th>
<th>购买数量</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr class="data">
<td><input type="checkbox" class="chkOne" /></td>
<td>华硕笔记本</td>
<td>4300</td>
<td>
<button class="sub">-</button>
<input type="text" value="1" readonly="readonly">
<button class="inc">+</button>
</td>
<td>4300</td>
<td>
<a class="delete" href="javascript:void(0);">删除</a>
</td>
</tr>
<tr class="data">
<td><input type="checkbox" class="chkOne" /></td>
<td>苹果IPAD</td>
<td>4500</td>
<td>
<button class="sub">-</button>
<input type="text" value="2" readonly="readonly">
<button class="inc">+</button>
</td>
<td>9000</td>
<td>
<a class="delete" href="javascript:void(0);">删除</a>
</td>
</tr>
<tr class="data">
<td><input type="checkbox" class="chkOne" /></td>
<td>格力空调</td>
<td>2000</td>
<td>
<button class="sub">-</button>
<input type="text" value="1" readonly="readonly">
<button class="inc">+</button>
</td>
<td>2000</td>
<td>
<a class="delete" href="javascript:void(0);">删除</a>
</td>
</tr>
<tr class="data">
<td><input type="checkbox" class="chkOne" /></td>
<td>春兰空调</td>
<td>1600</td>
<td>
<button class="sub">-</button>
<input type="text" value="1" readonly="readonly">
<button class="inc">+</button>
</td>
<td>1600</td>
<td>
<a class="delete" href="javascript:void(0);">删除</a>
</td>
</tr>
<tr class="info" style="display:none;">
<td colspan="6" style="color:red;font-size: 20px;">购物车为空，没有购买数据</td>
</tr>
<tr>
<td>总计</td>
<td colspan="5" class="total">16900</td>
</tr>
</table>
<script src="js/jquery.min.js"></script>
<script>
$('.inc').click(function(){
// 找到+按钮前的文本框
var text = $(this).prev('input');// this的前一个input标签
//读取文本框中的数量
var quantity = parseInt(text.prop('value'));
//加1
quantity++;
//写回
text.prop('value',quantity);
//重新计算价格
calc();
})
$('.sub').click(function(){
//找到-按钮后面的文本框
var text = $(this).next('input');
//读取文本框中的数量
var quantity= parseInt(text.prop('value'));
//减1
quantity--;
//写回
text.prop('value',quantity);
//判断修改后的数量是否小于等于0，
if(quantity<=0){
if(confirm('购买数量<=0,确定要删除吗？')){
//询问是否删除，如果回答确定，删除按钮所在的行
$(this).parent().parent().remove();
}else{
//否则，数量设置为1
text.prop('value','1');
}
}
//重新计算价格
calc();
})
//重新计算价格的方法
function calc(){
var total = 0;//总计初始化0
//找到所有数据行.data
$('.data').each(function(index,row){
//处理一行
//1 找出行中的列td并计算小计
var tds = $(row).children('td');
var qu = parseInt($(tds[3]).children('input').prop('value'));
var price = parseFloat($(tds[2]).html());
var val = price*qu;
//将小计写回到小计列中
$(tds[4]).html(val);
//将小计加到总计中
total += val;
});
//将总计写到表格中
$('.total').html(total);
}
$('.delete').click(function(){
if(confirm('确定要删除本行吗？')){
//删除行
$(this).parent().parent().remove();
//重新计算价格
calc();
//判断还有没有数据行，如果没有了，显示提示信息
if($('.data').length<=0){
$('.info').css('display','block');
}
}
})
//给全选复选框订阅click事件的处理函数
//其他复选框的checked = 全选复选框的checked
$('.chkAll').click(function(){
$('.chkOne').prop('checked', $(this).prop('checked'));
})
//给其他复选框订阅click事件的处理函数
//所有其他复选框都选中，全选复选框才选中
$('.chkOne').click(function(){
var result=true;
$('.chkOne').each(function(index,chk){
result = result && $(chk).prop('checked');
})
$('.chkAll').prop('checked',result);
});
</script>
</body>
</html>
轮播图
<body>
<div id="swiper">
<a href="#"><img src="images/1.jpg" alt="" class="show"></a>
<a href="#"><img src="images/2.jpg" alt="" class="hide"></a>
<a href="#"><img src="images/3.jpg" alt="" class="hide"></a>
<a href="#"><img src="images/4.jpg" alt="" class="hide"></a>
<ul>
<li class="current">1</li>
<li class="nocurrent">2</li>
<li class="nocurrent">3</li>
<li class="nocurrent">4</li>
</ul>
</div>
<script src="jquery.js"></script>
<script>
//轮播图的js代码
var timer;//定时器对象
//找到所有的图片和显示进度的li
var imgs = $('#swiper img');
var lis = $('#swiper li');
//定时切换图片
function play(){
timer = setInterval(function(){
//找到现在显示的图片的下标 i
for(var i=0;i<imgs.length;i++){
if(imgs[i].className=='show'){
break;
}
}
//计算需要显示的图片的下标
var next = i+1;
if(next>=imgs.length){
next =0;//已经到了最后一张图片的下一张，回到第一张
}
//设置类样式
$(imgs[i]).removeClass().addClass('hide');
$(imgs[next]).removeClass().addClass('show');
$(lis[i]).removeClass().addClass('nocurrent');
$(lis[next]).removeClass().addClass('current');
},2000);
}
play();
$('#swiper').mouseover(function(){
clearInterval(timer);
}).mouseleave(function(){
play();
})
$('#swiper li').click(function(){
imgs.removeClass().addClass('hide');
lis.removeClass().addClass('nocurrent');
//获取需要显示的图片的下标 = 被单击的li上的数字-1
var i= parseInt($(this).html());
i--;
$(imgs[i]).removeClass().addClass('show');
$(lis[i]).removeClass().addClass('current');
})
</script>
</body>
扫一扫
2357
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
