jq总结

最新推荐文章于 2021-12-06 08:55:36 发布

Z______tz

最新推荐文章于 2021-12-06 08:55:36 发布

阅读量203

点赞数

CC 4.0 BY-SA版权

文章标签： jquery

本文链接：https://blog.csdn.net/Z______tz/article/details/112152849

这篇博客详细总结了jQuery的学习内容，包括选择器的使用，如基本选择器、层级选择器和筛选器，以及元素的属性操作、CSS类的管理、事件处理和动画效果。还深入探讨了AJAX操作，如GET、POST、getJSON和load()方法，帮助读者掌握jQuery的核心功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery学习总结

选择器

基本选择器
- #d
- 元素名
- .class
- selector（以上选择器的组合）
层级选择器
- parent>hild：在给定的父元素下匹配所有的子元素
- pre +next：匹配所有紧接在 prev 元素后的 next 元素
- prev ~ siblings：匹配 prev 元素之后的所有 siblings 元素
筛选器
- :first 获取匹配的第一个元素
- :last 获取匹配的最后个元素
- :not(selector) 用于筛选的选择器
- :even 匹配所有索引值为偶数的元素，从 0 开始计数
- :odd 匹配所有索引值为奇数的元素，从 0 开始计数
- :eq(index) 匹配一个给定索引值的元素，从 0 开始计数
- :gt(index) 匹配所有大于给定索引值的元素
- :lt(index) 匹配所有小于给定索引值的元素
- :header 匹配如 h1, h2, h3之类的标题元素
- :animated 匹配所有正在执行动画效果的元素
- :focus 匹配当前获取焦点的元素（1.6+）
- :root 匹配根元素相当于$(‘html’)（1.6+）
内容选择
- :contains(text) 匹配包含给定文本的元素
- :empty 匹配所有不包含子元素或者文本的空元素
- :has(selector) 匹配含有选择器所匹配的元素的元素
- :parent 匹配含有子元素或者文本的元素
可见性选择
- :hidden
- :visible
属性选择
子元素选择
- :first-child
- :last-child
- :first/last-of-type 结构化伪类，匹配E的父元素的第一个/最后一个E类型的孩子。等价于[:nth-of-type(1)]选择器。（）
表单选择
表单对象属性选择

元素筛选

eq(index|-index)
children([expr])
find(e|o|e)
next([expr])
nextAll([expr])
parent([expr])
parents([expr])
prev([expr])
prevAll([expr])

属性操作

属性

attr(name|pro|key,val|fn)（可以对本元素不存在的属性进行编辑，虽然不会生效）
removeAttr(name)（只能对本元素存在的属性进行编辑）
prop(n|p|k,v|f)
removeProp(name)

CSS类

addClass(class|fn)
removeClass([class|fn])
toggleClass(class|fn[,sw])

HTML、文本、值

html([val|fn])
text([val|fn])
val([val|fn|arr])

事件对象

事件切换

hover([over,]out)
toggle([spe],[eas],[fn])1.9+ 开关

事件监听

on(‘事件名’,事件处理)
事件名(事件处理)

若回调函数（事件处理）返回值为false，相当于阻止事件传播

文档处理

内部插入

append()/prependTo()
prepend()/appendTo()

外部插入

after()/insertBefore()
befor()/insertAfter()

动画/效果

animate（{动画对象}，执行时间）：自定义动画
stop([c],[j])1.7*
delay(d,[q])
finish([queue])1.9+

滑动

fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])

淡入淡出

fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])

JQuery-AJAX详解

$.ajax()
$.get()
$.post()
$.getJSON()
serialize()
serializeArray()

get请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../example/js/jquery-1.11.3.js"></script>
</head>
<body>
    <button id="loadData">加载歌曲数据</button>
<script>
    $(function(){
        $('#loadData').on('click',function(){
            //参数一:请求服务端地址
            //参数二:回调函数
            //回调函数中包含参数，参数为服务端的响应数据（字符串）
            $.get('http://127.0.0.1:8080/music/list',function(data){
                // alert(data);
                data = JSON.parse(data);
                console.log(data);
            })
        })
    })
</script>
</body>
</html>

Post请求

<body>
    <h1>密码修改</h1>
    <hr>
    <form id="f1">
        <!--隐藏域传值：servlet中四大会话跟踪技术之一-->
        <input type="hidden" name="method" value="modifyPwd">
        <input type="text" name="sno" placeholder="请输入账号" required>
        <input type="password" name="oldpwd" placeholder="请输入原密码">
        <input type="password" name="newpwd" placeholder="请输入新密码">
        <input type="password" name="repwd" placeholder="请输入重复密码">
        <button type="button" id="btnModify">修改密码</button>
    </form>
    <script>
        $(function(){

            $('#btnModify').on('click',function(){
                let url = "http://127.0.0.1/myxj/user";
                //将表单控件的数据序列化为查询路径（method=modifyPwd&username=1&oldpwd=123&newpwd=123456&repwd=123456）
                let data = $('#f1').serialize();
                // let data = $('#f1').serializeArray();

                $.post(url,data,function(resp){
                    console.log(resp);
                    if(resp.code){
                        alert('修改成功')
                    }else{
                        alert(resp.msg);
                    }
                })
            })

        })
    </script>
</body>

getJSON

getJSON默认使用get请求，向服务端发送请求后，自动将服务端响应回来的数据转换为JSON对象

<button id="btnLoad">获取数据</button>
<script>
    $(function(){
        $('#btnLoad').click(function(){
            $.getJSON("http://127.0.0.1:8080/music/list",function(data){
                console.log(data);
            })
        })
    })
</script>

另外，getJSON还可以用于加载.json文件

$(function(){
    $('button').click(function(){
        $.getJSON("json/herolist.json",function(data){
            console.log(data);
        })
    })
})

load()

load函数可以异步加载指定的页面(.html)到目标区域

$(function(){
    $('.menu ul a').on('click',function(){
        //获取需要被加载页面
        let url = $(this).data('page');
        //异步加载指定页面资源
        $('.box').load(url);
    })
})