【知了堂学习笔记】_jQuery基础知识之选择器（一）

来源：互联网发布：北京淘宝美工培训班编辑：程序博客网时间：2024/05/20 00:16

请关注“知了堂学习社区”，地址：http://www.zhiliaotang.com/portal.php

1.jQuery是什么

jQuery是一个JavaScriptku
JQuery极大简化了JavaScript操作
兼容不同浏览器下的JavaScript语法问题

2.选择器

基本选择器
- ID选择器：$(“#ID”)，为了找到<div id="d01"></div>
- 类选择器：$(“.name”),为了找到<div class="d01"></div>
- 标签选择器$(“div”)，为了找到<div ></div>
- 群组选择器:$(“div,#ID,.name”)，帮你找到多个元素

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <script src="../jquery-2.1.0.js"></script>    <body>        <div id="d01"></div>        <div></div>        <div class="d02"></div>    </body></html><script>    $(function(){        //id选择器        $("#d01").html("<button>按钮01</button>");//HTML函数和innerHTML类似        //类选择器        $(".d02").html("<button>按钮02</button>");        //标签选择器        $("div").html("<button>按钮03</button>");        //群组选择器        $("#d01,.d02").html("<button>按钮04</button>");        //标签选择器 群组选择器  id选择器与类选择器    })</script>

层次选择器
- 选择直接子元素$(“div>#d01”)
- 选择所有后代子元素$(“div#d01”)
- 选择直接兄弟元素$(“div+#d01”)
- 选择所有兄弟元素$(“div~#d01”)

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script src="../jquery-2.1.0.js"></script>    </head>    <body>        <div>            <input type="text" class="d01" />        </div>        <div>            <p>                <input type="text" class="d01" />            </p>            <p id="p01">                <input type="text" class="d01" />            </p>            <p>                <input type="text" class="d01" />            </p>            <p>                <input type="text" class="d01" />            </p>        </div>    </body></html><script>    $(function(){        //直接后代        $("div >.d01").css("background","#353535");        //所有后代子元素//      $("div .d01").css("background","antiquewhite");//      //直接兄弟元素        $("#p01 + p").css("background","brown");//      //所有的兄弟元素//      $("#p01~p").css("background","darkcyan");    })</script>

过滤选择器
- $(“div:first”)选取所有<div>元素中第一个<div>元素
- $(“div:last”)选取所有的<div>元素中最后一个<div>元素
- $(“div:not(.one)”)选取class不是one的<div>元素
- $(“div:even”)选取索引是偶数的<div>元素
- $(“div:odd”)选取索引是奇数的<div>元素
- $(“div:eq(1)”)选取索引为1的<div>元素
- $(“div:gt(3)”)选取索引大于3的<div>元素
- $(“div:lt(3)”)选取索引小于3的<div>元素
- $(“.header”)先去网页中所有的<h1><h2><h3>...
- $(“div:animated”)选取正在执行动画的<div>元素

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script src="../jquery-2.1.0.js"></script>    </head>    <style type="text/css">        div{            width: 100px;            height: 100px;            border: 1px solid black;            margin: 10px;        }    </style>    <body>        <p>            <button id="btn01">$("div:first")</button>            <button id="btn02">$("div:not(.one)")</button>            <button id="btn03">$("div:even")</button>            <button id="btn04">$("div:eq(1)")</button>            <button id="btn05">$("div:animated")</button>          </p>        `   <div></div>            <div class="one"></div>            <div style="display: none;" class="two"></div>    </body></html><script>    $(function(){        $(".two").show(2000);//显示div        $("#btn01").click(function(){            //过滤选择中查找所有div中 的第一恶div            $("div:first").css("background","#008000");        });        $("#btn02").click(function(){            //不包含one的class            $("div:not(.one)").css("background","#353535");        });        $("#btn03").click(function(){            //索引是偶数的div            $("div:even").css("background","antiquewhite");        });        $("#btn04").click(function(){            //索引是1的div            $("div:eq(1)").css("background","#999999");        });        $("#btn05").click(function(){            //索引是正在执行动画的div            $("div:animated").css("background","yellowgreen");        });    });</script>

内容过滤器
- $(“div:contains(‘你好’)”):选出含有文本你好的
  <div>元素
- $(“div:empty”):选取不包含子元素（包括文本元素）的
  <div>空元素
- $(“div:has(p)”):选取含有
  元素的
  <div>元素
- $(“div:parent”)：选取拥有子元素（包括文本元素）的
  <div>

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script src="../jquery-2.1.0.js"></script>    </head>    <style type="text/css">        div{            width: 100px;            height: 100px;            border: 1px solid black;            margin: 10px;        }    </style>    <body>            <p>            <button id="btn01">$("div:contains('hello world')")</button>            <button id="btn02">$("div:empty")</button>            <button id="btn03">$("div:has(p)")</button>            <button id="btn04">$("div:parent")</button>        </p>        `   <div></div>            <div >hello world .hello jqery,hello java</div>            <div ><p></p></div>    </body></html><script>    $(function(){        $("#btn01").click(function(){            //查找div中指定的包含文本内容            $("div:contains('hello world')").css("background","#008000");        });        $("#btn02").click(function(){            //查找不包含子元素的div            $("div:empty").css("background","#353535");        });        $("#btn03").click(function(){            //含有p标签            $("div:has(p)").css("background","antiquewhite");        });        $("#btn04").click(function(){            //是否含有子元素            $("div:parent").css("background","#CCCCCC");        });    });</script>

属性过滤选择器
- $(“div[id]”)查找含有地属性的<div>
- $(“div[id=other]”)查找含有id属性，且id属性值为other的<div>
- $(“div[id!=other]”)查找含有id属性，且id属性值不是other的<div>
- $(“div[id^=other]”)查含有id属性，且id属性值为other开头的<div>
- $(“div[id][title]”)查找含有id属性和title属性的<div>

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script src="../jquery-2.1.0.js"></script>    </head>    <style type="text/css">        div{            width: 100px;            height: 100px;            border: 1px solid black;            margin: 10px;        }    </style>    <body>        <p>            <button id="btn01">$("div[id]")</button>            <button id="btn02">$("div[id=one]")</button>            <button id="btn03">$("div[id!=one]")</button>            <button id="btn04">$("div[id][title]")</button>        </p>    `   <div id="one"></div>        <div id="two"></div>        <div id="three" title="three"></div>    </body></html><script>    $(function(){        $("#btn01").click(function(){            //含有id属性的div            $("div[id]").css("background","#008000");        });        $("#btn02").click(function(){            //含有地属性是one的div            $("div[id=one]").css("background","#353535");        });        $("#btn03").click(function(){            //含有id属性值不是one的div            $("div[id!=one]").css("background","antiquewhite");        });        $("#btn04").click(function(){            //含id属性也还有title属性的div            $("div[id][title]").css("background","#CCCCCC");        });    });</script>

可见过滤器选择器
- $(“div:visible”)查找可见的<div>
- $(“div:hidden”)查找隐藏的<div>

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    <script src="../jquery-2.1.0.js"></script>    </head>    <style type="text/css">        div{            width: 100px;            height: 100px;            border: 1px solid black;            margin: 10px;        }    </style>    <body>        <p>            <button id="btn01">$("div:visible")</button>            <button id="btn02">$("div:hidden")</button>        </p>    `   <div id="one"></div>        <div style="display: none;"></div>    </body></html><script>    $(function(){        $("#btn01").click(function(){            //查找可见的div            $("div:visible").css("background","#000000");        });        $("#btn02").click(function(){            //查找不可见的div            $("div:hidden").css("background","#008000").show(2000);        });    });</script>

表单选择器
- $(“:input”)
  - $(“:text”)
  - $(“:checkbox”)
  - $(“:password”)
  - $(“:radio”)
  - $(“:submit”)
  - $(“:button”)
  - $(“:file”)
  - $(“:reset”)

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script src="../jquery-2.1.0.js"></script>    </head>    <body>        <p>            <button id="btn01">$(":text")</button>            <button id="btn02">$(":checkbox")</button>            <button id="btn03">$(":radio")</button>            <button id="btn04">$(":select")</button>        </p>        <form id="f01">            <input type="text" />            <p>                <input type="checkbox" />java                <input type="checkbox" />Jquery            </p>            <p>                <input type="radio" name="r1" />java                <input type="radio" name="r1" />jQuery            </p>            <select>                <option>java</option>                <option>jQuery</option>            </select>        </form>    </body></html><script>$(function(){    $("#btn01").click(function(){        $("#f01 :text").css("background","#008000");    });    $("#btn02").click(function(){        $(":checkbox").attr("checked",true);//attr函数时设置元素的属性    });    $("#btn03").click(function(){        //jQuery如何遍历选择到的元素节点        //下面的radio有两个，需要进行遍历$.each(),$("选择器").each()        //遍历过程中才能找到被选中的单选按钮        $(":radio").each(function(i){            console.log(i+"===="+this.checked);        });    });    $("#btn04").click(function(){        console.log($(":select"));    });})</script>

状态选择器
- $(“:checked”)
- $(“:selected”)

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script src="../jquery-2.1.0.js"></script>    </head>    <body>        <p>            <button id="btn01">$(":text")</button>            <button id="btn02">$(":checkbox")</button>            <button id="btn03">$(":radio")</button>            <button id="btn04">$(":select")</button>            <button id="btn05">$(":checked")</button>            <button id="btn06">$(":selected")</button>        </p>        <form id="f01">            <input type="text" />            <p>                <input type="checkbox" />java                <input type="checkbox" />Jquery            </p>            <p>                <input type="radio" name="r1" />java                <input type="radio" name="r1" />jQuery            </p>            <select>                <option>java</option>                <option>jQuery</option>            </select>        </form>    </body></html><script>    $(function(){        $("#btn01").click(function(){        $("#f01 :text").css("background","#008000");        });        $("#btn02").click(function(){            $(":checkbox").attr("checked",true);//attr函数时设置元素的属性        });        $("#btn03").click(function(){            //jQuery如何遍历选择到的元素节点            //下面的radio有两个，需要进行遍历$.each(),$("选择器").each()            //遍历过程中才能找到被选中的单选按钮            $(":radio").each(function(i){                console.log(i+"===="+this.checked);            });        });        $("#btn04").click(function(){            console.log($(":select"));        });        $("#btn05").click(function(){            console.log($(":checked"));            $(":checked").attr("checked",false);        });        $("#btn06").click(function(){            window.alert($(":selected").text());//jQuery提供了text（） 获取文本内容的值        });    })</script>

阅读全文

0 0