jquery判断字符串是否为空（jquery设置input的value值）

来源：国外服务器时间：2021-09-13 10:02:03 在您之前已被浏览：1 次

导读:目前正在解读《jquery判断字符串是否为空（jquery设置input的value值）》的相关信息，《jquery判断字符串是否为空（jquery设置input的value值）》是由用户自行发布的知识型内容！下面请观看由（国外主机 - www.2bp.net）用户发布《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 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").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" 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 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 个指定动作：

背景变粉

字体变绿

向上收缩

向下拉伸

DOM 和 CSS 的操作

属性函数

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="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);}

提醒：《jquery判断字符串是否为空（jquery设置input的value值）》最后刷新时间 2025-03-21 11:17:27，本站为公益型个人网站，仅供个人学习和记录信息，不进行任何商业性质的盈利。如果内容、图片资源失效或内容涉及侵权，请反馈至，我们会及时处理。本站只保证内容的可读性，无法保证真实性，《jquery判断字符串是否为空（jquery设置input的value值）》该内容的真实性请自行鉴别。