JQuery

W3C标准给我们提供了一系列函数,让我们可以操作:

网页内容

网页结构

网页样式

但是原生的JavaScript提供的API操作DOM元素时,代码比较繁琐,冗长.我们学习使用JQuery来操作页面对象.
 

JQuery是一个快速,简洁且功能丰富的JavaScript框架,于2006年发布.它封装JavaScript常用的功能代码,提供了简洁而强大的选择器和DOM方法.使用JQuery可以轻松地选择和操作HTML元素,从而减少了开发人员编写的代码量,从而提高了开发效率,它提供的API易于使用且兼容众多浏览器,这让诸如HTML文档的遍历和操作,事件处理,动画和ajax操作更加简单.JQuery对于事件处理也进行了简化,提供了一个简单的API来绑定,触发和处理事件,使开发人员能够更方便地处理各种交互行为. 

引入依赖

使用JQuery需要先引入对应的库.

在使用JQuery CDN时,只需要在HTML文档中加入如下代码:

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

其中,src指明了JQuery库所在的url,这个url是CDN(内容分发网络)服务提供商为JQuery库提供的一个统一资源定位符. 也可以使用其它公司提供的CDN网址.

JQuery语法

jQuery语法是通过选取HTML元素,并对选取的元素执行某些操作.

基础语法

$(selector).action()

$()是一个函数,它是JQuery提供的一个全局函数,用于选择和操作HTML元素.

Selector选择器,用来"查询"和"查找"HTML元素.

action操作,执行对元素的操作.

JQuery的代码通常都写在document ready函数中.

document:整个文档对象,一个页面就是一个文档对象,使用document表示. 

这是为了防止文档在完全加载(就绪)之前运行jQuery代码,即在文档加载完成后才可以对页面进行操作. (如果文档没有完全加载之前就运行函数,操作可能失败).

$(document).ready(function(){
    //jQuery functions go here
}); 

示例:

<button type="button">点我消失</button>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $(this).hide();
        });
    });
</script>

给按钮添加了click事件,点击后元素消失.

简洁写法:

$(function(){
    //jQuery functions go here.
});

JQuery选择器

我们通过JQuery选择器来选择一些HTML元素.然后对元素进行操作.

JQuery选择器基于已经存在的CSS选择器,除此之外,还有一些自定义的选择器.

 jQuery中所有选择器都以 $ 开头:$().

语法	描述
$("*")	选取所有元素
$(this)	选取当前HTML元素
$("p")	所有<p>元素
$("p:first")	选取第一个<p>元素
$("p:last")	最后一个<p>元素
$(".box")	所有class="box"的元素
$("#box")	id="box"的元素
$(".intro .demo")	所有class="intro"且class="demo"的元素
$("p.intro")	选取class=intro的<p>元素
$("ul li:first")	选取<ul>元素的第一个<li>元素
$(":input元素")	所有<input>元素
$(":text")	所有type="text"的<input>元素
$(":checkbox")	所有type="checkbox"的<input>元素

JQuery事件

JS要构建动态页面,就需要感知到用户的行为.

用户对于页面的一些操作(点击,选择,修改等)操作都会在浏览器中产生一个个事件,被JS获取到,从而进行更复杂的交互操作.

浏览器就是一个哨兵,在侦察敌情(用户行为).一旦用户有反应(触发具体动作),哨兵就会点燃烽火台的狼烟(事件),后方就可以根据狼烟来决定下一步的对敌策略. 

事件由三部分组成:

1.事件源:哪个元素触发的?

2.事件类型:是点击,选中,还是修改?

3.事件处理程序:进一步如何处理.往往是一个回调函数. 

例如:某个元素的点击事件:

$("p").click(function(){
    //动作发生后的代码
})

常见的事件有:

事件	代码
文档就绪事件(完成加载)	$(document).ready(function)
点击事件	$(selector).click(function)
双击事件	$(selector).dbclick(function)
元素的值发生改变	$(selector).change(function)
鼠标悬停事件	$(selector).mouseover(function)

操作元素

获取/设置元素内容

三个简单的获取元素内容的JQuery方法.

JQuery方法	说明
text()	设置或返回所选元素的文本内容
html()	设置或返回所选元素的内容(包括HTML标签)
val()	设置或返回表单字段的值

这三个方法即可以获取元素的内容,又可以设置元素的内容.

有参数时,就进行元素的值设置,没有参数时,就进行元素内容的获取.

代码示例:

获取元素内容:

<div id="test"><span>你好</span></div>
<input type="text" value="hello">

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script>
        $(document).ready(function() {
            var html = $("#test").html();
            console.log("html内容为:"+html);

            var text = $("#test").text();
            console.log("文本内容为:"+text);

            var inputVal = $("input").val();
            console.log(inputVal);
        });
    </script>

设置元素内容:

    <div id="test"></div>
    <div id="test2"></div>
    <input type="text" value="">
    <script>
        $(document).ready(function() {
            $("#test").html('<h1>设置html</h1>');
            $("#test2").text('<h1>设置text</h1>');
            $("input").val("设置内容");
        });
    </script>

获取/设置元素属性

JQuery attr()方法用于获取属性值.

代码示例

获取元素属性

    <p><a href="https://www.baidu.com/" id="baidu">百度搜索</a></p>

    <script>
        $(function(){
            var href = $("p a").attr("href");
            console.log(href);
        });
    </script>

设置元素属性

    <p><a href="https://www.baidu.com/" id="baidu">百度搜索</a></p>

    <script>
        $(function(){
            $("p a").attr("href", "https://www.taobao.com/");
            console.log($("p a").attr("href"));
        });
    </script>

 获取/返回CSS属性

css()方法设置或返回被选元素的一个或多个样式属性.

代码示例

获取元素属性

    <div style="font-size: 36px;">我是一个文本</div>
    <script>
        $(function(){
            var fontSize = $("div").css("font-size");
            console.log(fontSize);
        });
    </script>

设置元素属性

    <div style="font-size: 36px;">我是一个文本</div>
    <script>
        $(function(){
            $("div").css("font-size", "24px");
        });
    </script>

添加元素

添加HTML内容

1.append():在被选元素的结尾插入内容

2.prepend():在被选元素的开头插入内容

3.after():在被选元素之后插入内容

4.before():在被选元素之前插入内容

代码示例:

    <ol>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ol>
    <img src="C:\Users\86133\Desktop\文章\课件\html\78383f3dgy1hkcbcvjkxgj20rz0rztc2.jpg">
    <script>
        $(function(){
            $("ol").append("<li>append</li>");
            $("ol").prepend("<li>prepend</li>");

            $("img").before("在图片前插入");
            $("img").after("在图片后插入");
        });
    </script>

运行结果:

 

删除元素

删除元素和内容,一般使用以下两个jQuery方法:

1.remove():删除被选元素(及其子元素)

2.empty():删除被选元素的子元素.

代码示例:

    <div id="div1">我是一个div</div>
    <button>删除div元素</button>
    <script>
        $(function(){
            $('button').click(function() {
                $('#div1').remove();
            });
        });
    </script>

删除被选元素的子元素

 

    <ol>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ol>
    <button>删除列表元素</button>
    <script>
        $(function(){
            $('button').click(function(){
                $('ol').empty();
            });
        });
    </script>