1+X Web 前端开发考证 | 详解jQuery基础

jQuery是web前端初级考试的一个必考知识?虽然jQuery有点老,但是jQuery还是有他的作用的:

  1. JavaScript框架库:就是一个普通的js文件,封装了很多的函数,封装了很多兼容的代码
  2. jQuery是JavaScript框架库中的一种
  3. jQuery的好处:写的少,做的多,链式编程,隐式迭代等…
  4. jQuery可以解决js兼容的问题

体验 jQuery

例如我们要做一个页面加载事件,用javascript实现如下

    <script>
       window.onload=function () {
     
           document.getElementById("btn").onclick=function () {
     
               var divObj=document.getElementById("dv");
               divObj.style.width="200px";
               divObj.style.height="100px";
               divObj.style.backgroundColor="red";
           } ;
       };
    </script>

而用jQuery只需下面简单一行就可以实现:

    <script src="jquery-1.12.2.js"></script>
    <script>
        //页面加载后的一个事件
        $(function () {
     
            $("#btn").click(function () {
     
                $("#dv").css({
     "width":"200px","height":"100px","backgroundColor":"green"});
            });
        });
    </script>

jQuery中的顶级对象

  • DOM中的顶级对象:docuemnt—页面中的顶级对象(docuemnt点出来的是DOM中的属性和方法)
  • BOM中的顶级对象:window----浏览器中的顶级对象(window点出来的是浏览器中的属性和方法)
  • jQuery的顶级对象:jQuery----$
  • $点出来的是jQuery中的方法

页面的加载事件

// 用js:
  window.onload=function () {
     
     console.log("hello,特立独行的鱼儿");
  };
  
// 用jq:
  $(window).load(function () {
     
      console.log("hello,特立独行的鱼儿");
   });

DOM对象和jQuery对象实现互转

  • DOM对象转---->jQuery对象: $(DOM的对象)----->jQuery对象
  • jQuery对象---->DOM对象: 1. $(“DOM对象”)[0]---->DOM对象; 2. $(“DOM对象”).get(0)—DOM对象

jQuery中的选择器 (重要)

DOM中获取元素的方式:
  • document.getElementById(“id的值”);根据id获取元素,一个
  • document.getElementsByTagName(“标签的名字”);根据标签的名字获取元素,多个
  • document.getElementsByName(“name属性的值”);根据name属性的值获取元素,多个
  • document.getElementsByClassName(“类样式的名字”);根据的是类样式的名字来获取元素,多个
jQuery获取元素的方式:通过各种选择器来获取元素
  • 根据id来获取—>id选择器 ---->$("#id的值");一个
  • 根据标签的名字来获取—标签选择器—>$(“标签的名字”);多个
  • 根据类样式的名字获取—>类选择器—>$(".类样式的名字");多个

id选择器 实例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
     
            width: 300px;
            height: 200px;
            background-color: yellow;
        }
    </style>
    <script src="jquery-1.12.2.js"></script>
    <script>
        //点击按钮,设置层中的显示内容为:这是一个层,同时设置这个层的背景颜色(id选择器)
        //页面加载的事件
        $(function () {
     
            //获取按钮--根据id选择器获取,调用点击事件的方法
            $("#btn").click(function () {
     
                //设置div中的显示内容
                $("#dv").text("这是一个有颜色的div");//相当于DOM中的innerText或者是textContent
                $("#dv").css("backgroundColor","yellow");//设置元素的样式
            });
        });

    </script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv"></div>
</body>
</html>

标签选择器 实例:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="jquery-1.12.2.js">script>
    <script>

        //点击按钮,设置多个p标签中显示内容为:我是特立独行的鱼儿(标签选择器)
        //页面的加载事件
        $(function () {
      
            //获取按钮,调用点击事件,获取所有的p,设置内容
            $("#btn").click(function () {
      
                //获取所有的p--->标签选择器
                $("p").text("我是特立独行的鱼儿");
            });
        });
    script>
head>
<body>
<input type="button" value="设置内容" id="btn"/>
<p>我是特立独行的鱼儿p>
<p>我是特立独行的李子p>
<p>我是特立独行的bugp>
<p>bug太招人讨厌了p>
<p>快乐码字不秃头p>
body>
html>

类选择器 实例:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        .cls{
      
            background-color: pink;
        }
    style>
    <script src="jquery-1.12.2.js">script>
    <script>
        //点击按钮,设置页面上应用cls类样式的元素的背景颜色(类选择器)
        //页面加载的事件
        $(function () {
      
            //获取按钮,调用点击事件,获取所有应用了cls类样式的元素
            $("#btn").click(function () {
      
                //类选择器来获取元素
                $(".cls").css("backgroundColor","red");
            });
        });
    script>
