八、JQuery

柴赞

2023-12-01

8.1 jQuery的介绍

1. jQuery的定义

jQuery是对JavaScript的封装，它是免费、开源的JavaScript函数库，jQuery 极大地简化了 JavaScript 编程。

2. jQuery的作用

jQuery和JavaScript它们的作用一样，都是负责网页行为操作，增加网页和用户的交互效果的，只不过jQuery简化了JavaScript编程，jQuery实现交互效果更简单。

3. jQuery的优点

jQuery兼容了现在主流的浏览器，增加了程序员的开发效率。
jQuery简化了 JavaScript 编程，代码编写更加简单。

4. 小结

jQuery是一个免费、开源的JavaScript函数库
jQuery的作用和JavaScript一样，都是负责网页和用户的交互效果。
jQuery的优点就是兼容主流浏览器，代码编写更加简单。

8.2 jQuery的用法

1. jQuery的引入

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

2. jQuery的入口函数

我们知道使用js获取标签元素，需要页面加载完成以后再获取，我们通过给onload事件属性设置了一个函数来获取标签元素，而jquery提供了ready函数来解决这个问题，保证获取标签元素没有问题，它的速度比原生的 window.onload 更快。

3. 小结

引入jQuery
获取标签元素需要在入口函数来完成，它的速度比原生的 window.onload 更快

jQuery入口函数有两种写法:

  // 完整写法
  $(document).ready(function(){
       ...
  });

  // 简化写法
  $(function(){
       ...
  });

8.3 jQuery选择器

1. jQuery选择器的介绍

jquery选择器就是快速选择标签元素，获取标签的，选择规则和css样式一样。

2. jQuery选择器的种类

标签选择器
类选择器
id选择器
层级选择器
属性选择器

    <script>
        $(function(){
            // 获取标签对象
            var $p = $("p")
            alert($p.length)

            var $div = $(".div1")
            alert($div.length)

            var $div1 = $("#box1")
            alert($div1.length)

            var $h1 = $("div h1")
            alert($h1.length)
            // 属性选择器
            var $input = $("input[type = text]")
            alert($input.length)

            // jquery与css选择器匹配标签的方式一样
        })
    </script>

说明:
可以使用length属性来判断标签是否选择成功, 如果length大于0表示选择成功，否则选择失败。

3. 小结

jQuery选择器就是选择标签的
标签选择器是根据标签名来选择标签
类选择器是根据类名来选择标签
id选择器是根据id来选择标签
层级选择器是根据层级关系来选择标签
属性选择器是根据属性名来选择标签

8.4 选择集过滤

1. 选择集过滤的介绍

选择集过滤就是在选择标签的集合里面过滤自己需要的标签

2. 选择集过滤的操作

has(选择器名称)方法，表示选取包含指定选择器的标签
eq(索引)方法，表示选取指定索引的标签

示例代码：

    <script>
        $(function(){
            // 通过jquery选择器获取html标签
            var $divs = $("div")
            // 获取包含有指定选择器的父标签
            $divs.has(".pname").css({"background":"red"})
            // 根据下标选择指定的标签
            $divs.eq(1).css({"background":"blue"})

            // 选择集过滤，就是在选中的标签集合里面，去选择指定的标签
        })
        
    </script>


</head>
<body>
    <div>
        <p class="pname">哈哈</p>
    </div>
    <div>
        <input type="button" value="按钮">
    </div>
</body>

8.5 选择集转移

1. 选择集转移介绍

选择集转移就是以选择的标签为参照，然后获取转移后的标签

2. 选择集转移操作

$('#box').prev(); 表示选择id是box元素的上一个的同级元素
$('#box').prevAll(); 表示选择id是box元素的上面所有的同级元素
$('#box').next(); 表示选择id是box元素的下一个的同级元素
$('#box').nextAll(); 表示选择id是box元素的下面所有的同级元素
$('#box').parent(); 表示选择id是box元素的父元素
$('#box').children(); 表示选择id是box元素的所有子元素
$('#box').siblings(); 表示选择id是box元素的其它同级元素
$('#box').find('.myClass'); 表示选择id是box元素的class等于myClass的元素

