学习目标
能够知道获取和设置元素内容的操作
jquery中的html方法可以获取和设置标签的html内容
示例代码:
hello
说明:
给指定标签追加html内容使用append方法
获取和设置元素的内容使用: html方法
给指定元素追加html内容使用: append方法
学习目标
能够知道获取和设置元素属性的操作
之前使用css方法可以给标签设置样式属性,那么设置标签的其它属性可以使用prop方法了。
示例代码:
selector $是jquery常用的一个回传函数,定义为选取, selector
这是一个链接
说明: 获取value属性和设置value属性还可以通过val方法来完成。
获取和设置元素属性的操作可以通过prop方法来完成
获取和设置元素的value属性可以通过val方法来完成,更加简单和方便
学习目标
能够知道事件代理的使用方式
事件代理就是利用事件冒泡的原理(事件冒泡就是事件会向它的父级一级一级传递),把事件加到父级上,通过判断事件来源,执行相应的子元素的操作,事件代理首先可以极大减少事件绑定次数,提高性能;其次可以让新加入的子元素也可以拥有相同的操作。
事件冒泡代码:
哈哈
说明:
当点击子元素div,它的点击事件会向它父元素传递,也会触发了父元素的点击事件,这就是事件冒泡。
一般绑定事件的写法:
$(function(){$ali = $('#list li');$ali.click(function() {$(this).css({background:'red'});});
})- 1
- 2
- 3
- 4
- 5
事件代理的写法
$(function(){$list = $('#list');// 父元素ul 来代理 子元素li的点击事件$list.delegate('li', 'click', function() {// $(this)表示当前点击的子元素对象$(this).css({background:'red'});});
})- 1
- 2
- 3
- 4
- 5
delegate方法参数说明:
delegate(childSelector,event,function)
childSelector: 子元素的选择器
event: 事件名称,比如: 'click'
function: 当事件触发执行的函数
事件代理就是使用父元素来代理子元素的事件,好处是减少事件的绑定次数,提高性能。
使用场景当多个相同的子元素绑定同一个事件,可以使用事件代理。
事件代理使用是使用delegate方法来完成
学习目标
能够使用选择器进行标签过滤
选择集过滤就是在选择标签的集合里面过滤自己需要的标签
has(选择器名称)方法,表示选取包含指定选择器的标签
eq(索引)方法,表示选取指定索引的标签
has方法的示例代码:
这是第一个div
这是第二个div
eq方法的示例代码:
这是第一个div
这是第二个div
选择集过滤可以使用has方法和eq方法来完成
jquery给标签设置样式使用css方法
学习目标
能够说出2种选择集转移方法
选择集转移就是以选择的标签为参照,然后获取转移后的标签
$('#box').prev(); 表示选择id是box元素的上一个的同级元素
$('#box').prevAll(); 表示选择id是box元素的上面所有的同级元素
$('#box').next(); 表示选择id是box元素的下一个的同级元素
$('#box').nextAll(); 表示选择id是box元素的下面所有的同级元素
$('#box').parent(); 表示选择id是box元素的父元素
$('#box').children(); 表示选择id是box元素的所有子元素
$('#box').siblings(); 表示选择id是box元素的其它同级元素
$('#box').find('.myClass'); 表示选择id是box元素的class等于myClass的元素
选择集转移的示例代码:
这是第一个h2标签
这是第一个段落
这是一个div第二个span这是第二个h2标签
这是第二个段落
prev() 表示获取上一个同级元素
prevAll() 表示获取上面所有同级元素
next() 表示获取下一个同级元素
nextAll() 表示获取下面所有同级元素
parent() 表示获取父元素
children() 表示获取所有的子元素
siblings() 表示获取其它同级元素
find("选择器名称") 表示获取指定选择器的元素
上一篇:九头蛇hydra爆破http示例