head>
<body>
<input type="button" value="显示效果" id="btn"/>
<span class="cls">这是一个spanspan>
<p class="cls">这是一个pp>
body>
html>

标签+类样式的选择器 实例:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        .list{
      
            background-color: red;
        }
    style>
    <script src="jquery-1.12.2.js">script>
    <script>
        //点击按钮设置页面上应用cls类样式li标签的背景颜色
    //页面加载的事件
        $(function () {
      
            //获取按钮,注册点击事件
            $("#btn").click(function () {
      
                //获取应用cls类样式的li标签
                //标签+类样式的选择器
                $("li.list").css("backgroundColor","yellow");
            });
        });
    script>
head>
<body>
<input type="button" value="设置样式" id="btn"/>
<ul>
    <li class="list">李子li>
    <li>李李li>
    <li>老李li>
    <li class="list">华园李li>
    <li>小李li>
ul>
body>
html>

多条件选择器 实例:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        div{
      
            width: 200px;
            height: 100px;
            background-color: blue;
        }
    style>
    <script src="jquery-1.12.2.js">script>
    <script>

        //点击按钮,设置页面中的span标签,li标签,div标签的背景颜色
        $(function () {
      
            //通过多条件选择器获取元素,统一设置背景颜色
            $("#btn").click(function () {
      
                $("span,p,li,div").css("backgroundColor","yellow");
            });
        });
    script>
head>
<body>
<input type="button" value="显示效果" id="btn"/>
<span>这是一个span标签span>
<p>我是李子p>
<ul>
    <li>李子li>
    <li>李李li>
    <li>老李li>
    <li>华园李li>
    <li>小李li>
ul>
<div>div>
body>
html>

层次选择器 实例:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="jquery-1.12.2.js">script>
    <script>
        $(function () {
      
            //获取div中的相关元素
            $("#btn").click(function () {
      
                //获取的是div中所有的p标签元素
                //$("#dv p").css("backgroundColor","red");
                
                //获取的是div中直接的子元素
                //$("#dv>p").css("backgroundColor","red");
                
                //获取的是div后面的第一个p标签元素
                //$("#dv+p").css("backgroundColor","red");
                
                //获取的是div后面所有直接的兄弟元素p标签元素
                //$("#dv~p").css("backgroundColor","red");
            });
        });
    script>
head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv">
    <p>这是div中的第一个p标签p>
    <ul>
        <li>这是第一个li标签li>
        <li><p>这是第二个li中的一个p标签p>li>
        <li>这是第三个li标签li>
    ul>
    <p>这是div中的第二个p标签p>
div>
<p>这是div后面的第一个p标签p>
<p>这是div后面的第二个p标签p>
<p>这是div后面的第三个p标签p>
body>
html>

隔行变色案例:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        ul{
      
            list-style-type: none;
            width: 200px;
            position: absolute;
            left: 500px;
        }
        ul li{
      
            margin-top: 10px;
            cursor: pointer;
            text-align: center;
            font-size: 20px;

        }
    style>
    <script src="jquery-1.12.2.js">script>
    <script>
        $(function () {
      
            $("#btn").click(function () {
      
                //偶数的li
                $("#myname>li:even").css("backgroundColor","yellow");//偶数的li
                $("#myname>li:odd").css("backgroundColor","red");//奇数的li
            });
        });
    script>
head>
<body>
<input type="button" value="隔行变色" id="btn"/>
<ul id="myname">
    <li>李子li>
    <li>李李li>
    <li>老李li>
    <li>华园李li>
    <li>小李li>
    <li>李子2li>
    <li>李李2li>
    <li>老李2li>
    <li>华园李2li>
    <li>小李2li>
ul>

body>
html>

索引选择器:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        ul{
      
            list-style-type: none;
            width: 200px;
            position: absolute;
            left: 500px;
        }
        ul li{
      
            margin-top: 10px;
            cursor: pointer;
            text-align: center;
            font-size: 20px;

        }
    style>
    <script src="jquery-1.12.2.js">script>
    <script>
        $(function () {
      
            $("#btn").click(function () {
      
                //获取ul中的索引为4的li标签元素
                //$("#myname>li:eq(4)").css("backgroundColor","red");
                
                //获取ul中的索引大于4的所有的li标签元素
                //$("#myname>li:gt(4)").css("backgroundColor","red");
                
                //获取ul中的索引小于4的所有的li标签元素
                //$("#myname>li:lt(4)").css("backgroundColor","red");
            });
        });
    script>
