jquery判断字符串是否为空知识,jquery设置input的value值看看

Introduction to jQuery

jQuery 是一个快速、简洁的 JavaScript 框架，是目前最流行的 JavaScript 程序库，它是对 JavaScript 对象和函数的封装jQuery 的设计思想是 Write less, do more实现隔行变色效果，JavaScript 要循环加判断，而 jQuery 只需一句关键代码$("tr:even").css("background-color", "#ccc");

jQuery Function

访问和操作 DOM 元素控制页面样式对页面事件进行处理扩展新的 jQuery 插件与 Ajax 技术完美结合

jQuery 能做的 JavaScript 也都能做，但使用 jQuery 能大幅提高开发效率

jQuery Advantages

体积小，压缩后只有 100 KB 左右强大的选择器出色的 DOM 封装可靠的事件处理机制出色的浏览器兼容性

jQuery Usage

jQuery 作为一个单独存在的 js 文件，并不会与其他的 js 文件发生冲突

基本的语法介绍

工厂函数 $()：将 DOM 对象转化为 jQuery 对象

选择器 selector：获取需要操作的 DOM 元素

方法 action()：jQuery 中提供的方法，其中包括绑定事件处理的方法 “$” 等同于 “jQuery”

例如：

<body> <p>hello</p></body><script src="js/jquery-3.4.1.min.js"></script><script> alert($("p").text());</script>

jQuery 对象与 DOM 对象

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 >加油</p><p id="wan">万</p><h3 >加油</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" >测试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"" ><img src="img/1.jpg"" ><img src="img/1.jpg"" ><script src="js/jquery-3.4.1.min.js"></script><script> // 点击一下，切换照片 $("img").click( function(){ // this 是事件触发的源头 $(this).attr( "src","img/2.jpg"" ); } ); // 移动到元素上 $("img").mouseover( function(){ $(this).css( "border","2px solid red" ); } ); // 离开元素 $("img").mouseout( 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() 方法相当于 mouseover 与 mouseout 事件的组合。

<img src="img/3.jpg"" ><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 mouseover', function() { alert('hello');})

元素的隐藏和显示

改变元素的宽和高（带动画效果）

show(speed)：显示hide(speed)：隐藏toggle(speed) 等价于 show + hide：显示的隐藏，隐藏的显示

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast” 或毫秒

改变元素的高（拉伸效果）

slideDown(speed)：显示slideUp(speed)：隐藏slideToggle(speed) 等价于 slideDown + slideUp

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast” 或毫秒

不改变元素的大小（淡入淡出效果）

fadeIn(speed) 显示fadeOut(speed) 隐藏fadeToggle(speed) 等价于 fadeIn + fadeOut 动画fadeTo(speed, 透明度) 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast” 或毫秒

链

链是允许在同一个元素上在一条语句中运行多个 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>

DOM 和 CSS 的操作

属性函数

attr(“属性”) 获得元素的属性值。

attr(“属性”, “新值”) 修改元素的属性值。

attr(样式参数) 样式参数可以写成 json 格式。

<body> <button id="btn1">点我试试</button> <hr> <img src="img/1.jpg"" > <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="username"><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}) 设置多个属性的值

width() 获得元素的宽度

width(number) 修改元素的宽度

height() 获得元素的高度

height(number) 修改元素的高度

类样式函数

addClass() 为元素添加类样式

removeClass() 将元素的类样式移除

toggleClass() 样式的切换；有->无，无->有

节点操作

<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.insertAfter("li:last"); //newli 添加到最后的 li 的前面 $("li:last").before(newli); newli.insertBefore("li:last"); /* 替换节点 */ // 将第二个 li 替换成 newli $("li:eq(1)").replaceWith(newli); newli.replaceAll( "li:eq(1)" ); /* 复制节点 */ // 复制第一个 li，并插入到最后一个 li 的后面 $("li:first").clone().insertAfter("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([selector]) 获取位于匹配元素前面和后面的所有同辈元素

<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([selector]) 方法返回被选元素的所有直接子元素<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").children("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>

案例

手风琴特效

购物车结算

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(); } }else{ $(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);}