您好,欢迎访问三七文档
当前位置:首页 > 行业资料 > 国内外标准规范 > 04课堂练习-BTC-Jquery-01-Jquery过滤选择器案例
1.基本过滤选择器案例(利用“04课堂练习-BTC-Jquery-01-Jquery基本选择器案例.doc”文件中第6个案例网页进行编码)改变第一个div元素的背景色为#bbffaa$(div:first).css(background,#bbffaa)改变最后一个div元素的背景色为#bbffaa$(div:last).css(background,#bbffaa)改变id不为one的所有div元素的背景色为#bbffaa$(div:not('#one')).css(background,#bbffaa)改变索引值为偶数的div元素的背景色为#bbffaa$(“div:even).css(background,#bbffaa)改变索引值为奇数的div元素的背景色为#bbffaa$(“div:odd).css(background,#bbffaa)改变索引值为等于3的div元素的背景色为#bbffaa$(“div:eq(3)).css(background,#bbffaa)改变索引值为大于3的div元素的背景色为#bbffaa$(“div:gt(3)).css(background,#bbffaa)改变索引值为小于3的div元素的背景色为#bbffaa$(“div:lt(3)).css(background,#bbffaa)改变索引值为大于3且为奇数的div元素的背景色为#bbffaa$(div:gt(3):odd).css(background,#bbffaa);改变所有的标题元素的背景色为#bbffaa$(:header).css(background,#bbffaa);改变当前正在执行动画的所有元素的背景色为#bbffaa$(:animated).css(background,#bbffaa);2.内容过滤选择器案例(利用“04课堂练习-BTC-Jquery-01-Jquery基本选择器案例.doc”文件中第6个案例网页进行编码)改变含有文本‘di’的div元素的背景色为#bbffaa$(div:contains(di)).css(background,#bbffaa);改变不包含子元素(或者文本元素)的div空元素的背景色为#bbffaa$(div:empty).css(background,#bbffaa);改变含有class为mini元素的div元素的背景色为#bbffaa$(div:has(.mini)).css(background,#bbffaa);改变含有子元素(或者文本元素)的div元素的背景色为#bbffaa$(div:parent).css(background,#bbffaa);3.可见性过滤选择器案例(利用“04课堂练习-BTC-Jquery-01-Jquery基本选择器案例.doc”文件中第6个案例网页进行编码)改变所有可见的div元素的背景色为#bbffaa$('div:visible').css(background,#bbffaa);选取所有不可见的元素,利用jQuery中的show()方法将它们显示出来,并设置其背景色为#bbffaa$(':hidden').show(3000).css(background,#bbffaa)选取所有的文本隐藏域,并打印它们的值$('input:hidden').length4.属性过滤选择器案例(利用“04课堂练习-BTC-Jquery-01-Jquery基本选择器案例.doc”文件中第6个案例网页进行编码)改变含有属性title的div元素的背景颜色$('div[title]').css(background,#bbffaa);改变属性title值等于test的div元素的背景颜色.$('div[title=test]').css(background,#bbffaa);改变属性title值不等于test的div元素的背景颜色(没有属性title的也将被选中).$('div[title!=test]').css(background,#bbffaa);改变属性title值以te开始的div元素的背景颜色.$('div[title^=te]').css(background,#bbffaa);改变属性title值以est结束的div元素的背景颜色.$('div[title$=est]').css(background,#bbffaa);改变属性title值含有es的div元素的背景颜色.$('div[title*=es]').css(background,#bbffaa);改变含有属性id,并且属性title值含有”es”的div元素的背景颜色$('div[id][title*=es]').css(background,#bbffaa);5.子元素过滤选择器案例(利用“04课堂练习-BTC-Jquery-01-Jquery基本选择器案例.doc”文件中第6个案例网页进行编码)选取下列元素,改变其背景色为#bbffaa每个class为one的div父元素下的第2个子元素.$('div.one:nth-child(2)').css(background,#bbffaa);每个class为one的div父元素下的第一个子元素$('div.one:first-child').css(background,#bbffaa);每个class为one的div父元素下的最后一个子元素$('div.one:last-child').css(background,#bbffaa);如果class为one的div父元素下的仅仅只有一个子元素,那么则改变这个子元素$('div.one:only-child').css(background,#bbffaa);6.表单对象属性过滤选择器案例有如下的表单信息:formid=form1action=#可用元素inputname=addvalue=可用文本框br/不可用元素inputname=emaildisabled=disabledvalue=不可用文本框br/可用元素inputname=chevalue=可用文本框br/不可用元素inputname=namedisabled=disabledvalue=不可用文本框br/br/多选框:br/inputtype=checkboxname=newsletterchecked=checkedvalue=test1/test1inputtype=checkboxname=newslettervalue=test2/test2inputtype=checkboxname=newslettervalue=test3/test3inputtype=checkboxname=newsletterchecked=checkedvalue=test4/test4inputtype=checkboxname=newslettervalue=test5/test5div/divbr/br/下拉列表1br/selectname=testmultiple=multiplestyle=height:100pxoption浙江/optionoptionselected=selected湖南/optionoption北京/optionoptionselected=selected天津/optionoption广州/optionoption湖北/option/selectbr/br/下拉列表2br/selectname=test2option浙江/optionoption湖南/optionoptionselected=selected北京/optionoption天津/optionoption广州/optionoption湖北/option/selectdiv/div/form改变表单内可用input元素的值$(#form1input:enabled).val(这里变化了!);改变表单内不可用input元素的值$(#form1input:disabled).val(这里变化了!);获取多选框选中的个数alert($(#form1input:checked).length);获取下拉框选中的内容alert($(option:selected).text());
本文标题:04课堂练习-BTC-Jquery-01-Jquery过滤选择器案例
链接地址:https://www.777doc.com/doc-3051154 .html