设计一套企业网站设计报价,网上怎么找房屋设计师,大数据营销的核心,设计网站下载01、基本选择器
标签选择器 $(“a”) ID选择器 $(“#id”) $(“p#id”) 类选择器 $(“.class”) $(“h2.class”) 通配选择器 $(*)
并集选择器$(“elem1,elem2,elem3”)
script typetext/javascript$(function(){/*******id选择器*********…01、基本选择器
标签选择器 $(“a”) ID选择器 $(“#id”) $(“p#id”) 类选择器 $(“.class”) $(“h2.class”) 通配选择器 $(*)
并集选择器$(“elem1,elem2,elem3”)
script typetext/javascript$(function(){/*******id选择器***********///Elementvarunamedocument.getElementById(uname);// Object [Element1,Element2,Element3]// JQ方式获得的元素var uname2$(#uname); /******元素选择器**************/ //js 获得所有的input对象varinpdocument.getElementsByTagName(input);//JQvar inp2$(input);
// JQ对象转化成JS对象 [0] object ---Element
// alert(inp2[0].value);//操作的完全是JQ对象 alert(inp2.eq(0).val()); /********类选择器*********************/var inp3$(.inp);//所有选择器 $(*).css(background-color,green);})/script/headbodyp姓名: input typetext nameuname iduname value123 classinp/ /p p密码: input typepassword namepwd idpwd valuesxt classinp //p/body02、层级选择器
后代选择器$(ul li) 父子选择器 $(ulli) 后面第一个兄弟元素紧跟 prev next 后面所有的兄弟元素(同辈) prev ~ next
script typetext/javascript$(function(){ //包含选择器 √
// $(#div1 span).css(backgroundColor,red);//子父选择器 div1下面的直系子节点 √
// $(#div1span).css(backgroundColor,red);//后面紧跟的下一个元素
// $(#span1 span).css(backgroundColor,red);//获得指定元素后面所有的span标签 ---同辈 √$(#span1 ~ span).css(backgroundColor,red);}) /script/headbodydiv iddiv1 styleheight: 400px; border: 3px solid red;span idspan1 List Item2 /span br /span List Item3 /span br /span List Item4 /spanbr /pspan List Item5 /spanbr /span List Item6 /spanbr /span List Item7 /spanbr //p/div03、位置选择器
first :last :odd :even :eq(index) :lt(index) :gt(index) script typetext/javascript$(function(){/**********位置选择器*********************///获取第一个元素 √$(ul li).first().css(backgroundColor,red);$(ul li:first).css(backgroundColor,red);//获得最后一个元素 √$(ul li).last().css(backgroundColor,red);$(ul li:last).css(backgroundColor,red);//获得所有的奇数行对象 √ $(ul li:even).css(backgroundColor,red);//获得所有的偶数行对象 √$(ul li:odd).css(backgroundColor,red);//获得索引下标的对象 从0开始 √$(ul li:eq(4)).css(backgroundColor,red);$(ul li).eq(3).css(backgroundColor,red);//获得角标大于3的元素对象$(ul li:gt(3)).css(backgroundColor,red);//获得角标小于3的元素对象$(ul li:lt(3)).css(backgroundColor,red); })/script/headbodydiv iddiv1 styleheight: 300px; border: 3px solid red;ulliList Item1 /liliList Item2 /liliList Item3 /liliList Item4 /li/ul ulliList2 Item1 /li !-- liList2 Item2 /li-- /ul/div04、子元素选择器
:nth-child(index) 这个是从1开始的 :only-child :first-child :last-child $(“input[namebo]”)
script typetext/javascript$(function(){/**************子元素选择器***********************///匹配其父元素下的第N个子或奇偶元素 从1开始 √$(ul li:nth-child(1)).css(backgroundColor,red); $(ul li:nth-child(even)).css(backgroundColor,red);//匹配第一个子元素 $(ul li:first-child).css(backgroundColor,red); //匹配最后一个子元素$(ul li:last-child).css(backgroundColor,red); //如果某个元素是父元素中唯一的子元素那将会被匹配$(ul li:only-child).css(backgroundColor,red);})/script/headbodydiv iddiv1 styleheight: 300px; border: 3px solid red;ulliList Item1 /liliList Item2 /liliList Item3 /liliList Item4 /li/ululliList2 Item1 /li!-- liList2 Item2 /li--/ul/div05、属性选择器
[attribute] [attribute1][attribute2] [attributevalue] [attribute!value] [attribute^value] [attribute$value] [attribute*value]
script typetext/javascript$(function(){/*********属性选择器********************///属性等于指定内容的元素对象 √$(input[typetext]).css(backgroundColor,red);//获得属性用s开头额元素对象$(input[name^s]).css(backgroundColor,red);//匹配给定的属性是以某些值结尾的元素$(input[name$d]).css(backgroundColor,red);//属性中包括指定元素的对象//$(input[name*man]) })/script/headbodycenterh3注册用户/h3form actiondoRegister.jsp methodgettable border1 width40% trtd用户名/tdtdinput typetext nameusername idusername value请输入姓名 disableddisabled//td/trtrtd密nbsp;码/tdtdinput typepassword namepwd idpwd //td/trtrtd确认密码/tdtdinput typecolor namespwd idrepwd//td/trtrtd性别/tdtdinput typeradio namesex value男/男input typeradio namesex checkedchecked value女/女/td/trtrtd年龄/tdtdinput typenumber namesage idage value18//td/trtrtd电子邮箱/tdtdinput typeemail namesemail idemail//td/trtrtd爱好/tdtdinput typecheckbox namehobby valuemusic checked/音乐input typecheckbox namehobby valuesports /体育input typecheckbox namehobby valueart /美术/td/trtrtd身份/tdtdselect nameprofessionaloption value1工人/optionoption value2农民/optionoption value3 selectedselected解放军/optionoption value4知识分子/option/select/td/trtrtd简历/tdtdtextarea nameresume rows5 cols40请输入简历/textarea/td/trtrtd照片/tdtdinput typefile namephoto idphoto//td/trtrtd colspan2 aligncenterinput typesubmit value提交 disableddisabled/input typereset value重置/input typebutton value返回 onclickalert(back)//td/tr/table/form/center06、表单选择器
:text :password :radio :checkbox :hidden :file :submit :input 匹配所有 input, textarea, select 和 button 元素 :selected :checked :enabled :disabled :hidden :visible :not 注意$(“input”)和$(“:input”)的区别
script typetext/javascript$(function(){/********表单选择器(只是用于表单的对象)*******/$(input[typetext]).css(background-color,red);√$(:text).css(background-color,red);$(:password).css(background-color,red);//获得所有的表单项---16 √alert($(:input).length);//获得所有的input对象--14alert($(input).length);/**********表单属性选择器**************///获得多选框中的被选择的对象 √$(input[namehobby]:checked);//获得input中name属性是uname的并且含有disabled属性的对象 √$(input[nameuname]:disabled)//匹配所有选中的option元素 √$(select option:selected); })/script/headbodycenterh3注册用户/h3form actiondoRegister.jsp methodgettable border1 width40% trtd用户名/tdtdinput typetext nameusername idusername value请输入姓名 disableddisabled//td/trtrtd密nbsp;码/tdtdinput typepassword namepwd idpwd //td/trtrtd确认密码/tdtdinput typecolor namespwd idrepwd//td/trtrtd性别/tdtdinput typeradio namesex value男/男input typeradio namesex checkedchecked value女/女/td/trtrtd年龄/tdtdinput typenumber namesage idage value18//td/trtrtd电子邮箱/tdtdinput typeemail namesemail idemail//td/trtrtd爱好/tdtdinput typecheckbox namehobby valuemusic checked/音乐input typecheckbox namehobby valuesports /体育input typecheckbox namehobby valueart /美术/td/trtrtd身份/tdtdselect nameprofessionaloption value1工人/optionoption value2农民/optionoption value3 selectedselected解放军/optionoption value4知识分子/option/select/td/trtrtd简历/tdtdtextarea nameresume rows5 cols40请输入简历/textarea/td/trtrtd照片/tdtdinput typefile namephoto idphoto//td/trtrtd colspan2 aligncenterinput typesubmit value提交 disableddisabled/input typereset value重置/input typebutton value返回 onclickalert(back)//td/tr/table/form/center
