文章目录
- JQuery框架
- 找到某标签，读或设置其style、属性
- css,attr
- 设置style
- 事件驱动
- 单击添加、取消边框
- 绑定只响应一次
- 鼠标悬停在标题显示内容，否则不显示
- 选择器
- 过滤器
- 下标过滤器：`基本选择器:下标过滤器`
- 隔行换色
- 属性过滤器： `基本过滤器[属性过滤器]`
- 内容过滤器： `基本选择器:内容过滤器`
- 表单选择器
- 其他选择器
- 操作元素的html属性，样式属性，内容等的方法
- 读取标签html、内容
- 删除添加类样式名
- 删除标签节点
- 插入、读取内容html、text
- 获取所有的层each，遍历function(index,chk)
- 复选框
- 获取该元素的前一个元素、子元素
- 购物车
- 轮播图
JQuery框架
JQ案例模板
该部分需要下载个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'));//加1quantity++;//写回text.prop('value',quantity);//重新计算价格calc();})$('.sub').click(function(){//找到-按钮后面的文本框var text = $(this).next('input');//读取文本框中的数量var quantity= parseInt(text.prop('value'));//减1quantity--;//写回text.prop('value',quantity);//判断修改后的数量是否小于等于0，if(quantity<=0){if(confirm('购买数量<=0,确定要删除吗？')){//询问是否删除，如果回答确定，删除按钮所在的行$(this).parent().parent().remove();}else{//否则，数量设置为1text.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;//定时器对象//找到所有的图片和显示进度的livar imgs = $('#swiper img');var lis = $('#swiper li');//定时切换图片function play(){timer = setInterval(function(){//找到现在显示的图片的下标 ifor(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上的数字-1var i= parseInt($(this).html());i--;$(imgs[i]).removeClass().addClass('show');$(lis[i]).removeClass().addClass('current');})</script>
</body>
