jQuery

最新推荐文章于 2024-03-10 16:01:55 发布

yeahSan

最新推荐文章于 2024-03-10 16:01:55 发布

阅读量274

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_65729457/article/details/127738574

版权

JavaScript 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

一、jQuery

1、简介：是一个对JavaScript进行封装的库，简化了用户使用JavaScript

2、特点：写的少、做的多

3、使用方法

（1）在页面中引入jQuery库：引入外部的js文件、使用CDN加速器，引入网络文件(网络必须畅通)

（2）'$' ：是jQuery的全局对象，代表jQuery

（3）$(function (){ })：jQuery代码的入口函数。原始的写法

$(document).ready(function(){}) --- window.onload()

简写为:$(function(){ })

二、jQuery的选择器：是jQuery的灵魂

1、基本选择器

（1）id选择器：$('#id')

（2）class类选择器：$('.class类名')

（3）标签名选择器：$('标签名')

（4）通配符选择器：$('*')

（5）合并选择器：$('#id,.class')

强调：css()函数的作用：jQuery中用于设置元素CSS样式的函数

a、css('样式属性名'，'属性值')：设置当个样式

b、css({属性名1:属性值1，属性名2:属性值2......})

eq(index)：匹配一个给定索引值的元素。页面中元素的索引值从0开始

2、过滤选择器：主要通过特定的过滤规则来筛选所需要的DOM元素。以 ” ：” 开头

2.1基本过滤选择器

（1）:first ：选择第一个元素

（2）:last：选择最后一个元素

（3）:not(selector)：去除所有与给定选择器相匹配的元素

（4）:even：匹配所有索引值为偶数的元素，从 0 开始计数

（5）:odd：匹配所有索引值为奇数的元素，从 0 开始计数

（6）:eq(index)：匹配一个给定索引值的元素

（7）:gt(index)：匹配所有大于给定索引值的元素

（8）:lt(index)：匹配所有小于给定索引值的元素

2.2内容过滤选择器

（1）:contains(text)：匹配包含给定文本的元素

（2）:empty：匹配所有不包含子元素或者文本的空元素

（3）:has(selector)：匹配含有选择器所匹配的元素的元素

（4）:parent：匹配含有子元素或者文本的元素

val()：jQuery函数，若不带参数表示获取input标签的value属性值

val(参数)：带上参数，就是将参数值赋给input标签的value属性

2.3、可见性选择器

（1）:hidden：匹配所有不可见元素，或者type为hidden的元素。不仅包含样式属性display为none的元素，也包含文本隐藏域

（2）:visible：匹配所有的可见元素

2.4、属性过滤选择器

（1）[attribute]：匹配包含给定属性的元素。

（2）[attribute=value]：匹配给定的属性是某个特定值的元素

（3）[attribute!=value]：匹配所有不含有指定的属性，或者属性不等于特定值的元素。

（4）[attribute^=value]：匹配给定的属性是以某些值开始的元素

（5）[attribute$=value]：匹配给定的属性是以某些值结尾的元素

（6）[attribute*=value]：匹配给定的属性是以包含某些值的元素

<input type="hidden" value="VIP">
    <br><br>
    <input type="text" id="in" disabled>
    <br><br>
    <div class="d1">华山</div>
    <div title="one">泰山</div>
    <div class="d1">恒山</div>
    <div title="two">黄山</div>
    <div class="d1">衡山</div>
    <p title="abc-123">黄鹤楼</p>
    <p title="abc456">岳阳楼</p>
    <p title="aaef">鹳雀楼</p>
    <p title="axafff">滕王阁</p>
    <script>
        $(function(){
            let st = $('input:hidden').val()   
            console.log(st)
            $('#in').val('蜗牛学苑')
            $('div[class]').css('color','blue') //匹配含有class属性的div
            $('div[title=one]').css('fontSize','25px')
            $('p[title!=aaef]').css('color','red') //匹配title属性值不是aaef的元素
            $('p[title^=abc]').css('color','blue') //匹配title属性值以abc开头的
            $('p[title$=ef]').css('fontSize','35px')
        })
    </script>

3、子元素选择器

（1）:first-child：匹配第一个子元素

（2）:last-child：匹配最后一个子元素

（3）:nth-child：匹配其父元素下的第N个子或奇偶元素

a、:nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素

b、:nth-child(2): 能选取每个父元素下的索引值为 2 的元素

c、:nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数的元素

  <ul>
        <li>宋江</li>
        <li>李逵</li>
        <li>晁盖</li>
        <li>柴绍</li>
        <li>武松</li>
        <li>林冲</li>
    </ul>
    <script>
        $(function(){
            $('li:first-child').css('color','blue')
            $('li:last-child').css('color','red')
            $('li:nth-child(odd)').css('fontSize','20px')
            $('li:nth-child(3n)').css('fontSize','35px')
        })
    </script>