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

× 心意领了
打赏二维码
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/lijianming180/p/12410128.html