zoukankan      html  css  js  c++  java

  • JQuery学习---JQuery基础知识

    JQuery介绍：

    【官网】http://jquery.com

    【参考API】http://jquery.cuishifeng.cn/

    JQuery的低版本支持IE低版本，JQuery的2版本不太支持IE的低版本，推荐用1版本的最高1.12

        - 找元素（直接，间接）

        - 操作   （属性..）

    JQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。

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

    jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。

    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 对象

    基本语法：$(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中type属性

                     $("input :checked")      // 注意input标签和checked属性直接有一个空格

    基本选择器 + 层级选择器

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<body>
    <div>hello div</div>
    <div class="div1">hello div1</div>
    <p>hello p</p>
    <p id="p1">hello p1</p>
<!-- --------------------------------------------------- -->
    <div class="outer">
        <div class="inner">
            <p>hello p2</p>
        </div>
        <p>hello p3</p>
    </div>
    <p>毗邻标签</p>
</body>
</html>

<script src="jquery-3.2.1.js"></script>
<script>
    //基本选择器
    $("div").css("color","red");                // 标签选择器
//    $("div").css("color","red").css("background-color","yellow");  //JQuery支持级联样式
    $("*").css("background-color","yellow");    // 全局选择器
    $("#p1").css("color","blue");               // id选择器
    $(".div1").css("color","green")             // 类选择器

    //组合选择器
    $(".outer p").css("color","purple") ; //后代选择器，符合名字的后代都显示该样式
    $(".outer>p").css("color","purple") ; //子代选择器，只在子代显示该样式
    $(".outer+p").css("color","purple") ; //毗邻选择器，只在紧挨着outer元素的p子代显示该样式
    $(".outer~p").css("color","purple") ; //subling选择器，只向下找子代的p标签显示该样式
    
</script>

    基本筛选器 + 属性选择器 + 表单选择器

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<body>
    <div class="div1">hello div1
        <ul>
            <li>1111</li>
            <li>2222</li>
            <li>3333</li>
            <li>4444</li>
        </ul>
    </div>
    <p school="peking">清华大学</p>
    <p school="beijing">北京大学</p>
    <input type="text">
    <input type="button">
</body>
</html>

<script src="jquery-3.2.1.js"></script>
<script>
    //基本筛选器，采用冒号
    $(".div1 li:first").css("color","red");    //取出li的第一个元素
    $(".div1 li:eq(1)").css("color","green");  //取出li的第2个元素[索引从0开始]
    $(".div1 li:last").css("color","blue");    //取出li的最后一个元素
    $(".div1 li:even").css("color","red");     //数组下标的偶数位变红色

    //属性选择器,中括号
    $("[school]").css("color","orange");       //此时school属性的所有的颜色都变了
    $("[school='beijing']").css("color","palegreen");  //给特定的北京大学变浅绿色

    // 表单选择器，中括号利用type标识
    $("[type='text']").css("height","12px");
    //另一种形式来表达，且只能用于input中type属性
    $(":button").css("width","55px");
    $("input: checked")   // 注意空格
</script>

    筛选器

    过滤筛选器
                        $("li").eq(2)  $("li").first()  $("ul li").hasclass("test")【返回boolean值，有则true】
          查找筛选器
                        $("div").children(".test")    $("div").find(".test") 
                        $(".test").next()    $(".test").nextAll()   $(".test").nextUntil()
                        $("div").prev()  $("div").prevAll()  $("div").prevUntil()
                        $(".test").parent()  $(".test").parents()  $(".test").parentUntil()
                        $("div").siblings()

                  $("div").children(".test")    $("div").find(".test") 

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<body>
    <div class="div1">hello div1
        <div class="div5">div5</div>
        <div class="div15">div15</div>
        <div class="div2">hello div2
            <div class="div3">hello div3</div>
            <div class="div4">hello grandson div4</div>
        </div>
        <div class="div4">hello uncle div4
            <div class="div7">div7</div>  <!-- 父子继承，会继承父类颜色 -->
        </div>
        <div class="div6">div6</div>
        <div class="div8">div8</div>
    </div>
</body>
</html>
<script src="jquery-3.2.1.js"></script>
<script>
        // childer: 只找儿子辈；  find：所有后代内查找
//    $(".div1").children().css("color","red")  // 不添加限定的，查找所有元素，div2, div3, grandson div4变色
//    $(".div1").children(".div4").css("color","green")  // 添加了限定只找儿子辈的div4变色，uncle div4变色
//    $(".div1").find(".div4").css("color","blue");  // 查找div1下所有div4的标签grandson div4, uncle div4变蓝色，
</script>

    $(".test").next()    $(".test").nextAll()   $(".test").nextUntil()  +  $("div").prev()  $("div").prevAll()  $("div").prevUntil()

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<body>
    <div class="div1">hello div1
        <div class="div5">div5</div>
        <div class="div15">div15</div>
        <div class="div2">hello div2
            <div class="div3">hello div3</div>
            <div class="div4">hello grandson div4</div>
        </div>
        <div class="div4">hello uncle div4
            <div class="div7">div7</div>  <!-- 父子继承，会继承父类颜色 -->
        </div>
        <div class="div6">div6</div>
        <div class="div8">div8</div>
    </div>
</body>
</html>
<script src="jquery-3.2.1.js"></script>
<script>
//    $(".div2").next().css("color","palegreen");     // 找到了div2下一个div4以及子类div7
//    $(".div2").nextAll().css("color","red");        // 找到了div2下面所有类div4以及子类div7,div6
//    $(".div2").nextUntil(".div6").css("color","red");  // 从div2找到div6之前的元素，div4以及子类div7
//    $(".div2").prev().css("color","green")             // 找到div2上面一个元素，div5
//    $(".div2").prevAll().css("color","red")             // 找到div2上所有元素，div5，div15
//    $(".div2").prevUntil(".div5").css("color","yellow") // 从找到div2向上找到div5之前的所有元素，div15
</script>

    $(".test").parent()  $(".test").parents()  $(".test").parentUntil()  +  $("div").siblings()

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<body>
    <div class="div1">hello div1
        <div class="div5">div5</div>
        <div class="div15">div15</div>
        <div class="div2">hello div2
            <div class="div3">hello div3</div>
            <div class="div4">hello grandson div4</div>
        </div>
        <div class="div4">hello uncle div4
            <div class="div7">div7</div>  <!-- 父子继承，会继承父类颜色 -->
        </div>
        <div class="div6">div6</div>
        <div class="div8">div8</div>
    </div>
</body>
</html>
<script src="jquery-3.2.1.js"></script>
<script>
//    $(".div2").parent().css("color","red");      // 找到div1的父类后，又因为子类继承了父类，所以颜色全部变红
//    $(".div2").parents().css("color","yellow")    //这里的parsents是一个集合，一直向上找，找到body,子类继承父类
//    $(".div2").parentsUntil("body").css("color","blue") // 一直向上找到body之前的元素
   $(".div2").siblings().css("color","red"); // 向上和向下找兄弟类，div5，div15，hello uncle div4，div7，div6，div8变色
</script>

    实例演示：

     

     

     

     

     

     

     

     

    【更多参考】http://www.cnblogs.com/yuanchenqi/articles/5663118.html
  • 相关阅读:
    《挑战程序设计竞赛》 一二章部分代码题解
    动态规划之矩阵连乘和POJ 1651
    关于图片的重绘，从而进行压缩
    iOS开发：读取pdf文件
    如何改变tableview的section的颜色
    端口的作用
    Mac 下，配置SVN
    cocoaPods 的安装和使用
    关于如何调用苹果自带的地图APP
    关于 HTTP 请求头的内容
  • 原文地址：https://www.cnblogs.com/ftl1012/p/9397539.html
Copyright © 2011-2022 走看看