Correction status:Uncorrected
Teacher's comments:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery选择器</title> </head> <body> </body> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Jquery选择器</title> </head> <body> <!-- 选择器的种类: 1.基本选择器:元素 ,类,ID,通配符*; 2.层级选择器;类似css选择器,其中大于是gt,小于是lt,其他even为偶数选择器,odd为奇数选择器 3.内容选择器;$()选定的当前标签+:containes"包含内容",其他有empty为空选择器,has包含选择器,parnent选择器:所有包含于该标签的内容,not选择器 4.表单form选择器:选择当前所有控件,如果选择当前标签为input前面加input:,也可根据文件类型来选择, 5.其他常用选择器:.get()数字,.eq(),.first(),.last(),.find(),.toArray()返回数组需要添加函数.children所有子元素,.each()需要添加函数,.next().prev(),.prevAll(),.add()添加元素,.filter()从结果中仅返回符合条件,.not()与filter相反,.slice()起止序号,不包括最后一个, --> <h2>Jquery选择器</h2> <div> <ul> <li>选择方式一:标签选择器</li> <li>选择方式二:层级选择器</li> <li>选择方式三:内容选择器</li> <li>选择方式四:表单选择器</li> <li>选择方式五:.get()选择器</li> <li>选择方式六:.find()选择器</li> </ul> <p>这是一个注册表单</p> <form action="" method=""> <fieldset> <legend> 用户注册 </legend> <p>用户名:<input type="text" name="name" required=""> </p> <p>邮箱:<input type="email" name="email" required=""> </p> <p>密码:<input type="text" name="pws" required=""> </p> <p>确定密码:<input type="text" name="pws" required=""> </p> <p> 性别:<input type="radio" name="xingbie" value="nan" checked="">男 <input type="radio" name="xingbie" value="nv" checked="">女 </p> <p><input type="file" name=""></p> </fieldset> </form> </div> </body> </html> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> <script type="text/javascript"> // 元素选择器 $('li').css('background-color','green') .css('list-style','none') // 层级选择器 $('li:nth-child(2)+li').css('color','white') // 内容选择器 $('ul:contains("选择器")').css('color','red') // 表单选择器 $('input').css('background-color','blue') $('input:file').css('color','brown') // .find()选择器 .get()选择器 $('li').get(3).style.color="black" $('ul').find('li').css('color','blue') </script>
点击 "运行实例" 按钮查看在线实例