每日分享：
熬得住无人问津的寂寞，才配拥有诗和远方，其实一直陪着你的，都是那个了不起的自己。
目录：
- 获取和设置元素内容
- 获取和设置标签属性
- jquery事件
- jquery事件代理
jquery中html方法可以获取和设置标签的html内容
给指定标签追加html内容使用append方法
代码示例：
Document
$(function(){
// 获取标签
var $div = $('div');
// jquery获取标签内容
alert($div.html());
// 设置标签内容
$div.html('百度');
// 追加内容
$div.append('谷歌');
});
哈哈
结果：
之前使用css方法可以给标签设置样式属性，那么设置标签的其他属性用prop方法
代码示例：
Document
$(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('李四');
})
哈哈，我是一个段落标签
获取value属性和设置value属性可以通过val方法来完成
三、jquery事件 常用事件：- click（）鼠标单击
- blur（）元素失去焦点
- focus（）元素获得焦点
- mouseover（）鼠标进入（进入子元素也触发）
- mouseout（）鼠标离开
- ready（）DOM加载完成
代码示例：
Document
// 等待页面加载完成以后获取标签属性
$(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'});
});
});
- 苹果
- 鸭梨
- 香蕉
事件代理就是利用事件冒泡的原理（事件冒泡就是事件会向它的父级一级一级的传递），把事件加到父级上，通过判断事件的来源，执行相应的子元素的操作，事件代理可以极大的减少事件绑定次数，提高性能；也可以让新加入的子元素拥有相同的操作
1. 事件冒泡先用代码解释一下事件冒泡是个啥：
Document
$(function(){
// 获取标签
$btn = $('#btn1');
$div = $('div');
// 设置点击事件
$btn.click(function(){
alert('点击按钮成功');
// 取消事件冒泡，也就是不让事件向父控件传递
// return false;
});
$div.click(function(){
alert('我是div');
});
});
哈哈
- 嘻嘻
- 哈哈
- 嘿嘿
代码中设置了两个点击事件，button点击和div点击；其中div是button所属标签input的父级：
点击按钮后发现，button点击事件触发了，它的父级div点击事件也触发了，这就是事件冒泡。
当然，也可以取消事件冒泡：return false
2. 事件代理事件代理使用delegate方法
delegate（childSelector，event，function）参数说明：
- childSelector：子元素的选择器
- event：事件名称，例：‘click’
- function：当事件触发时要执行的函数
代码示例：
Document
$(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'});
});
});
哈哈
- 嘻嘻
- 哈哈
- 嘿嘿
