前端框架：jQuery

qq_39935684

已于 2022-05-26 00:24:32 修改

阅读量1.0k

点赞数

分类专栏：前端文章标签： jquery 前端

于 2022-04-11 11:54:40 首次发布

本文链接：https://blog.csdn.net/qq_39935684/article/details/124095571

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、jQuery介绍

jQuery是什么？

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或Javascript框架）。jQuery的涉及宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事；它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互；

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件；jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等；

jQuery的版本：目前在市场上，1.X，2.X、3.X功能的完善在1.X、2.X的时候是属于删除旧代码，去除对于旧的浏览器兼容代码；3.X的时候增加es的新特性以及调整核心代码的结构；

jQuery的引入：根本上，jQuery就是一个写好的js文件，所以想要使用jQuery的语法必须先引入到本地；

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

二、jQuery的选择器

1.jquery与dom的关系

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
</head>
<body>
<div>123</div>
<div class="c1">123</div>
<div class="c1">345</div>
<p id="i1">234</p>
<p>234</p>
    <script>
        //jquery的实例化过程就是在选择dom元素的过程
        $('.c1').css('color','red')
        //jquery对象和dom对象的转换关系
        console.log($('.c1')[1].innerHTML)
        //将dom对象转换为jquery对象
        var ele = document.getElementById('i1')
        $(ele).css('color','green')
    </script>
</body>
</html>

2.jquery的选择器

2.1直接查找

基本选择器

实例	说明
$('#id')	id选择器
$('.class')	class选择器
$('element')	标签选择器
$('#id,.class,element')	逗号或选择器
$('#id .class element')	空格与选择器

组合选择器

实例	说明
$('.outer div')	ancestor descendant 包含选择器
$('.outer > div')	parent > child 父子选择器
$('.outer + div')	prev + next 下一个兄弟选择器
$('.outer ~ div')	prev ~ siblings 兄弟选择器

属性选择器

实例	说明
[attribute=value]	获取拥有指定数据attribute，并且值为value的元素
$("[type='checked']")
$("[class='XXX']")

表单选择器

实例	说明
$("[type='text']") 可简写为 $(":text")	指form表单中tupe='text'的标签
:password
:enabled
:disabled
:checked
:selected

筛选器

实例	说明
$('ul li:first')	从已获取的元素集合中提取第一个元素
:last	从已获取的元素集合中提取最后一个元素
:first-child	从已获取的元素集合中提取第一个子元素
:last-child	从已获取的元素集合中提取最后一个子元素
:nth-child
:even	从已获取的元素集合中提取下标为偶数的元素（下标从0开始）
:odd	从已获取的元素集合中提取下标为奇数的元素
:eq(index)	从已获取的元素集合中提取指定下标的子元素
:gt(index)	从已获取的元素集合中提取大于等于指定下标的子元素
:lt(index)	从已获取的元素集合中提取小于等于指定下标的子元素
筛选器方法（适用于传参）
$().first()	从已经获取的元素中提取第一个元素
$().last()	从已获取的元素集合中提取最后一个元素
$().eq()	从已获取的元素集合中提取指定下标的子元素

2.2导航查找

实例	说明
$('ul').children('.c1')	查找子代标签；仅查找子代
$('ul').fild('.c1')	查找后代标签；会查找子孙后代
$('.c1').next()	向下查找兄弟标签
$('.c1').nextAll()
$('.c1').nextUntil()
$('.c1').prev()	向上查找兄弟标签
$('.c1').prevAll()
$('.c1').prevUntil()
$('.c1').siblings()	查找所有兄弟标签
$('.c1').parent()	查找父标签
$('.c1').parents()
$('.c1').parentUntil()

链式操作示例：$('.c1').next().next().css('color', 'red')

3.jQuery的事件绑定

