$("tr:even").css("background-color", "#ccc");
jquery 能做的 javascript 也都能做,但使用 jquery 能大幅提高开发效率
jquery 作为一个单独存在的 js 文件,并不会与其他的 js 文件发生冲突
<script src="js/jquery-3.4.1.min.js"></script>
<script> $(lector).action();</script>
工厂函数 $():将 dom 对象转化为 jquery 对象
选择器 lector:获取需要操作的 dom 元素
方法 action():jquery 中提供的方法,其中包括绑定事件处理的方法 “$” 等同于 “jquery”
例如:
<body> <p>hello</p></body><script src="js/jquery-3.4.1.min.js"></script><script> alert($("p").text());</script>
dom 对象和 jquery 对象分别拥有一套独立的方法,不能混用
$("#title").html();// 等同于document.getelementbyid("title").innerhtml;
如果要混用它们,就要进行转换
dom 对象转 jquery 对象// a 是 dom 对象var a = document.getelementbyid("name");// b 是 jquery 对象var b = $(a);
jquery 对象转 dom 对象// a 是 jquery 对象var a = $("#name");// b 是 dom 对象var b = jqobject.get(0);
基本选择器包括标签选择器、类选择器、id选择器、并集选择器、交集选择器和全局选择器。
<p>中国</p><p>china</p><p class="jy">加油</p><p id="wan">万</p><h3 class="jy">加油</h3><script src="js/jquery-3.4.1.min.js"></script><script> // 标签选择器,获得所有的 p $("p").css("color","red"); // 类选择器 $(".jy").css("color","red"); // id 选择器,更具备唯一性 $("#wan").css("color","red"); // 并集选择器 ".jy" 和 "#wan" $(".jy,#wan").css("color","red"); // 交集选择器,既是 h3 标签,又拥有 ".jy" 的元素 $("h3.jy").css("color","red");</script>
<h3>000</h3><div id="x"> 111 <p>p1</p> <div> <p>p2</p> </div></div><h3>222</h3><h3>333</h3><script src="js/jquery-3.4.1.min.js"></script><script> // 后代选择器,忽略层级,选取所有后代元素 $("#x p").css("color","red"); // 子代选择器,只选取子层的元素 $("#x>p").css("color","red"); // 相邻元素选择器,下一个紧邻的兄弟元素 h3 $("#x+h3").css("color","red"); // 同辈元素选择器,#x 元素之后的的所有兄弟元素 h3 $("#x~h3").css("color","red");</script>
<a href="www.baidu.com">百度</a><a href="www.sina.com.cn">新浪网</a><a href="http://www.163.com">网易</a><p href="x">测试1</p><p href="x" title="x">测试2</p><script src="js/jquery-3.4.1.min.js"></script><script> // 选取拥有 href 属性的元素 $("[href]").css("color","red"); // 选取拥有 href=x 的元素 $("[href='x']").css("color","red"); // 选取 a 标签中 href 不等于 x 的元素 $("a[href!='x']").css("color","red"); // 选取 href 属性以 www 开头的元素 $("[href^='www']").css("color","red"); // 选取 href 属性以 com 结尾的元素 $("[href$='com']").css("color","red"); // 选取 href 属性包含 a 的元素 $("[href*='a']").css("color","red"); // 选取拥有 href 属性和 title 属性,并且 title=x 的 p 元素 $("p[href][title='x']").css("color","red");</script>
<h2 id="h2#x">选择</h2><ul> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li></ul><script src="js/jquery-3.4.1.min.js"></script><script> // 第一个 li $("li:first").css("color","red"); // 最后一个 li $("li:last").css("color","red"); // 偶数行的 li $("li:even").css("color","red"); // 奇数行的 li $("li:odd").css("color","red"); // 下标为 2 的 li $("li:eq(2)").css("color","red"); // 下标大于 1 的 li $("li:gt(1)").css("color","red"); // 下标小于 2 的 li $("li:lt(2)").css("color","red"); // 使用转义符 $("#h2\\#x").css("color","red");</script>
鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件。
<img src="img/1.jpg" width="300"><img src="img/1.jpg" width="300"><img src="img/1.jpg" width="300"><script src="js/jquery-3.4.1.min.js"></script><script> // 点击一下,切换照片 $("img").click( function(){ // this 是事件触发的源头 $(this).attr( "src","img/2.jpg" ); } ); // 移动到元素上 $("img").mouover( function(){ $(this).css( "border","2px solid red" ); } ); // 离开元素 $("img").mouout( function(){ $(this).css( "border","2px solid white" ); } );</script>
用户每次按下或者释放键盘上的键时都会产生事件。
<input><h3></h3><script src="js/jquery-3.4.1.min.js"></script><script> $("input").keyup( function(){ // 获取框中的值 var str = $(this).val(); // 将 h3 元素中的文本内容更改为 str $("h3").text( str ); } );</script>
当元素获得焦点时,会触发 focus 事件,失去焦点时,会触发 blur 事件。
<form action=""> <p>帐号:<input id="a" value="请输入帐号..."></p> <p>电话:<input id="b"></p></form><script src="js/jquery-3.4.1.min.js"></script><script> // 获得焦点(激活/点击一下) $("#a").focus(function(){ $(this).val(""); }); // 失去焦点(未激活/未点击) $("#a").blur(function(){ $(this).val("请输入帐号..."); });</script>
hover() 方法相当于 mouover 与 mouout 事件的组合。
<img src="img/3.jpg" width="400"><script src="js/jquery-3.4.1.min.js"></script><script> $("img").hover( function(){ $(this).css("border","5px solid red"); }, function(){ $(this).css("border","5px solid white"); } );</script>
<h2>选择</h2><ul> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li></ul><script src="js/jquery-3.4.1.min.js"></script><script> $("h2").click(function(){ // 连续点击,ul 的可见和隐藏进行切换 $("ul").toggle(); });</script>
对 dom 元素绑定事件的另一种写法
绑定一个事件$(".del").on('click', function() { alert('hello');})
绑定多个事件$(".del").on('click mouover', function() { alert('hello');})
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:”slow”、”fast” 或毫秒
<style> div{ width: 200px; height: 200px; background-color: black; }</style><body> <button id="btn1">显示</button> <button id="btn2">隐藏</button> <button id="btn3">切换</button> <div></div> <script src="js/jquery-3.4.1.min.js"></script> <script> $("#btn1").click(function(){ $("div").show('slow'); }); $("#btn2").click(function(){ // fast:快速的 // slow:缓慢的 // 毫秒:自定义 $("div").hide(2000); }); $("#btn3").click(function(){ $("div").toggle(1000); }); </script></body>
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:”slow”、”fast” 或毫秒
<script> $("#btn1").click(function(){ // 向下伸展 $("div").s周一到周五英文lidedown(1000); }); $("#btn2").click(function(){ // 向上收缩 $("div").slideup(1000); }); $("#btn3").click(function(){ // 切换 $("div").slidetoggle(1000); });</script>
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:”slow”、”fast” 或毫秒
<script> $("#btn1").click(function(){ // 显示:映入眼帘 $("div").fadein(1000); }); $("#btn2").click(function(){ // 隐藏:淡出我的视线 $("div").fadeout(1000); }); $("#btn3").click(function(){ // 切换 $("div").fadetoggle(1000); }); $("#btn4").click(function(){ // 1 秒内变成 50% 的透明度 $("div").fadeto(1000,0.5); });</script>
链是允许在同一个元素上在一条语句中运行多个 jquery 方法,可以把动作/方法链接在一起。
例如:点击一次按钮,让 div 完成 4 个指定动作:
背景变粉字体变绿向上收缩向下拉伸<style> div{ width: 200px; height: 200px; background-color: black; color:white; font-size: 3em; } </style><body> <button>试试</button> <div>hello</div> <script src="js/jquery-3.4.1.min.js"></script> <script> $("button").click(function(){ $("div").css("background-color","pink").css("color","green").slideup(1000).slidedown(1000); }); </script></body>
attr(“属性”) 获得元素的属性值。
attr(“属性”, “新值”) 修改元素的属性值。
attr(样式参数) 样式参数可以写成 json 格式。
<body> <button id="btn1">点我试试</button> <hr> <img src="img/1.jpg" title="风景图" width="300"> <script src="js/jquery-3.4.1.min.js"></script> <script> $("#btn1").click(function(){ $("img").attr("src","img/2.jpg"); $("img").attr("title","高清风景图"); $("img").attr({width:"200",height:"200"}); }); </script></body>
val() 获得表单元素中的 value 值
val(“x”) 修改表单元素中的 value 值
html() 获得元素中的内容(标签 + 文本)
html(“x”) 修改元素中的内容(标签 + 文本)
text() 获得元素中的文本
text(“x”) 修改元素中的文本
<button>试试</button><hr><input id="urname"><div> <h1><i>中国加油</i></h1></div><script src="js/jquery-3.4.1.min.js"></script><script> $("button").click(function(){ // input 框中的值 alert($("input").val()); // 修改 input 框中的值 $("input").val("66666"); // 获得 div 中的内容(包含标签信息) alert($("div").html()); // 获得 div 中的内容(不包含标签信息,只包含文本内容) alert($("div").text()); // 修改 div 中的内容(全部内容都覆盖) $("div").text("祖国万岁!"); });</script>
css(“属性”) 获得该属性值
css(“属性”, “值”) 设置属性的值
css({json}) 设置多个属性的值
<style> div{ width: 150px; height: 150px; background-color: #000; }</style><body> <button>试试</button> <hr> <div></div> <script src="js/jquery-3.4.1.min.js"></script> <script> $("button").click(function(){ // 获取 css 属性,width 的值 var w = $("div").css("width"); // 一个键值对 $("div").css("background-color","pink"); // 链式编程 $("div").css("background-color","pink").css("border-radius","50%"); // json 为参数 $("div").css({ opacity:"0.4", background:"orange", borderradius:"50%" }); }); </script></body>
width() 获得元素的宽度
width(number) 修改元素的宽度
height() 获得元素的高度
height(number) 修改元素的高度
<style> div{ width: 150px; height: 150px; background-color: #000; }</style><body> <button>试试</button> <hr> <div></div> <script src="js/jquery-3.4.1.min.js"></script> <script> $("button").click(function(){ //(无参)获取宽度 var w = $("div").width(); //(无参)获取高度 var h = $("div").height(); alert("宽:"+w+"px,高:"+h+"px"); //(传参)修改宽度 $("div").width("300"); //(传参)修改高度 $("div").height("300"); }); </script></body>
addclass() 为元素添加类样式
removeclass() 将元素的类样式移除
toggleclass() 样式的切换;有->无,无->有
<style> div{ width: 100px; height: 100px; background-color: #000; } .a{ background: palevioletred; border-radius: 50%; } .b{ border:5px dashed darkcyan; opacity: 0.6; } .cn{ background: #000; color: #fff; font-family: 字魂49号-逍遥行书; }</style><body> <button id="btn1">试试</button> <button id="btn2">取消透明度</button> <button id="btn3">样式切换</button> <hr> <div></div> <h1>中华人民共和国</h1> <script src="js/jquery-3.4.1.min.js"></script> <script> $("#btn1").click(function(){ // $("div").addclass("a"); $("div").addclass("a b"); }); $("#btn2").click(function(){ $("div").removeclass("b"); }); $("#b戒律牧师天赋tn3").click(function(){ $("h1").toggleclass("cn"); }); </script></body>
<input><button id="test">测试</button><ul> <li>西游记</li> <li>三国演义</li> <li>水浒传</li></ul><script src="js/jquery-3.4.1.min.js"></script><script> $("#test").click(function(){ var bookname = $("input").val(); // 通过工厂函数,创建新的 li 节点 var newli = $("<li>"+bookname+"</li>"); /* 添加子节点 */ // newli 添加到 ul 后面 $("ul").append(newli); // newli 添加到 ul 后面 newli.appendto("ul"); // newli 添加到 ul 前面 $("ul").prepend(newli); newli.prependto("ul"); /* 添加同辈节点 */ // newli 添加到最后的 li 的后面 $("li:last").after( newli ); newli.inrtafter("li:last"); //newli 添加到最后的 li 的前面 $("li:last").before(newli); newli.inrtbefore("li:last"); /* 替换节点 */ // 将第二个 li 替换成 newli $("li:eq(1)").replacewith(newli); newli.replaceall( "li:eq(1)" ); /* 复制节点 */ // 复制第一个 li,并插入到最后一个 li 的后面 $("li:first").clone().inrtafter("li:last"); /* 删除节点 */ // 清空了节点上的文本(节点并没有消失) $("li:eq(1)").empty(); // 删除节点 $("li:eq(1)").remove(); });</script>
用于向上遍历 dom 树的方法
parent() 返回被选元素的直接父元素,仅仅是上一级parents() 返回被选元素的所有祖先元素,它一路向上直到文档的根元素,可以选择辈分<p><button>测试</button></p><ul> <li>a</li> <li> <b>b</b> </li> <li>c</li></ul><script src="js/jquery-3.4.1.min.js"></script><script> $("button").click(function(){ // 找爸爸 var x = $("b").parent().html(); // 找祖宗 ul var x = $("b").parents("ul").html(); // 找祖宗 body var x = $("b").parents("body").html(); alert( x ); });</script>
next() 获取紧邻匹配元素之后的元素
prev() 获取紧邻匹配元素之前的元素
siblings([lector]) 获取位于匹配元素前面和后面的所有同辈元素
<button>测试</button><p>p1</p><ul> <li>a</li> <li> <b>b</b> </li> <li>c</li></ul><p>p2</p><p id="x">p3</p><script src="js/jquery-3.4.1.min.js"></script><script> $("button").click(function(){ // 紧邻的下一个元素 var x = $("ul").next().text(); // 紧邻的上一个元素 var x = $("ul").prev().text(); // 所有的兄弟中 id=x 的 var x = $("ul").siblings("#x").text(); // ul 的所有兄弟:1 个 button,3 个 p,2 个 script var arr = $("ul").siblings(); for(var i = 0 ;i< arr.length ;i++){ alert(arr[i]); } });</script>
后代是子、孙、曾孙等等
children([lector]) 方法返回被选元素的所有直接子元素<button>测试</button><ul> <li>a</li> <li>b</li> <li>c</li></ul><script src="js/jquery-3.4.1.min.js"></script><script> $("button").click(function(){ // 所有子节点:a b c var x = $("ul").children().text(); // ul 中的第一个子节点 var x = $("ul").c吉利的话hildren("li:first").text(); alert(x); });</script>
find(选择器) 方法返回被选元素的后代元素,一路向下直到最后一个后代<button>测试</button><ul> <li>盘古</li> <li>蚩尤</li> <li>刑天 <p>龚工</p> </li> <h3>祝融</h3></ul><script src="js/jquery-3.4.1.min.js"></script><script> $("button").click(function(){ // 在 ul 中查找 p 元素,忽略层级 var x = $("ul").find("p").text(); // 在 ul 中查找 h3 元素,忽略层级 var x = $("ul").find("h3").text(); // 不知道找什么 var x = $("ul").find().text(); alert(x); });</script>
first() 过滤第一个元素
last() 过滤最后一个元素
eq(index) 过滤到下标为 index 的元素
not() 除了什么之外的元素
is() 返回布尔,判断是不是这种元素
<button>测试</button><ul> <li>盘古</li> <li>蚩尤</li> <li>刑天</li></ul><script src="js/jquery-3.4.1.min.js"></script><script> $("button").click(function(){ // 第一个 li var x = $("li").first().text(); // 最后一个 li var x = $("li").last().text(); // 下标为 1 的 li var x = $("li").eq(1).text(); // 除了下标为 1 的其余所有 li var x = $("li").not("li:eq(1)").text(); // 返回布尔型,li 的父节明星演出出场费点是不是 ul var x = $("li").parent().is("ul"); alert(x); });</script>
<style> dd { /* 隐藏元素 */ display: none; }</style><body> <nav> <header>网站</header> <ul> <li> <dl> <dt>求职</dt> <dd>1.简历</dd> <dd>2.面试</dd> <dd>3.入职</dd> </dl> </li> <li> <dl> <dt>教育</dt> <dd>1.看视频</dd> <dd>2.做作业</dd> <dd>3.在线辅导</dd> </dl> </li> <li> <dl> <dt>创业</dt> <dd>1.帮助小企业</dd> <dd>2.头脑风暴</dd> <dd>3.赚钱啦</dd> </dl> </li> </ul> </nav> <script src="js/jquery-3.4.1.min.js"></script> <script> $("nav dt").click(function(){ // 所有的 dd 全部都闭合上,除了自己的兄弟 $("dd").not($(this).siblings()).slideup(500); // 自己的兄弟进行切换,显示闭合上,闭合的显示出来 $(this).siblings().slidetoggle(500); }); </script></body>
<style> .minus,.plus{ border:1px solid #999; /* 超链接 a 是行内元素 */ /* 转换成行内块显示,才能改变宽和高 */ display: inline-block; width: 20px; height: 20px; text-align: center; text-decoration: none; }</style><body> <table border="1" cellspacing="0" width="400"> <tr> <td>商品编号</td> <td>名称</td> <td>单价</td> <td>数量</td> <td>总价</td> </tr> <tr> <td>1</td> <td>炸香肠</td> <td>3</td> <td> <a href="#" class="minus">-</a> <span>1</span> <a href="#" class="plus">+</a> </td> <td>3</td> </tr> <tr> <td>2</td> <td>王八</td> <td>10</td> <td> <a href="#" class="minus">-</a> <span>1</span> <a href="#" class="plus">+</a> </td> <td>10</td> </tr> <tr> <td>3</td> <td>恐龙</td> <td>1000</td> <td> <a href="#" class="minus">-</a> <span>1</span> <a href="#" class="plus">+</a> </td> <td>1000</td> </tr> </table> <p style="width: 400px; text-align: right;"> 总价:<b style="color:red;">111</b> <button>提交订单</button> </p> <script src="js/jquery-3.4.1.min.js"></script> <script src="js/car.js"></script></body>
car.js
$(".plus").click(function(){ 银行营销 // 获得原来的商品数量 var i = $(this).prev().text(); i++; // 现在的商品数量 $(this).prev().text(i); // 商品单价 var price = $(this).parent().prev().text(); // 商品总价 var total = i*price; // 现在商品的总价 $(this).parent().next().text(total); gettotal();});$(".minus").click(function(){ var i = $(this).next().text(); i--; // 数量已经是 0 了,询问用户是否删除该商品 if(i == 0){ if( confirm("是否删除该商品?") ){ $(this).parents("tr").remove(); } }el{ $(this).next().text(i); // 商品单价 var price = $(this).parent().prev().text(); // 商品总价 var total = i*price; // 现在商品的总价 $(this).parent().next().text(total); } gettotal();});// 计算所有商品的总价// function gettotal(){// // 总价钱// var sum = 0;// var arr = $("tr:not(tr:first)").find("td:last");// for(var i = 0;i<arr.length ; i++){// sum += number(arr[i].innerhtml) ;// }// $("b").text(sum);// }function gettotal(){ // 总价钱 var sum = 0; $("tr:not(tr:first)").find("td:last").each(function(){ sum += number($(this).text()); }); $("b").text(sum);}
本文发布于:2023-04-05 09:46:51,感谢您对本站的认可!
本文链接:https://www.wtabcd.cn/fanwen/zuowen/8194e981a7499be56e5f8dccb35c4482.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文word下载地址:jquery判断字符串是否为空(jquery设置input的value值).doc
本文 PDF 下载地址:jquery判断字符串是否为空(jquery设置input的value值).pdf
留言与评论(共有 0 条评论) |