head>
<body>
<input type="button" value="隔行变色" id="btn"/>
<ul id="myname">
    <li>李子li>
    <li>李李li>
    <li>老李li>
    <li>华园李li>
    <li>小李li>
    <li>李子2li>
    <li>李李2li>
    <li>老李2li>
    <li>华园李2li>
    <li>小李2li>
ul>

body>
html>
jQuery中常见的方法
  • .html()方法,设置标签中间显示其他标签及内容,类似于innerHTML
  • .text()方法,设置标签中间显示的文本内容,类似于innerText
  • .val()方法.设置input标签中value的值,类似于value
  • .css()方法,.设置元素的样式,类似于style
jQuery中css样式操作

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="jquery-1.12.2.js">script>
    <script>
        //页面加载
        $(function () {
      
            $("#btn").click(function () {
      
                // 第一种设置元素样式的代码方式:
                $("ul>li").css("backgroundColor","yellow");
                $("ul>li").css("fontSize","50px");
                $("ul>li").css("fontFamily","全新硬笔行书简");
                $("ul>li").css("color","blue");
                
                //第二种设置元素样式的代码方式:链式编程
                $("ul>li").css("backgroundColor","yellow").css("fontSize","50px").css("fontFamily","全新硬笔行书简").css("color","blue");
                
                //第三种设置元素样式的代码方式:键值对
                $("ul>li").css({
      "backgroundColor":"yellow","fontSize":"50px","fontFamily":"全新硬笔行书简","color":"blue"});
            });
        });
    script>
head>
<body>
<input type="button" value="显示效果" id="btn"/>
<ul>
    <li>李子li>
    <li>李李li>
    <li>老李li>
    <li>华园李li>
    <li>小李li>
ul>
body>
html>
jQuery中操作类样式
.css()
  • .css(“属性”,“属性值”);
  • .css(“属性”,“属性值”).css(“属性”,“属性值”);
  • .css({“属性”:“属性值”,“属性”:“属性值”});
addClass()
  • addClass(“类样式名字”);添加一个类样式
  • addClass(“类样式名字1 类样式名字2”);
  • removeClass()
  • removeClass(“类样式名字”);移除类样式
  • removeClass();移除的是当前元素中所有的类样式
  • hasClass();判断当前元素是否应用了某个类样式
  • toggleClass();切换元素的类样式的

实例:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        div{
      
            width: 200px;
            height: 100px;
            background-color: red;
        }
        .cls{
      
            background-color: green;
        }
        .cls2{
      
            border: 3px solid yellow;
        }
    style>
    <script src="jquery-1.12.2.js">script>
    <script>
        $(function () {
      
            //获取按钮,点击按钮,为div添加一个类样式
            $("#btn").click(function () {
      
                //$("#dv").addClass("cls");//在addClass方法中类样式的名字前面没有点(.)
                //$("#dv").addClass("cls").addClass("cls2");
                //另一种写法,addClass添加样式的时候.多个类样式的名字中间用空格隔开
                $("#dv").addClass("cls cls2");
            });

            $("#btn2").click(function () {
      
                //移除一个元素的类样式
                //$("#dv").removeClass("cls");
                //移除div的所有的类样式,removeClass方法中什么也不写移除的是当前元素的所有的类样式
                $("#dv").removeClass();
            });
               //点击第三个按钮查询这个div是否应用了cls类样式
            $("#btn3").click(function () {
      
                var result=$("#dv").hasClass("cls");
                console.log(result);
            });
        });
    script>
head>
<body>
<input type="button" value="显示效果" id="btn" />
<input type="button" value="移除类样式" id="btn2" />
<input type="button" value="检测元素是否应用了类样式" id="btn3"/>
<div id="dv">div>
body>
html>
jQuery中获取兄弟元素
  • .next();获取的是当前元素的下一个兄弟元素
  • .nextAll();获取的是当前元素的后面的所有的兄弟元素
  • .prev();获取的是当前元素的前一个兄弟元素
  • .prevAll();获取的是当前元素的前面的所有的兄弟元素
  • .siblings();获取的是当前元素的所有的兄弟元素(自己除外)

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="jquery-1.12.2.min.js">script>
    <script>
        $(function () {
      
            //获取ul中所有的li,为每个li注册鼠标进入的事件,当前元素获取到,对当前元素的兄弟元素进行操作
            $("#uu>li").mouseenter(function () {
      
                //.next();获取的是当前元素的下一个兄弟元素
                //$(this).next().css("backgroundColor","green");
                
                //.nextAll();获取的是当前元素的后面的所有的兄弟元素
                //$(this).nextAll().css("backgroundColor","green");
                
                //.prev();获取的是当前元素的前一个兄弟元素
                //$(this).prev().css("backgroundColor","green");
                
                //.prevAll();获取的是当前元素的前面的所有的兄弟元素
                //$(this).prevAll().css("backgroundColor","green");
                
                //.siblings();获取的是当前元素的所有的兄弟元素(自己除外)
                $(this).siblings().css("backgroundColor","green");
            });
        });
    script>
