首页 > 代码库 > 2017-6-2 jQuery 基础 选择器
2017-6-2 jQuery 基础 选择器
用代码练习:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <script src=http://www.mamicode.com/"js/jquery-1.7.1.min.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> .div1 { width:100px; height:100px; background-color:red; float:left; margin-left:20px; } #d1 { background-color:green; } .div2 { width:100px; height:100px; background-color:blue; float:left; margin-left:20px; } .div3 { width:50px; height:50px; background-color:blue; float:left; margin-left:20px; } </style> </head> <body> <form id="form1" runat="server"> <div class="div1">11111 <div class="div3"></div> </div> <div class="div1" id="d1"> 2222</div> <div class="div1" id="d2"> 3333</div> <div class="div1"> 444441</div> <div class="div2"> 555552</div> </form> </body> </html> <script type="text/javascript"> //ID选择器 //$("#d1").click(function () { // alert("aa"); //}); //class选择器 //$(".div1").click(function () { // alert("aa"); // alert($(this).index()); //}); //标签选择器 //$("div").click(function () { // alert("11"); //}); //并列选择器 //$(".div1,.div2").click(function () { // alert("bb"); //}); //后代选择器 //$(".div1 .div3").click(function () { // alert("cc"); //}); //过滤选择器 //首: //$(".div1:first").click(function () { // alert("这是第一个"); //}); //尾: //$(".div1:last").click(function () { // alert("这是最后一个"); //}); //等于: //$(".div1:eq(2)").click(function () { // alert("这是第三个"); //}); //$(".div1").eq(2).click(function () { // alert("这是第三个"); //}); ////大于: //$(".div1:gt(0)").click(function () { // alert("aa"); //}); ////小于: //$(".div1:lt(3)").click(function () { // alert("aa"); //}); ////排除:not(选择器) //$(".div1:not(.div1:eq(2))").click(function () { // alert("aa"); //}); ////奇数: //$(".div1:odd").click(function () { // alert("aa"); //}); ////偶数: //$(".div1:even").click(function () { // alert("aa"); //}); ////属性名过滤: //$(".div1[id]").click(function () { // alert("aa"); //}); ////属性名等于或者非等于值的过滤: //$(".div1[id=d1]").click(function () { // alert("aa"); //}); //$(".div1[id!=d1]").click(function () { // alert("aa"); //}); //包含字符串的过滤: $(".div1:contains(‘1‘)").click(function () { alert("aa"); }); </script>
2017-6-2 jQuery 基础 选择器
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。