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”
例如：
hello
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选择器、并集选择器、交集选择器和全局选择器。
中国
China
加油
万
加油
层次选择器
000
111
p1
p2
222
333
属性选择器
百度
新浪网
网易
测试1
测试2
过滤选择器
选择
- a
- b
- c
- d
- e
事件
鼠标事件
鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件。
键盘事件
用户每次按下或者释放键盘上的键时都会产生事件。
表单事件
当元素获得焦点时，会触发 focus 事件，失去焦点时，会触发 blur 事件。
鼠标悬停复合事件
hover() 方法相当于 mouseover 与 mouseout 事件的组合。
连续点击复合事件
选择
- a
- b
- c
- d
- e
事件的动态绑定
对 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 个指定动作：
- 背景变粉
- 字体变绿
- 向上收缩
- 向下拉伸
hello
DOM 和 CSS 的操作
属性函数
attr(“属性”) 获得元素的属性值。
attr(“属性”, “新值”) 修改元素的属性值。
attr(样式参数) 样式参数可以写成 json 格式。
val() 获得表单元素中的 value 值
val(“x”) 修改表单元素中的 value 值
html() 获得元素中的内容（标签 + 文本）
html(“x”) 修改元素中的内容（标签 + 文本）
text() 获得元素中的文本
text(“x”) 修改元素中的文本
中国加油
样式函数
css(“属性”) 获得该属性值
css(“属性”, “值”) 设置属性的值
css({json}) 设置多个属性的值
width() 获得元素的宽度
width(number) 修改元素的宽度
height() 获得元素的高度
height(number) 修改元素的高度
类样式函数
addClass() 为元素添加类样式
removeClass() 将元素的类样式移除
toggleClass() 样式的切换；有->无，无->有
中华人民共和国
节点操作
- 西游记
- 三国演义
- 水浒传
遍历节点
祖先元素
用于向上遍历 DOM 树的方法
- parent() 返回被选元素的直接父元素，仅仅是上一级
- parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素，可以选择辈分
- a
-
b
- c
同辈元素
next() 获取紧邻匹配元素之后的元素
prev() 获取紧邻匹配元素之前的元素
siblings([selector]) 获取位于匹配元素前面和后面的所有同辈元素
p1
- a
-
b
- c
p2
p3
后代元素
后代是子、孙、曾孙等等
- children([selector]) 方法返回被选元素的所有直接子元素
- a
- b
- c
- find(选择器) 方法返回被选元素的后代元素，一路向下直到最后一个后代
- 盘古
- 蚩尤
- 刑天
龚工
祝融
元素的过滤
first() 过滤第一个元素
last() 过滤最后一个元素
eq(index) 过滤到下标为 index 的元素
not() 除了什么之外的元素
is() 返回布尔，判断是不是这种元素
- 盘古
- 蚩尤
- 刑天
案例
手风琴特效
购物车结算
商品编号
名称
单价
数量
总价
1
炸香肠
3
-
1
+
3
2
王八
10
-
1
+
10
3
恐龙
1000
-
1
+
1000
总价：111
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