zoukankan      html  css  js  c++  java

  • jquery复习1

    一、JQuery对象与DOM对象

    1、jQuery中得到顶级对象

    jquery—-可以用$符号来代替，为了方便jQuery（jQuery)中的js文件中的所有东西都是jquery或者都是$符号下的

    2、知识点

    （1）网页开关灯的实现

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40

    <html lang="en">

    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <style>
      .cls{
        background-color: black
      }
      </style>
    </head>

    <body>
      <input type="button" value="关灯" id="btn">
      <script src="./jquery.min.js"></script>
      <script>
        
        $('#btn').click(function () {
          if ($("body").hasClass("cls")) {
            $("body").removeClass("cls");
          } else {
            $("body").addClass("cls")
          }
        });
        // 法二：通过判断#btn的值，更改body的样式
        $('#btn').click(function(){
          if($(this).val()=="关灯"){
            $("body").css("backgroundColor","black");
            $(this).val("开灯")
          }else{
            $("body").css("backgroundColor","");
            $(this).val("关灯")
          }
        })
      </script>
    </body>
    </html>

    知识点
    jquery中元素样式的操作方式：

    1. jQuery对象.css(“css的属性名字”,”属性的值”);—->设置元素的样式属性值
      （ 注意:
      .css(“属性”,”值”);属性的写法可以是DOM操作中的js写法,也可以是css中的写法
      ）
    2. 类样式的方法
      .hadclass(“cls”)：有无样式
      . removeclass(“cls”): 移除样式
      . addclass(“cls”): 增加样式
      .toggleClass(“cls”)：切换类样式
      其他：
      1. jQuery对象.val();——-表示的是获取该元素的value属性值
      2. jQuery对象.val(“值”);—-表示的是设置该元素的value属性

        （2）页面加载的不同办法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jquery-1.12.1.js"></script>
        <script>
            //第一种：页面加载完之后触发
            $(window).load(function () {
                console.log("小苏好帅");
            });
            $(window).load(function () {
                console.log("小样好帅");
            });
            //第二种：比第一种快，页面基本元素加载晚触发
            $(document).ready(function () {
                console.log("1");
            });
            $(document).ready(function () {
                console.log("2");
            });
            //第三种：
            jQuery(function () {
                console.log("页面加载111")
            });
            jQuery(function () {
                console.log("页面加载222")
            });
            //第四种
            $(function () {
                console.log("lala")
            });
            $(function () {
                console.log("哈哈哈")
            });
        </script>
    </head>
    <body>
    </body>
    </html>

    二三四比一快，建议使用四

    （3）获取元素的方法

    DOM作用:操作页面的元素

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    * DOM中获取元素方式:
        
        * 根据id获取元素
        * document.getElementById("id属性的值");
        * 根据标签名字获取元素
        * document.getElementsByTagName("标签名字");
        * 根据name属性获取元素
        * document.getElementsByName("name属性的值");
        * 根据类样式名字获取元素
        * document.getElementsByClassName("类样式的名字");
        * 根据选择器获取元素
        * document.querySelector("选择器");---->id选择器,类选择器,标签选择器...一个
        * document.querySelectorAll("选择器");多个的

    jQuery中获取元素的方式:

    1
    * $("选择器")----jQuery对象

    （4）选择器

    1> 基本选择器

    jquery复习1

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    * id选择器
        * $("#id属性的值")---->某个元素
    * 标签选择器
        * $("标签名字")------>多个元素或者是某个元素
    *类选择器
    	*$(".类样式的名字")---某个或者是多个
        .css("属性","值");-----设置某个元素的css样式属性值
    * 交集选择器 
       标签名.类样式的名字
    * 并集选择器
      选择器,选择器,选择器...
    2> 层次选择器

    jquery复习1

    1
    2
    3
    4
    5
    层次选择器
        $("选择器 选择器");======>$("#dv span") 后代选择器
        $("选择器>选择器");======>$("#dv span") 子代选择器，直接的子代
        $("选择器~选择器");======>$("#dv span") 后面的索引兄弟元素
        $("选择器+选择器");======>$("#dv span") 相邻的后面的第一个兄弟元素
    3>奇偶选择器

    奇：old
    偶：even

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            ul {
                list-style-type: none;
                 200px;
                position: absolute;
                left: 500px;
            }
     
            ul li {< 大专栏  jquery复习1/span>
                margin-top: 10px;
                cursor: pointer;
                text-align: center;
                font-size: 20px;
     
            }
        </style>
        <script src="jquery-1.12.1.js"></script>
        <script>
            $(function () {
                $("#btn").click(function () {
                    //奇---红色,偶---黄色
                    //odd----奇数的
                    //even---偶数的
                    $("#uu>li:odd").css("backgroundColor","yellow");
                    $("#uu>li:even").css("backgroundColor","red");
                });
            });
     
        </script>
    </head>
    <body>
    <input type="button" value="隔行变色" id="btn"/>
    <ul id="uu">
        <li>乔峰:降龙十八掌</li>
        <li>张无忌:乾坤大挪移</li>
        <li>段誉:鳞波微步</li>
        <li>丁棚:天外流星贱</li>

        <li>张三丰:太极掌</li>
        <li>段飞:极乐神功</li>
        <li>云飞扬:天馋功</li>
        <li>杨过:黯然销魂掌</li>
        <li>那谁谁:如来神掌</li>
        <li>孟星魂:流星蝴蝶剑</li>
        <li>楠哥:少女萌萌拳</li>
    </ul>
    </body>
    </html>

    效果
    jquery复习1

    4>索引选择器

    .index()方法—->当前这个元素的索引
    :eq(索引值)—->选择器—对应索引的元素
    ：lt（索引值）—小于索引值的索引元素
    ：gt（索引值）—大于索引值的所有元素
    ：gt（索引值1）:lt（索引值2）—大于索引值1的所有元素之后，从索引值0开始，再找小于索引值2的元素

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    <script>
        //页面加载事件
        $(function () {
          
          //左边的ul中的li
          $("#left>li").mouseenter(function () {
            //先获取当前li的索引值
            var index=$(this).index();
     
            //先隐藏所有的li
            $("#center>li").hide();//隐藏
            //设置某个li显示
            //$("#center>li:eq(索引值)")---->对应的li标签
            //显示当前的对应的li即可
            $("#center>li:eq("+index+")").show();
     
          });
          
          //右边的ul中的li
          $("#right>li").mouseenter(function () {
            //先获取当前li的索引值
            var index=$(this).index()+9;
     
            //先隐藏所有的li
            $("#center>li").hide();//隐藏
            //设置某个li显示
            //$("#center>li:eq(索引值)")---->对应的li标签
            //显示当前的对应的li即可
            $("#center>li:eq("+index+")").show();
     
          });
        });
    1
    2
    3
    4
    5
    6
    //所有的li中索引为2的li
    //$("ul>li:eq(2)").css("backgroundColor","green");
    //所有的li中索引小于5的li
    //$("ul>li:lt(5)").css("backgroundColor","deeppink");
    //所有的li中索引大于5的li
    //$("ul>li:gt(5)").css("backgroundColor","hotpink");

    （5）方法总结

    1
    2
    3
    4
    5
    6
    7
    8
    9
    * .val();----设置或者是获取表单标签的value属性值
    * .text();----设置或者是获取标签中的文本内容---就相当于DOM中innerText
    * .css();-----设置元素的css样式属性值
    * .html();----设置或者是获取标签中的html内容---就相当于DOM中innerHTML
    * .hide();----设置元素隐藏，括号中可以写数字，表示毫秒
    * .show();----设置元素显示，括号中可以写数字，表示毫秒
    * .stop();----停止当前的动画
    //对象.text("值")---->设置该元素的文本内容
    //本身代码没有循环操作,jQuery中内部帮助我们循环操作的----->隐式迭代

    （6）获取其他兄弟元素的方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    //设置id为threes的li的前一个兄弟元素的css属性
    $("#three").prev("li").css("backgroundColor","yellow");
    //设置id为threes的li的前面所有兄弟元素的css属性
    $("#three").prevAll("li").css("backgroundColor","yellow")
    //设置id为threes的li的后一个兄弟元素的css属性
    $("#three").next("li").css("backgroundColor","yellow")
    //设置id为threes的li的后面所有兄弟元素的css属性
    $("#three").nextAll("li").css("backgroundColor","yellow")
    //设置id为threes的li的父级元素的css属性
    $("#three").parent().css("backgroundColor","yellow")

    （7）链式编程

    断链–对象使用方法后返回来的不是之前的对象了，那么此时就叫断链，也就不能再链式编程了，如何解决？在断链位置直接使用end()方法，内部会帮助我们自动的修复断链

    1
    $(this).prevAll.css("backgroundColor","yellow").end().nextAll().css("backgroundColor","red");

    （8）动画的相关方法

    三组基本动画

    1> show和hide
    1
    2
    3
    4
    5
    6
    7
    8
    //show和hide参数一样
    /*
    *show (参数1,参数2);
    *参数1：数字---毫秒
    *参数1：字符串的值--- slow---600毫秒  normal---400毫秒 fast---200毫秒
    *估计这个毫秒数字，由于记不清楚---可能不准
    *参数2：回调函数，当动画执行完毕之后执行该函数
    **/
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    $(function () {
          //点击第一个按钮显示div
          $("#btn1").click(function () {
            $("#dv").show(5000,function () {
              alert("完了");
            });
          });
          //点击第二个按钮隐藏div
          $("#btn2").click(function () {
            $("#dv").hide(5000,function () {
              alert("好了");
            });
          });
        });
    2> slideUp，slideDown ，slideToggle() 参数一样

    slideUp：滑入
    slideDown ：滑出
    slideToggle() ：切换

    1
    2
    3
    4
    5
    6
    /*
    *参数1：数字---毫秒
    *参数1：字符串的值--- slow---600毫秒  normal---400毫秒 fast---200毫秒
    *估计这个毫秒数字，由于记不清楚---可能不准
    *参数2：回调函数，当动画执行完毕之后执行该函数
    **/
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    //页面加载事件
    $(function(){
    //点击隐藏
    $("#btn1").click(function(){
      $("#dv").slideUp();//滑入
     });
    $("#btn2").click(function(){
      $("#dv").slideDown();//滑入
     });
    });
    3> fadeIn()，fadeOut()，fadeToggle() 淡入，淡出，切换

    自定义动画
    jquery复习1

    × 心意领了
    打赏二维码
  • 相关阅读:
    JDBC
    uml 和 unified process
    关于N9手机第三种交互方式的思考和再设计
    [jQuery插件] jQuery Color Animations颜色动画插件
    Azul发布开源工具jHiccup，为Java提供运行时响应时间分析
    行内元素verticalalign:middle在html5和xhtml1.0及以下版本中的表现差异
    使用maven进行scala项目的构建
    计划FM为人人网提供首个开源Ruby SDK
    Chrome扩展：Run Selected HTML
    Team Foundation Service更新：改善了导航和项目状态速查功能
  • 原文地址：https://www.cnblogs.com/lijianming180/p/12410128.html
Copyright © 2011-2022 走看看