选择集转移的示例代码:

    <script>
        $(function(){
            // 获取div标签并且作为参照物
            var $div = $("#box1")
            // 选择上一个同级标签
            $div.prev().css({"color":"red","font-size":"25px"})
            // 选择上面所有的同级标签
            $div.prevAll().css({"text-indent":"50px"})
            // 选择下一个同级标签
            $div.next().css({"color":"green"})
            // 选择下面所有的同级标签
            $div.nextAll().css({"text-indent":"50px"})
            // 选择同级的其他标签
            $div.siblings().css({"text-decoration":"underline"})
            // 选择儿父标签
            $div.parent().css({"background":"gray"})
            // 获取所有的子标签
            $div.children().css({"color":"red"})
            // 查找指定的子标签
            $div.find
            $div.find(".sp1").css({"color":"green"})

        })
    </script>
</head>
<body>
    <div>
        <h3>三级标题</h3>
        <p>哈哈</p>
        <div id="box1"><span>我是</span>一个<span class="sp1">div</span>标签</div>
        <h3>三级标题</h3>
        <p>哈哈</p>
    </div>
    
</body>

3. 小结

prev() 表示获取上一个同级元素
prevAll() 表示获取上面所有同级元素
next() 表示获取下一个同级元素
nextAll() 表示获取下面所有同级元素
parent() 表示获取父元素
children() 表示获取所有的子元素
siblings() 表示获取其它同级元素
find("选择器名称") 表示获取指定选择器的元素

8.6 获取和设置元素内容

1. html方法的使用

jquery中的html方法可以获取和设置标签的html内容

示例代码:

<script>
        $(function(){
            // 获取标签
            var $div = $("div")
            // jquery的方式获取标签内容
            alert($div.html())
            // 设置标签内容
            $div.html("<a href='https://www.baidu.com'>百度</a>")
            // 扩展：追加内容
            $div.append("<a href='https://www.baidu.com'>谷歌</a>")
        })

    </script>

</head>
<body>
    <div>哈哈</div>
</body>
</html>

说明:

给指定标签追加html内容使用append方法

2. 小结

获取和设置元素的内容使用: html方法
给指定元素追加html内容使用: append方法

8.7 获取和设置元素属性

1. prop方法的使用

之前使用css方法可以给标签设置样式属性，那么设置标签的其它属性可以使用prop方法了。

示例代码:

    <script>
        $(function(){
            // 获取标签
            var $p = $("p")
            var $text = $("#txt1")
            // alert($p)
            // 获取样式属性，比如：获取字体大小
            var $px = $p.css("font-size")
            alert($px)
            // 设置样式属性
            $p.css({"font-size":"30px","background":"green"})
            // 除了样式属性的相关操作使用css方法，其他属性的操作都是用prop方法

            // 获取属性
            var $name = $text.prop("name")
            alert($name)

            var $type = $text.prop("type")
            alert($type)

            // 设置属性
            // $text.prop({"value":"张三","class":"tname"})

            // 获取value属性可以使用val方法
            // alert($text.prop("value"))
            // 使用val方法获取value属性
            alert($text.val())
            // 使用val方法设置value属性
            $text.val("王五")


        })
    </script>

</head>
<body>
    <p>哈哈，我是一个段落标签</p>
    <input type="text" name="username" id="txt1" value="李四">
</body>
</html>

说明: 获取value属性和设置value属性还可以通过val方法来完成。

2. 小结

获取和设置元素属性的操作可以通过prop方法来完成
获取和设置元素的value属性可以通过val方法来完成，更加简单和方便

8.8 jQuery事件

1. 常用事件

click() 鼠标单击
blur() 元素失去焦点
focus() 元素获得焦点
mouseover() 鼠标进入（进入子元素也触发）
mouseout() 鼠标离开（离开子元素也触发）
ready() DOM加载完成

