zoukankan      html  css  js  c++  java
  • jquery介绍及其选择器

    jQuery是什么?

    <1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team。

    <2>jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!

    <3>它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器

    <4>jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTMLdocuments、events、实现动画效果,并且方便地为网站提供AJAX交互。

    <5>jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。

     什么是jQuery对象?

    jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的如果一个对象是 jQuery 对象那么它就可以使用 jQuery 里的方法: $(“#test”).html();

    $("#test").html()    
           //意思是指:获取ID为test的元素内的html代码。其中html()是jQuery里的方法 
    
           // 这段代码等同于用DOM实现代码: document.getElementById(" test ").innerHTML; 
    
           //虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法.乱使用会报错
    
           //约定:如果获取的是 jQuery 对象, 那么要在变量前面加上$. 
    
    var $variable = jQuery 对象
    var variable = DOM 对象
    
    $variable[0]:jquery对象转为dom对象      $("#msg").html(); $("#msg")[0].innerHTML

    jquery的基础语法:$(selector).action()

    寻找元素(选择器)

    选择器

    基本选择器

    $("*")  $("#id")   $(".class")  $("element")  $(".class,p,div")

    层级选择器

    $(".outer div")  $(".outer>div")   $(".outer+div")  $(".outer~div")

    基本筛选器

    $("li:first")  $("li:eq(2)")  $("li:even") $("li:gt(1)")

    属性选择器

    $('[id="div1"]')   $('["alex="sb"][id]')

    表单选择器

    $("[type='text']")----->$(":text")         注意只适用于input标签  : $("input:checked")
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
        <div>hello</div>
        <!--先去下载jquery文档,然后引用该文档-->
        <script src="jquery-3.3.1.js"></script>
        <script>
            // $('div').css('color','red');
            jQuery('div').css('color','blue');
        </script>
    
    
        <div id="div1">div1</div>
        <p>p</p>
        <a href="#">click</a>
        <div class="outer">
            outer
            <div class="inner">
                inner
                <p>p1</p>
            </div>
            <p>p2</p>
        </div>
        <div class="outer">div2</div>
        <p>p3</p>
        <p>p4</p>
        <p>p5</p>
        <script>
            // 基本选择器
            // $('*').css('color', 'red');
            // $('#div1').css('color', 'red');
            // $('.outer').css('color', 'red');
            // $('.inner,p').css('color', 'green');
            // 层级选择器
            // $('.outer p').css('color', 'red');
            // $('.outer>p').css('color', 'red');
            // $('.outer+p').css('color', 'red'); // 毗邻,只在下面找一个紧挨着的
            // $('.outer~p').css('color', 'red'); // 匹配后面所有的p标签
        </script>
    
    
        <ul>
            <li>11</li>
            <li>22</li>
            <li>33</li>
            <li>44</li>
            <li>55</li>
        </ul>
        <script>
            // 基本筛选器
            // $('li:first').css('color','red'); // 第一个
            // $('li:last').css('color','blue'); // 最后一个
            // $('li:eq(2)').css('color','green'); // 第三个
            // $('li:odd').css('color','red'); // 偶数
            // $('li:even').css('color','blue'); // 奇数
            // $('li:gt(2)').css('color','red'); // 第三个下面
            // $('li:lt(2)').css('color','red'); // 第三个上面
        </script>
    
    
        <p data="p1" id="pp1">hello p1</p>
        <p data="p1">hello p2</p>
        <script>
            // 属性选择器
            $('[data="p1"][id="pp1"]').css('color','red');
        </script>
    
    
        <input type="text">
        <input type="checkbox">
        <input type="button">
        <script>
            // 表单选择器(只适用于input标签)
            // $('[type="text"]').css('width','300px');
            $(':text').css('width','600px'); // 上面的写法与属性选择器一样,这种写法只适用于input标签
        </script>
    
    </body>
    </html>
    while True: print('studying...')
  • 相关阅读:
    磁盘分区对齐的重要性
    linux命令详解:jobs命令
    linux命令详解:df命令
    linux命令详解:cat命令
    <mvc:annotation-driven />注解意义
    maven install 时提示“程序包 javax.crypto不存在”
    Java 字典排序
    Linux查看用户登陆历史记录
    警告: [SetPropertiesRule]{Server/Service/Engine/Host/Context} Setting property ..
    Eclipse启动tomcat 报“ A child container failed during start”
  • 原文地址:https://www.cnblogs.com/xuewei95/p/15037023.html
Copyright © 2011-2022 走看看