<script>
    $('ul li').click(function(){
        // 绑定事件
        // this在事件函数中指代触发事件的dom标签
        // this.style.color='red'
        // alert('123')
        // $(this).css('color','red')
        // $(this).siblings().css('color','black')
        // 链式操作
        $(this).css('color','red').siblings().css('color','black')
    })
</script>

4.jQuery的操作标签

1.文本操作

实例	说明
$(选择符).html()	读取元素中的内容，如果$()函数获取了多个元素，则提取第一个元素的内容
$(选择符).html(内容)	修改内容，如果$()函数获取了多个元素，则批量修改内容
$(选择符).text()	读取元素中的内容，如果$()函数获取了多个元素，则提取第一个元素的内容；获取的内容是存文本，不包含html代码
$(选择符).text(内容)	修改内容，如果$()函数获取了多个元素，则批量修改内容；若修改的内容中有html文本，则直接转成实体字符，而不是html代码

2.value操作

3.属性操作

实例	说明
$('选择符').attr('属性名')	获取非表单元素的属性值，只会提取第一个元素的属性值
$('选择符').prop('属性名')	表单元素的属性，只会提取第一个元素的属性值；prop适用于布尔值类型操作；类似于checkbox选择框的checked属性
$('选择符').attr('属性名','属性值')	修改非表单元素的属性值，如果有多个元素，则全部修改
$('选择符').prop('属性名','属性值')	修改表单元素的属性值，如果元素有多个，则全部修改
$('选择符').attr({'属性名1':'属性值1','属性名2':'属性值2'......})
$('选择符').prop({'属性名1':'属性值1','属性名2':'属性值2'......})

4.css样式操作

实例	说明
$().css(‘样式属性’)	获取样式
$().css("样式属性","样式值").css("样式属性","样式值");	操作样式
$().css({"样式属性1":"样式值1","样式属性2":"样式值2",....})	操作样式
$().css("样式属性":function(){ // 其他代码操作 return "样式值"; });

5.class属性操作

实例	说明
$('.c1').addclass('c3')	给获取到的所有元素添加指定class样式
$('.c1').removeclass('c3')	给获取到的所有元素删除指定class样式
$('.c1').toggleclass('c3')	给获取到的所有元素进行判断，如果有指定的class样式则删除，如果没有指定的class样式则添加

tab切换案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
    <style>

        *{
            margin: 0;
            padding: 0;
        }

        .tab{
            width: 800px;
            height: 300px;
            /*border: 1px solid rebeccapurple;*/
            margin: 200px auto;
        }

        .tab ul{
            list-style: none;
        }

        .tab ul li{
            display: inline-block;
        }

        .tab_title {
            background-color: #f7f7f7;
            border: 1px solid #eee;
            border-bottom: 1px solid #e4393c;
        }

        .tab .tab_title li{
            padding: 10px 25px;
            font-size: 14px;
        }

        .tab .tab_title li.current{
            background-color: #e4393c;
            color: #fff;
            cursor: default;
        }

        .tab_con li.hide{
            display: none;
        }

    </style>
</head>
<body>
<div class="tab">
    <ul class="tab_title">
        <li class="current">商品介绍</li>
        <li>规格与包装</li>
        <li>售后保障</li>
        <li>商品评论</li>
    </ul>

    <ul class="tab_con">
        <li>商品介绍...</li>
        <li class="hide">规格与包装...</li>
        <li class="hide">售后保障...</li>
        <li class="hide">商品评论...</li>
    </ul>
</div>

<script>
    $('.tab_title').children().click(function(){
        $(this).addClass('current').siblings().removeClass('current')
        $(".tab_con li").eq($(this).index()).removeClass("hide").siblings().addClass("hide")
    })
</script>
</body>
</html>

6.节点操作

5.jQuery的动画

6.扩展方法（插件机制）

qq_39935684

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端框架：jQuery

一、jQuery介绍jQuery是什么？jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或Javascript框架）。jQuery的涉及宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事；它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互；jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功
复制链接

扫一扫

专栏目录