jQuery

最新推荐文章于 2024-08-17 12:54:01 发布

LikY03321

最新推荐文章于 2024-08-17 12:54:01 发布

阅读量62

点赞数

文章标签： jquery javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/LikY03321/article/details/128808746

版权

jQuery简介

jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。目前超过90%的网站都使用了jQuery库，jQuery的宗旨：写的更少，做得更多！

jQuery特点

1、轻量级

2、强大选择器

3、隐式遍历

4、读写合一

5、链式调用

6、事件处理

7、DOM操作

8、样式操作

9、动画

10、浏览器兼容

11、丰富的插件支持

jQuery三步骤

1、引入jQuery

2、入口函数

3、功能实现

jQuery入口函数与js入口函数的对比：

JavaScript的入口函数要等页面中所有资源加载完成才能执行。

jQuery只需要文档加载完成就可以执行，并不需要等待图片、文件的加载。

jQuery引入方式

本地引入：将jQuery下载下来，然后导入项目中，使用script标签进行引用

<head>
    <script src="jquery-1.9.1.min.js"></script>
</head>

CDN引入：使用远程CDN资源库在线引入，避免了文件下载

<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

jQuery快速使用

<body>
   <button id="btn">按钮</button>
   <div></div>
</body>
<script>
   $(function(){
    $("#btn").click(function(){
        $("div").text("欢迎")
    });
   });
</script>

jQuery对象与DOM对象之间的转换

DOM对象转换为jQuery对象：

对于已知的DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。

<input type="text" id="username" name="username" value="123"/>
<script>
        var username=document.getElementById("username");
        alert(username.value);
        //转jQuery对象
        $username=$(username);
        alert($username.val());
    </script>

jQuery对象转换为DOM对象：

jQuery本身提供，通过。get(index)方法，得到相应的DOM。

<input type="text" id="username" name="username" value="123"/>
    <button id="btn">按钮</button>
    <div></div>
    <script>
        var username=document.getElementById("username");
        //把jQuery转换成dom对象
        var username1=$username.get(0);
        alert(username1.value);
    </script>

选择器

基本选择器

名称	用法	描述
id选择器	$("#id")	获取指定id的元素
类选择器	$(".class")	获取同一类class的元素
标签选择器	$("div')	获取相同标签名的所有元素
并集选择器	$("div,p,li")	选取多个元素
交集选择器	$("li.current")	交集元素

id选择器

<button id="btn">按钮2</button>
$('#btn').css('background', 'red');

类选择器

<body>
<p class="red">我是段落1</p>
<p>我是段落2</p>
<p class="red">我是段落3</p>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
    $('.red').css('background', 'red');
</script>

标签选择器

<body>
<div>我是div1</div>
<div>我是div2</div>
<div>我是div3</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
    $('div').css('background', 'red');
</script>

并集选择器·

<body>
<p>我是段落</p>
<button>我是按钮</button>
<div>我是div</div>
<h1>我是大标题</h1>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
   $('p,button').css('background', 'red');
</script>

交集选择器

<body>
<p class="red">我是段落1</p>
<p class="red">我是段落2</p>
<p class="red">我是段落3</p>
<div class="red">我是div1</div>
<div class="red">我是div2</div>
<div class="red">我是div3</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
  $('p.red').css('background', 'red');
</script>

层级选择器

名称	用法	描述
子代选择器	$("ul>li")	$("ul>li")子代选择器获取子级元素（亲生关系）
后代选择器	$("ul li")	$("ul li")后代选择器获取后级元素（有血缘关系）

子代选择器

<body>
<ul>
    <span>我是ul的span1</span>
    <li>我是li1 <span>我是li1的span1</span></li>
    <li>我是li2 <span>我是li2的span2</span></li>
    <li>我是li3 <span>我是li3的span3</span></li>
    <span>我是ul的span2</span>
</ul>

</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
 $('ul>span').css('background', 'red');
</script>

后代选择器

<body>
<ul>
    <span>我是ul的span1</span>
    <li>我是li1 <span>我是li1的span1</span></li>
    <li>我是li2 <span>我是li2的span2</span></li>
    <li>我是li3 <span>我是li3的span3</span></li>
    <span>我是ul的span2</span>
</ul>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$('ul span').css('background', 'red');
</script>

过滤选择器

名称	用法	描述
:first	$("li:first")	$("li:first")获取第一个i元素
:last	$("li:last")	$("li:las")获取最后一个Ii元素
:eq(index)	$("li:eq(2)")	$("li:eq(2)")获取Ii元素，选择索引为2的元麦
:odd	$("li:odd")	$("i:odd")获取i元素，选择索引为奇数的元素
:even	$("li:even")	$("i:even")获取Ii元素，选择索引为偶数的元素

<body>
    <ul>
        <li>黑猫警长</li>
        <li>葫芦娃</li>
        <li>苏克贝塔</li>
        <li>巴啦啦小魔仙</li>
        <li>铠甲勇士</li>
        <li>洛洛历险记</li>
        <li>弹珠传说</li>
    </ul>
    <script>
        $(function(){
            $("li:eq(2)").css("background","red");
            $("li:odd").css("background","blue");
            $("li:even").css("background","green");
            $("li:gt(4)").css("background","yellow");
        });
    </script>
</body>

基本属性选择器

<body>
    <button id="btn1">所有含class的标签</button>
    <button id="btn2">所有含class是box1的标签</button>
    <button id="btn3">所有class不是box1的标签</button>
    <button id="btn4">所有class以b开始的标签</button>
    <button id="btn5">所有class包含o的标签</button>
    <br />
    <div>div标签</div>
    <div class="box1">box1</div>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="pox1">pox1</div>
    <div class="pox2">pox2</div>

    <script>
        $(function(){
            $("#btn1").click(function(){
                $("div[class]").css("background","red");
            });
            $("#btn2").click(function(){
                $("[class=box1]").css("background","red");
            });
            $("#btn3").click(function(){
                $("div[class!=box1]").css("background","red");
            });
            $("#btn4").click(function(){
                $("div[class^=b]").css("background","red");
            });
            $("#btn5").click(function(){
                $("div[class*=o]").css("background","red");
            });
        })
    </script>
</body>

筛选选择器

<body>
    <div style="display: none;">隐藏</div>
    <div>显示</div>
    <button id="btn1">显示隐藏的内容</button>
    <button id="btn2">隐藏显示的内容</button>

    <script>
        $(function(){
            $("#btn1").click(function(){
                $("div:hidden").show();
            });
            $("#btn2").click(function(){
                $("div:visible").hide();
            });
        });
    </script>
</body>

LikY03321

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery

jQuery简介jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。目前超过90%的网站都使用了jQuery库，jQuery的宗旨：写的更少，做得更多！jQuery特点1、轻量级2、强大选择器3、隐式遍历4、读写合一5、链式调用6、事件处理7、DOM操作8、样式操作9、动画10、浏览器兼容11、丰富的插件支持jQuery三步骤。
复制链接

扫一扫