示例代码:

    <script>
        // 等页面加载完成以后获取标签元素
        // $(document).ready(function(){

        // })--与下面的等价，下边的是简化写法

        $(function(){
            // 获取ul中的所有标签
            var $lis = $("ul li")
            // 获取button标签
            var $btn = $("#btn1")
            // 获取text标签
            var $text = $("#txt1")
            // 获取div标签
            var $div = $("div")
            // 添加点击事件
            $lis.click(function(){
                // 获取当前点击的标签对象
                // 原生js写法
                // this.style.color = "red"

                // jquery写法
                $(this).css({"color":"red"})
                // 获取点击标签的索引
                alert($(this).index())

            });
            
            $btn.click(function(){
                // 获取文本框的内容
                alert($text.val())
            })

            // 给text文本框添加获取焦点事件
            $text.focus(function(){
                // 获取得到焦点的文本框，然后设置样式属性
                $(this).css({"background":"red"})
            })

            // 给text文本框添加失去焦点事件
            $text.blur(function(){
                $(this).css({"background":"white"})
            })

            // 给div设置鼠标悬停（进入）事件
            $div.mouseover(function(){
                $(this).css({"background":"green"})
            })
            // 给div设置鼠标离开事件
            $div.mouseout(function(){
                $(this).css({"background":"white"})
            })
        });
    </script>

</head>
<body>
    <div>
        <ul>
            <li>苹果</li>
            <li>鸭梨</li>
            <li>香蕉</li>
        </ul>
        <input type="text" id="txt1">
        <input type="button" id="btn1" value="你点我">
    </div>

</body>
</html>

说明:

this指的是当前发生事件的对象，但是它是一个原生js对象
$(this) 指的是当前发生事件的jquery对象

2. 小结

jQuery常用事件:

click() 鼠标单击
blur() 元素失去焦点
focus() 元素获得焦点
mouseover() 鼠标进入（进入子元素也触发）
mouseout() 鼠标离开（离开子元素也触发）
ready() DOM加载完成

8.9 事件代理

1. 事件代理介绍

事件代理就是利用事件冒泡的原理(事件冒泡就是事件会向它的父级一级一级传递),把事件加到父级上，通过判断事件来源，执行相应的子元素的操作，事件代理首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作

事件冒泡代码:

    <script>
        $(function(){
            var $btn = $("#btn1")
            var $div = $("div")
            $btn.click(function(){
                alert("我是按钮")
                // 扩展：取消事件冒泡，就是不让事件向父级控件传递
                // 默认是事件会进行冒泡
                return false
            })
            $div.click(function(){
                alert("我是div")
            })
        })
        
    </script>

</head>
<body>
    <div>
        <p id="p1">哈哈</p>
        <input type="button" value="按钮" id="btn1">
    </div>
</body>
</html>

说明:

当点击子元素div，它的点击事件会向它父元素传递，也会触发了父元素的点击事件，这就是事件冒泡

2. 事件代理的使用

示例代码：

    <script>
        $(function(){
            var $btn = $("#btn1")
            var $div = $("div")
            $btn.click(function(){
                alert("我是按钮")
                // 扩展：取消事件冒泡，就是不让事件向父级控件传递
                // 默认是事件会进行冒泡
                return false
            })
            // $div.click(function(){
            //     alert("我是div")
            // })
            // 通过事件代理让父控件代理子控件的事件，然后执行子控件的相关操作
            var $ul = $("div ul")
            $ul.delegate("li","click",function(){

                $(this).css({"color":"red"})
            })
            // 扩展：可以代理不同子控件的事件
            var $div1 = $("#box")
            $div1.delegate("#p2,#btn2","click",function(){
                alert("OK")
            })
        })
        
    </script>

</head>
<body>
    <div>
        <p id="p1">哈哈</p>
        <input type="button" value="按钮" id="btn1">
        <ul>
            <li>哈哈</li>
            <li>嘻嘻</li>
            <li>美滋滋</li>
            <li>啦啦</li>
        </ul>
    </div>

    <div id="box">
        <p id="p2">哈哈</p>
        <input type="button" value="按钮" id="btn2">
    </div>
</body>
</html>

delegate方法参数说明:

delegate(childSelector,event,function)

childSelector: 子元素的选择器
event: 事件名称，比如: 'click'
function: 当事件触发执行的函数

3. 小结

事件代理就是使用父元素来代理子元素的事件，好处是减少事件的绑定次数，提高性能。
使用场景当多个相同的子元素绑定同一个事件，可以使用事件代理。
事件代理使用是使用delegate方法来完成

