jQuery_语法_选择器_ZHOU125disorder_

jquery

    <!-- 第一步引进jqueyr -->
    <script src="./jquery-3.1.1.min.js"></script>
    <script>
        // jquery语法
        // 通过选取到HTML元素，并且对其进行某些操作

        // 基础语法
        // $(选择器).方法().方法()
        // 文档就绪事件

        // js
        window.onload=function(){

        }

        // jquery文档就绪事件两种
        // 全写
        $(document).ready(function(){

        });
        
        // 简化写法
        $(function(){

        });

        // 面试题
        // js和jq文档就绪事件区别
        // 编写的个数：            js：1次                 jq：可以写多个
        // 执行时机：              js：所有内容全部加载完毕以后     jq：DOM结构加载完毕以后执行
        // 简化写法：              js：无                  jq：有

jq对象和DOM对象转换

    <p>我的名字叫卡卡西</p>
    <script src="jquery-3.1.1.min.js"></script>
    <script>
        // jquery对象就是jquery包装DOM对象后产生的对象
        // jquery对象是jquery独有的，js里面的方法不可以应用
        // DOM对象不可以应用jq里面的方法，比如html(),css(),val()

        // DOM对象转换成jq对象
        // 只需要在DOM对象外面用$()包裹起来就可以       比如$(DOM对象)
        var p = document.getElementsByTagName("p")[0];
        $(p).css("color","#096");

        // jq对象转换成DOM对象
        var p = $("p").get(0);
        // 通过get()方法，得到相应的DOM对象
        console.log(p.innerHTML);
    </script>

基本选择器

    <p id="one">卡卡西</p>
    <p class="two">卡卡西</p>
    <span>卡卡西</span>
    <script src="./jquery-3.1.1.min.js"></script>
    <script>
        // css()方法  可以获取或者设置css样式
        // id选择器
        // $("#one").css("color","#096");   //设置单个样式
        $("#one").css({"color":"#096","font-size":"18px"}); //设置多个样式
        // class选择器
        $(".two").css("color","#ddd");
        // 标签选择器
        $("span").css("color","#096");
        $("*").css("color","#096");
        $("#one,.two").css("color","#ccc");
        // html()  val()            获取或者设置文本
        // console.log($("#one").html());          //获取
        // $("#txt").html("我爱罗");   //设置
        // html()方法，括号内不写东西，代表获取，写东西，代表设置
    </script>

过滤选择器

    <p>1</p>
    <p class="two">2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <script src="./jquery-3.1.1.min.js"></script>
    <script>
        // 由原本获取到的一组，找到其中的某一个或者某几个叫做过滤
        // :first或first()
        $("p:first").css("color","#096");
        $("p").first().css("color","#096");
        // :last或last()
        $("p:last").css("color","#096");
        $("p").last().css("color","#096");
        // :not()           选取到除了什么以外的元素
        $("p:not(.two)").css("color","#ddd");
        // :even  下标是偶数的元素 :odd   下标是奇数的元素
        $("p:even").css("background","#fff");
        $("p:odd").css("background","#000");
        // eq(number)下表为number
        $("p").eq(1).css("color","#ccc");
        // :gt 下标值大于某某的元素  :lt   下标值小于某某的元素
        $("p:gt(3)").css("color","#aaa");
    </script>

层次选择器

    <div>
        <p>1</p>
        <p>2</p>
        <span>3</span>
        <span>4</span>
    </div>
    <script src="./jquery-3.1.1.min.js"></script>
    <script>
        // 层次选择器
        // 后代选择器
        $("div p").css("color","#096");
        // 子代选择器
        $("div>p").css("color","#ddd");
    </script>

内容过滤选择器

    <span>1</span>
    <div style="width: 100px;height: 100px;"></div>
    <div style="width: 100px;height: 100px;">2</div>
    <script src="jquery-3.1.1.min.js"></script>
    <script>
        // 内容过滤选择器
        // :contains()      获取到含有文本内容包含XX的元素
        $("span:contains(1)").css("color","#096");
        // :empty    空     获取到不包含后代元素或者文本是空的元素
        $("div:empty").css("background","#ddd");
        // :parent  获取非空
        $("div:parent").css("background","#096");
    </script>

jq可见性过滤选择器

    <div style="display: none;width: 100px;height: 100px;"></div>
    <div style="width: 100px;height: 100px;"></div>
    <script src="jquery-3.1.1.min.js"></script>
    <script>
        // 可见性过滤选择器
        // :hidden 选取不可见元素  :visible  选取可见元素
        $("div:hidden").css("background","#096").css("display","block");
        $("div:visible").css("background","#096");
    </script>

属性过滤

    <a href="www.baidu.com">baidu</a>
    <a href="www.mi.com">xiaomi</a>
    <script src="jquery-3.1.1.min.js"></script>
    <script>
        // 属性过滤选择器
        // [属性]
        // [属性=属性值]
        $("a[href='www.baidu.com']").css("font-size","50px").css("color","#000");

表单选择器

    <input type="text">
    <input type="password">
    <input type="radio">
    <input type="checkbox">
    <input type="button">
    <input type="file">
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <select name="" id="">
        <option value="">1</option>
        <option value="">2</option>
    </select>
    <script src="jquery-3.1.1.min.js"></script>
    <script>
        // 表单选择器
        // :input       所有表单
        $(":input").css("width","500px");
        $(":text").css("width","500px");
        $(":password").css("width","500px");
        $(":radio").css("width","500px");
        $(":checkbox").css("width","500px");
        $(":file").css("width","500px");
        $(":button").css("width","500px");