笔记-jQuery

一、jQuery

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

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

3、使用方法：

​ （1）在页面中引入jQuery库：引入外部的js文件

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

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

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

​ 简写为：

​ $(function(){ })

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

1、基本选择器

​ （1）id选择器：$(‘#id’)

​ （2）类选择器：$(‘.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 的元素, 也包含文本隐藏域 ()和 visible:hidden 之类的元素

​ （2）:visibale ————— 匹配所有的可见元素

​ 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开始

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

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

​ （3）:nth-child

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

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

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

4、表单选择器

​ （1）:text —- 单行文本框

​ （2）:password —— 密码框