head>
<body>
<ul id="uu">
    <li>李子li>
    <li>李李li>
    <li>老李li>
    <li>华园李li>
    <li>小李li>
ul>
body>
html>
jQuery中常见动画方法
  • .hide(): 隐藏
    hide方法中可以写参数:
    参数类型:
  1. 数字类型:1000表示的是毫秒 —1秒
  2. 字符串类型: “slow” “normal” “fast”
  • .show(): 显示(参数同上)
  • slideUp(): 滑入(参数同上)
  • slideDown(): 滑出(参数同上)
  • slideToggle(): 切换(参数同上)
  • fadeIn(): 淡入
  • fadeOut(): 淡出
  • fadeToggle(): 切换
  • fadeTo(): 透明度变化

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        div{
      
            width: 200px;
            height: 100px;
            background-color: green;
        }
    style>
    <script src="jquery-1.12.2.js">script>
    <script>
        $(function () {
      
            //点击按钮 隐藏div
            $("#btnHide").click(function () {
      
                //$("#dv").hide();//隐藏
                //hide方法中可以写参数:参数类型:1.数字类型,2字符串类型
                //1数字类型:1000表示的是毫秒  ---1秒
                //2字符串类型: "slow"  "normal"  "fast"
                $("#dv").hide(1000);
                //$("#dv").hide("normal");
            });
            $("#btnShow").click(function () {
      
                //$("#dv").show(1000);
                $("#dv").show("fast");
            });
            $("#btn1").click(function () {
      
                $("#dv").slideUp(1000);
            });
            $("#btn2").click(function () {
      
                $("#dv").slideDown(1000);
            });
            $("#btn3").click(function () {
      
                $("#dv").slideToggle(1000);
            });
             $("#btn4").click(function () {
      
                //一秒钟 透明度达到0.3
                $("#dv").fadeTo(1000,0);
            });
        });
    script>
head>
<body>
<input type="button" value="隐藏" id="btnHide"/>
<input type="button" value="显示" id="btnShow"/>
<input type="button" value="滑入" id="btn1"/>
<input type="button" value="滑出" id="btn2"/>
<input type="button" value="切换" id="btn3"/>
<input type="button" value="透明度变化" id="btn3"/>
<div id="dv">div>
body>
html>
jQuery中创建动态元素

jQuery中创建元素的方式:

  • .$(“标签的代码”)
  • .对象.html(“标签的代码”);
    实例:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script>
    script>
    <script src="jquery-1.12.2.js">script>
    <script>

        //需求:点击按钮,在div中创建一个超链接
        $(function () {
      
            var i=0;
            $("#btn").click(function () {
      
                i++;
                //创建元素
                var aObj=$("百度"+i+"");
                //把元素添加到div中
               // $("#dv").append(aObj);//把超链接追加到div中

                //把元素插入到某个元素的前面
                //$("#dv").prepend(aObj);
                
                //把元素添加到当前元素的后面(兄弟元素来添加)
                //$("#dv").after(aObj);
                
                //把元素添加到当前元素的前面(兄弟元素来添加)
                //$("#dv").before(aObj);

            });
        });
    script>
head>
<body>
<input type="button" value="创建元素" id="btn"/>
<div id="dv">div>
body>
html>

考点知识回顾:
一. 1+X Web前端中级必考 | PHP 技术与应用
二. 1+X Web前端等级考证 | 详解jQuery基础
三. 1+X Web前端等级考证 | 深入浅出MySQL数据库
四. 1+X Web前端等级考证 | Web中级12月最新模拟题


1+X Web前端等级考证 | 2020 12月Web前端开发中级理论 (试卷2) 附答案
1+X Web前端等级考证 | 2020 12月Web前端开发中级实操 (试卷2) 附答案
1+X Web前端等级考证 | 2020 12月Web前端开发中级实操 (试卷3) 附答案
1+X Web前端等级考证 | 2020 12月Web前端开发中级理论 (试卷3) 附答案
1+X Web前端等级考证 | 2020 12月Web前端开发中级实操 (试卷4) 附答案
1+X Web前端等级考证 | 2020 12月Web前端开发中级理论 (试卷4) 附答案
1+X Web前端等级考证 | 2020 12月Web前端开发中级实操 (试卷5) 附答案
1+X Web前端等级考证 | 2020 12月Web前端开发中级理论 (试卷5) 附答案

有时间会持续更新关于1+X 方面的~~

你可能感兴趣的:(前端,1+X,1+x前端等级考试)