广西旅游 网站建设,wordpress验证ticket,如何制作外贸网站 wordpress,众筹插件+wordpress获取和设置元素内容学习目标能够知道获取和设置元素内容的操作1. html方法的使用jquery中的html方法可以获取和设置标签的html内容示例代码:script$(function(){var $div $(#div1);// 获取标签的html内容var result $div.html();alert(result);// 设置…获取和设置元素内容学习目标能够知道获取和设置元素内容的操作1. html方法的使用jquery中的html方法可以获取和设置标签的html内容示例代码:script$(function(){var $div $(#div1);// 获取标签的html内容var result $div.html();alert(result);// 设置标签的html内容之前的内容会清除$div.html(span stylecolor:red你好/span);// 追加html内容$div.append(span stylecolor:red你好/span);});
/scriptdiv iddiv1phello/p
/div说明:给指定标签追加html内容使用append方法2. 小结获取和设置元素的内容使用: html方法给指定元素追加html内容使用: append方法获取和设置元素属性学习目标能够知道获取和设置元素属性的操作1. prop方法的使用之前使用css方法可以给标签设置样式属性那么设置标签的其它属性可以使用prop方法了。示例代码:style.a01{color:red;}
/style
selector $是jquery常用的一个回传函数定义为选取, selector
script$(function(){var $a $(#link01);var $input $(#input01);// 获取元素属性var sId $a.prop(id);alert(sId);// 设置元素属性$a.prop({href:http://www.baidu.com,title:这是去到百度的链接,class:a01});// 获取value属性// var sValue $input.prop(value);// alert(sValue);// 获取value属性使用val()方法的简写方式var sValue $input.val();alert(sValue);// 设置value值$input.val(222222);})
/scripta idlink01这是一个链接/a
input typetext idinput01 value111111说明: 获取value属性和设置value属性还可以通过val方法来完成。2. 小结获取和设置元素属性的操作可以通过prop方法来完成获取和设置元素的value属性可以通过val方法来完成更加简单和方便事件代理学习目标能够知道事件代理的使用方式1. 事件代理介绍事件代理就是利用事件冒泡的原理(事件冒泡就是事件会向它的父级一级一级传递),把事件加到父级上通过判断事件来源执行相应的子元素的操作事件代理首先可以极大减少事件绑定次数提高性能其次可以让新加入的子元素也可以拥有相同的操作。事件冒泡代码: script$(function(){var $div1 $(#div1);var $div2 $(#div2);$div1.click(function(){alert($(this).html());}); $div2.click(function(){alert($(this).html());}); });
/scriptdiv iddiv1 stylewidth:200px; height:200px; background: red;div iddiv2 stylewidth:100px; height:100px;background: yellow;哈哈/div
/div说明:当点击子元素div它的点击事件会向它父元素传递也会触发了父元素的点击事件这就是事件冒泡。2. 事件代理的使用一般绑定事件的写法:$(function(){$ali $(#list li);$ali.click(function() {$(this).css({background:red});});
})ul idlistli1/lili2/lili3/lili4/lili5/li
/ul事件代理的写法$(function(){$list $(#list);// 父元素ul 来代理 子元素li的点击事件$list.delegate(li, click, function() {// $(this)表示当前点击的子元素对象$(this).css({background:red});});
})ul idlistli1/lili2/lili3/lili4/lili5/li
/uldelegate方法参数说明:delegate(childSelector,event,function)childSelector: 子元素的选择器event: 事件名称比如: clickfunction: 当事件触发执行的函数3. 小结事件代理就是使用父元素来代理子元素的事件好处是减少事件的绑定次数提高性能。使用场景当多个相同的子元素绑定同一个事件可以使用事件代理。事件代理使用是使用delegate方法来完成选择集过滤学习目标能够使用选择器进行标签过滤1. 选择集过滤的介绍选择集过滤就是在选择标签的集合里面过滤自己需要的标签2. 选择集过滤的操作has(选择器名称)方法表示选取包含指定选择器的标签eq(索引)方法表示选取指定索引的标签has方法的示例代码:script$(function(){// has方法的使用var $div $(div).has(#mytext);// 设置样式$div.css({background:red});});
/scriptdiv这是第一个divinput typetext idmytext
/divdiv这是第二个divinput typetextinput typebutton
/diveq方法的示例代码:script$(function(){// has方法的使用var $div $(div).has(#mytext);// 设置样式$div.css({background:red});// eq方法的使用var $div $(div).eq(1);// 设置样式$div.css({background:yellow});});
/scriptdiv这是第一个divinput typetext idmytext
/divdiv这是第二个divinput typetextinput typebutton
/div3. 小结选择集过滤可以使用has方法和eq方法来完成jquery给标签设置样式使用css方法选择集转移学习目标能够说出2种选择集转移方法1. 选择集转移介绍选择集转移就是以选择的标签为参照然后获取转移后的标签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的元素选择集转移的示例代码:script$(function(){var $div $(#div01);$div.prev().css({color:red});$div.prevAll().css({text-indent:50});$div.next().css({color:blue});$div.nextAll().css({text-indent:80});$div.siblings().css({text-decoration:underline})$div.parent().css({background:gray});$div.children().css({color:red});$div.find(.sp02).css({font-size:30});});
/scriptdivh2这是第一个h2标签/h2p这是第一个段落/pdiv iddiv01这是一个spandiv/spanspan classsp02第二个span/span/divh2这是第二个h2标签/h2p这是第二个段落/p
/div3. 小结prev() 表示获取上一个同级元素prevAll() 表示获取上面所有同级元素next() 表示获取下一个同级元素nextAll() 表示获取下面所有同级元素parent() 表示获取父元素children() 表示获取所有的子元素siblings() 表示获取其它同级元素find(选择器名称) 表示获取指定选择器的元素