8.10 JavaScript对象

1. JavaScript对象的介绍

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数等都可以认为是对象，此外，JavaScript 允许自定义对象，对象可以拥有属性和方法。

2. JavaScript创建对象操作

创建自定义javascript对象有两种方式:

通过顶级Object类型来实例化一个对象
通过对象字面量创建一个对象

示例代码:

    <script>
        // 自定义js对象有两种方式
        // 1.使用顶级类型Object创建自定义对象
        var oPerson = new Object()
        // 添加属性
        oPerson.name = "李四"
        oPerson.age = 20
        // 添加方法
        oPerson.show = function(){
            alert("我是一个好人")
        }
        // 通过对象获取属性和调用方法
        alert(oPerson.name)
        oPerson.show()

        // 2.使用字面量创建自定义对象
        var oStudent = {
            // 属性
            name:"王五",
            age:20,
            // 方法
            show:function(){
                alert("我是一个好学生")
            }
        }
        // 通过对象获取属性和调用方法
        alert(oStudent.name + oStudent.age)
        oStudent.show()
    </script>

说明:

调用属性和方法的操作都是通过点语法的方式来完成，对象的创建推荐使用字面量方式，因为更加简单。

3. 小结

创建自定义javascript对象有两种方式:

Object
字面量

8.11 json

1. json的介绍

json是 JavaScript Object Notation 的首字母缩写，翻译过来就是javascript对象表示法，这里说的json就是类似于javascript对象的字符串，它同时是一种数据格式，目前这种数据格式比较流行，逐渐替换掉了传统的xml数据格式。

2. json的格式

json有两种格式：

对象格式
数组格式

对象格式:

对象格式的json数据，使用一对大括号({})，大括号里面放入key:value形式的键值对，多个键值对使用逗号分隔。

对象格式的json数据:

{
    "name":"tom",
    "age":18
}

格式说明:

json中的(key)属性名称和字符串值需要用双引号引起来，用单引号或者不用引号会导致读取数据错误。

数组格式:

数组格式的json数据，使用一对中括号([])，中括号里面的数据使用逗号分隔。

数组格式的json数据:

["tom",18,"programmer"]

实际开发的json格式比较复杂,例如:

{
    "name":"jack",
    "age":29,
    "hobby":["reading","travel","photography"]
    "school":{
        "name":"Merrimack College",
        "location":"North Andover, MA"
    }
}

3. json数据转换成JavaScript对象

json本质上是字符串，如果在js中操作json数据，可以将json字符串转化为JavaScript对象。

示例代码：

    <!-- json类似于js对象的字符串，本质上就是一个字符串，同时还是一种数据格式
        json数据格式有两种：
        1.对象格式--最外层表现格式是一对大括号，key名和字符串数据都要使用双引号
        2.数组格式--最外层表现形式是一对中括号，每项数据之间使用逗号进行分割
     -->

    <script>
        // 对象格式的json数据
        var sJson1 = '{"name":"李四","age":20}'
        // 将json数据转成JS对象
        var oPerson = JSON.parse(sJson1)
        console.log(oPerson)
        // 获取属性数据
        console.log(oPerson.name + oPerson.age)

        var sJson2 = '[{"name":"李四","age":20},{"name":"李三","age":21}]'
        var aArray = JSON.parse(sJson2)
        console.log(aArray)

        // 通过下标获取指定js对象，然后通过js对象获取name属性
        var oPerson1 = aArray[1]
        console.log(oPerson1.name)

        // 扩展：浏览器给python服务器的json数据，python服务器程序可以解析成字典或列表

    </script>

4. 小结

json就是一个javascript对象表示法，json本质上是一个字符串。
json有两种格式：1. 对象格式, 2. 数组格式

8.12 ajax

1. ajax的介绍

ajax 是 Asynchronous JavaScript and XML的简写，ajax一个前后台配合的技术，它可以让 javascript 发送异步的 http 请求，与后台通信进行数据的获取，ajax 最大的优点是实现局部刷新，ajax可以发送http请求，当获取到后台数据的时候更新页面显示数据实现局部刷新，在这里大家只需要记住，当前端页面想和后台服务器进行数据交互就可以使用ajax了。

