每日分享：
熬得住无人问津的寂寞，才配拥有诗和远方，其实一直陪着你的，都是那个了不起的自己。
目录：
- 获取和设置元素内容
- 获取和设置标签属性
- jquery事件
- jquery事件代理
一、获取和设置元素内容
jquery中html方法可以获取和设置标签的html内容
给指定标签追加html内容使用append方法
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../../jquery-1.12.4.min.js"></script>
<script>
$(function(){
// 获取标签
var $div = $('div');
// jquery获取标签内容
alert($div.html());
// 设置标签内容
$div.html('<a href="https://www.baidu.com">百度</a>');
// 追加内容
$div.append('<a href="https://www.baidu.com">谷歌</a>');
});
</script>
</head>
<body>
<div>哈哈</div>
</body>
</html>结果：
?
二、 获取和设置元素属性
1. prop方法的使用
之前使用css方法可以给标签设置样式属性，那么设置标签的其他属性用prop方法
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../../jquery-1.12.4.min.js"></script>
<script>
$(function(){
// 获取标签
var $p = $('p');
var $text = $('#txt1');
// 获取样式属性（获取字体大小）
var $px = $p.css('font-size');
alert($px);
// 设置样式属性
$p.css({'font-size':'30px', 'background':'red'});
// 除了样式属性的相关操作使用css方法，其他属性的操作都是prop方法
// 获取属性
var $name = $text.prop('name');
alert($name);
var $type = $text.prop('type');
alert($type);
// 设置属性
$text.prop({'value':'张三', 'class':'tname'});
alert($text.prop('value'));
// 获取value属性可以 使用val方法
// 使用val方法获取value属性
alert($text.val())
// 使用val方法设置value属性
$text.val('李四');
})
</script>
</head>
<body>
<p>哈哈，我是一个段落标签</p>
<input type="text" name="username" id="txt1">
</body>
</html>获取value属性和设置value属性可以通过val方法来完成
三、jquery事件
常用事件：
- click（）鼠标单击
- blur（）元素失去焦点
- focus（）元素获得焦点
- mouseover（）鼠标进入（进入子元素也触发）
- mouseout（）鼠标离开
- ready（）DOM加载完成
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../../jquery-1.12.4.min.js"></script>
<script>
// 等待页面加载完成以后获取标签属性
$(function(){
// 获取ul里面所有的li标签
var $lis = $('ul li');
// 获取button标签
var $btn = $('#btn1');
// 获取text标签
var $text = $('#txt1');
// 获取div标签
var $div = $('div');
// 添加点击事件
$lis.click(function(){
// 获取当前点击的标签对象
// js写法
// this.style.color = 'red';
// jquery写法，通过this来获取当前点击的标签
$(this).css({'color':'red'});
// 获取点击标签的索引
alert($(this).index());
});
// 添加点击事件
$btn.click(function(){
// 获取文本框的内容
alert($text.val());
});
// 给text文本框添加获取焦点事件
$text.focus(function(){
// 获取得到焦点的文本框，然后设置样式属性
$(this).css({'background':'blue'});
});
// 给text文本框添加失去焦点事件
$text.blur(function(){
$(this).css({'background':'white'})
});
// 给div设置鼠标悬停（进入）事件
$div.mouseover(function(){
$(this).css({'background':'green'});
});
// 给div设置鼠标离开事件
$div.mouseout(function(){
$(this).css({'background':'white'});
});
});
</script>
</head>
<body>
<div>
<ul>
<li>苹果</li>
<li>鸭梨</li>
<li>香蕉</li>
</ul>
<input type="text" id="txt1">
<input type="button" id="btn1" value="点我干嘛">
</div>
</body>
</html>四、jquery事件代理
事件代理就是利用事件冒泡的原理（事件冒泡就是事件会向它的父级一级一级的传递），把事件加到父级上，通过判断事件的来源，执行相应的子元素的操作，事件代理可以极大的减少事件绑定次数，提高性能；也可以让新加入的子元素拥有相同的操作
1. 事件冒泡
先用代码解释一下事件冒泡是个啥：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../../jquery-1.12.4.min.js"></script>
<script>
$(function(){
// 获取标签
$btn = $('#btn1');
$div = $('div');
// 设置点击事件
$btn.click(function(){
alert('点击按钮成功');
// 取消事件冒泡，也就是不让事件向父控件传递
// return false;
});
$div.click(function(){
alert('我是div');
});
});
</script>
</head>
<body>
<div>
<p id="p1">哈哈</p>
<input type="button" value="按钮" id="btn1">
<ul>
<li>嘻嘻</li>
<li>哈哈</li>
<li>嘿嘿</li>
</ul>
</div>
</body>
</html>代码中设置了两个点击事件，button点击和div点击；其中div是button所属标签input的父级：
?
?
点击按钮后发现，button点击事件触发了，它的父级div点击事件也触发了，这就是事件冒泡。
当然，也可以取消事件冒泡：return false
?2. 事件代理
?事件代理使用delegate方法
delegate（childSelector，event，function）参数说明：
- childSelector：子元素的选择器
- event：事件名称，例：‘click’
- function：当事件触发时要执行的函数
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../../jquery-1.12.4.min.js"></script>
<script>
$(function(){
// 获取标签
$btn = $('#btn1');
$div = $('div');
// 设置点击事件
$btn.click(function(){
alert('点击按钮成功');
// 取消事件冒泡，也就是不让事件向父控件传递
// return false;
});
// $div.click(function(){
// alert('我是div');
// });
// 通过事件代理，让父控件代理子控件的事件，然后执行子控件的相关操作
var $ul = $('ul');
$ul.delegate('li', 'click', function(){
$(this).css({'color': 'red'});
});
// 可以代理不同子控件的事件
$div.delegate('p, input', 'click', function(){
$(this).css({'color':'blue'});
});
});
</script>
</head>
<body>
<div>
<p id="p1">哈哈</p>
<input type="button" value="按钮" id="btn1">
<ul>
<li>嘻嘻</li>
<li>哈哈</li>
<li>嘿嘿</li>
</ul>
</div>
</body>
</html>