1+X Web 前端等级考试知识点 | jQuery基础

其他 2020-10-26 11:11:48 阅读次数: 0

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>

标签选择器 实例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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>我是特立独行的bug</p>
<p>bug太招人讨厌了</p>
<p>快乐码字不秃头</p>
</body>
</html>

类选择器 实例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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">这是一个span</span>
<p class="cls">这是一个p</p>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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>

多条件选择器 实例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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>

层次选择器 实例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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>

隔行变色案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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>李子2</li>
    <li>李李2</li>
    <li>老李2</li>
    <li>华园李2</li>
    <li>小李2</li>
</ul>

</body>
</html>

索引选择器:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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>李子2</li>
    <li>李李2</li>
    <li>老李2</li>
    <li>华园李2</li>
    <li>小李2</li>
</ul>

</body>
</html>
jQuery中常见的方法
  • .html()方法,设置标签中间显示其他标签及内容,类似于innerHTML
  • .text()方法,设置标签中间显示的文本内容,类似于innerText
  • .val()方法.设置input标签中value的值,类似于value
  • .css()方法,.设置元素的样式,类似于style
jQuery中css样式操作
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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();切换元素的类样式的

实例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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();获取的是当前元素的所有的兄弟元素(自己除外)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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(): 透明度变化
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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(“标签的代码”);
    实例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
    </script>
    <script src="jquery-1.12.2.js"></script>
    <script>

        //需求:点击按钮,在div中创建一个超链接
        $(function () {
     
     
            var i=0;
            $("#btn").click(function () {
     
     
                i++;
                //创建元素
                var aObj=$("<a href='http://www.baidu.com'>百度"+i+"</a>");
                //把元素添加到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>

猜你喜欢

转载自blog.csdn.net/weixin_43853746/article/details/108916725
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
curl的POST请求，封装方法
8.1.1. Integer Types
Java基础 Day05(个人复习整理)
Python - Django - 中间件 process_exception
小L的试卷
【Shell编程】 （函数）判断用户是否存在
python(css样式)
spring ant path 匹配原则 - 【笔记】
《JavaScript与JScript从入门到精通》(美)James.Jaworski.中译本.扫描版.pdf
Eclipse运行带参数的java程序
每日归档
更多
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022