这里提示一下大家, 在html页面使用ajax需要在web服务器环境下运行, 一般向自己的web服务器发送ajax请求。

2. ajax的使用

jquery将它封装成了一个方法$.ajax()，我们可以直接用这个方法来执行ajax请求。

示例代码：

    <script>
        // 向web服务器发送ajax请求，本质上是一个http协议的请求
        $.ajax({
            // 请求的资源地址,不指定ip地址和端口号表示请求自己的服务器资源数据
            url:"data.json",
            // 请求方式：GET or POST
            type:"GET",
            // 服务器返回数据，指定解析数据的格式
            dataType:"JSON",
            // data:表示发送给web服务器的参数
            // 请求成功执行的函数
            success:function(data){
                console.log(data.name)
                // 数据请求回来以后，可以绑定给html中的某个标签控件，实现局部刷新
            },
            // 请求失败执行的函数
            error:function(){
                alert("网络异常")
            },
            // 是否使用异步，不指定的情况默认是异步请求
            async:true

        })
    </script>

ajax方法的参数说明:

url 请求地址
type 请求方式，默认是'GET'，常用的还有'POST'
dataType 设置返回的数据格式，常用的是'json'格式
data 设置发送给服务器的数据，没有参数不需要设置
success 设置请求成功后的回调函数
error 设置请求失败后的回调函数
async 设置是否异步，默认值是'true'，表示异步，一般不用写
同步和异步说明
- 同步是一个ajax请求完成另外一个才可以请求，需要等待上一个ajax请求完成，好比线程同步。
- 异步是多个ajax同时请求，不需要等待其它ajax请求完成，好比线程异步。

ajax的简写方式:

$.ajax按照请求方式可以简写成$.get或者$.post方式

ajax简写方式的示例代码:

    <script>
        // 发送get方式的ajax请求的简写方式
        // 各个参数的意义：
        // 1.请求的地址
        // 2.请求传给web服务器的参数
        // 3.请求成功的回调函数
        // 4.返回数据的解析方式
        // 5.error--失败执行的回调函数
        $.get("data.json",{"name":"ls"},function(data){
            // 按照json格式解析数据，js这里能够得到一个js对象
            console.log(data.name)
        },"JSON").error(function(){
            alert("网络异常请求失败")
        })
    </script>

$.get和$.post方法的参数说明:

$.get(url,data,success(data, status, xhr),dataType).error(func)
$.post(url,data,success(data, status, xhr),dataType).error(func)

url 请求地址
data 设置发送给服务器的数据，没有参数不需要设置
success 设置请求成功后的回调函数
- data 请求的结果数据
- status 请求的状态信息, 比如: "success"
- xhr 底层发送http请求XMLHttpRequest对象
dataType 设置返回的数据格式
- "xml"
- "html"
- "text"
- "json"
error 表示错误异常处理
- func 错误异常回调函数

3. 小结

ajax 是发送http请求获取后台服务器数据的技术
ajax的简写方式可以使用$.get和$.post方法来完成

八、JQuery

8.1 jQuery的介绍

1. jQuery的定义

2. jQuery的作用

3. jQuery的优点

4. 小结

8.2 jQuery的用法

1. jQuery的引入

2. jQuery的入口函数

3. 小结

8.3 jQuery选择器

1. jQuery选择器的介绍

2. jQuery选择器的种类

3. 小结

8.4 选择集过滤

1. 选择集过滤的介绍

2. 选择集过滤的操作

8.5 选择集转移

1. 选择集转移介绍

2. 选择集转移操作

3. 小结

8.6 获取和设置元素内容

1. html方法的使用

2. 小结

8.7 获取和设置元素属性

1. prop方法的使用

2. 小结

8.8 jQuery事件

1. 常用事件

2. 小结

8.9 事件代理

1. 事件代理介绍

2. 事件代理的使用

3. 小结

8.10 JavaScript对象

1. JavaScript对象的介绍

2. JavaScript创建对象操作

3. 小结

8.11 json

1. json的介绍

2. json的格式

3. json数据转换成JavaScript对象

4. 小结

8.12 ajax

1. ajax的介绍

2. ajax的使用

3. 小结

相关阅读

相关文章

相关问答

相关文档