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 文件发生冲突
<script src="js/jquery-3.4.1.min.js"></script>
基本的语法介绍
<script>
$(selector).action();
</script>
工厂函数 $():将 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” 或毫秒
<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>
改变元素的高(拉伸效果)
- slidedown(speed):显示
- slideup(speed):隐藏
- slidetoggle(speed) 等价于 slidedown + slideup
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:”slow”、”fast” 或毫秒
<script>
$("#btn1").click(function(){
// 向下伸展
$("div").slidedown(1000);
});
$("#btn2").click(function(){
// 向上收缩
$("div").slideup(1000);
});
$("#btn3").click(function(){
// 切换
$("div").slidetoggle(1000);
});
</script>
不改变元素的大小(淡入淡出效果)
- fadein(speed) 显示
- fadeout(speed) 隐藏
- fadetoggle(speed) 等价于 fadein + fadeout 动画
- fadeto(speed, 透明度) 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)
可选的 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>
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}) 设置多个属性的值
<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");
});
$("#btn3").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.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>
案例
手风琴特效
<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();
}
}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值)
-
jquery判断字符串是否为空(jquery设置input的value值)
-
jquery判断元素内容是否为空的方法 原创
-
jquery isEmptyObject判断是否为空对象的函数_jquery
-
对input【text】的值在jquery中的html()方法在Firefox中得出来为空_html/css_WEB-ITnose
-
对input【text】的值在jquery中的html()方法在Firefox中得出来为空_html/css_WEB-ITnose
-
jquery 根据索引index或value值设置单选框radio的某一项为选中状态
-
jquery判断元素内容是否为空的方法 原创
-
【Jquery】jQuery获取或设置checkbox、radio选中的值、以及判断checkbox、radio是否被选中
-
jquery怎么判断input是否为空