jQuery概述 选择器及其相关操作

Posted 2021-08-30 开到荼蘼223's

jQuery是什么，它有什么作用？

jQuery是javascript的一个库，是把JavaScript的相关函数和方法进行封装，兼容css3和各大浏览器，提供了dom、events、animate、ajax等简易的操作，理念是“写的少，做的多”，可以让我们在开发时更加便捷操作，提高开发效率。

jQuery的使用方式

可以在官网下载最新的jQuery文件 官网：http://jquery.com/

引入jQuery库

	<script src="./jquery-3.4.1.js"></script>

编写jQuery的入口函数

    $(document).ready(function(){
        js代码;
    });
可以简写为：
    $(function(){
        js代码;
    });

强调：$代表jQuery

jQuery选择器

基本选择器

	    - id选择器 #id
	    - 类选择器 .class
	    - 元素名选择器 element
	    - 匹配所有元素 *

基本过滤选择器

	- Element:first 选取第一个元素
	- Element:last 选取最后一个元素
	- Element:not(selector) 去除所有与给定选择器匹配的元素
	- Element:even 选取所有索引为偶数的元素 索引从0开始
	- Element:odd 选取所有索引为奇数的元素 索引从0开始
	- Element:eq(index) 选取索引等于index的元素
	- Element:gt(index) 选取索引大于index的元素
	- Element:lt(index) 选取索引小于index的元素
	- :header 选取所有的标题标签

属性过滤选择器

	- Element[attribute] 选取拥有此属性的选择器
	- Element[attribute=value] 选取属性值为value的元素
	- Element[attribute!=value] 选取属性值不为value的元素
	- Element[attribute^=value] 选取指定属性值以value开始的元素
	- Element[attribute$=value] 选取指定属性值以value结尾的元素
	- Element[attribute*=value] 选取含有指定属性值value的元素

表单选择器

	:input 选择由input生成的表单控件
	:text 选择单行文本框
	:password 选择密码框
	:radio 单选按钮
	:checked 选取所有被选中的元素

子元素选择器

	:nth-child(index/even/odd) 选取每个父元素下的索引为偶（奇）数的子元素
	:first-child 选择每个父元素下的第一个子元素
	:last-child 选择父元素下的最后一个子元素

jQuery操作元素属性

获取元素的属性:

	$(selector).attr(属性名)

设置元素的属性值

	$(selector).attr({'属性名':'属性值'})
	- 以键值对的方式设置属性值
	$(selector).attr('属性名','属性值')
	- 回调函数的形式设置属性值
	$(selector).attr('属性名',function(){})

删除元素的属性

	$(selector).removeAttr('属性名')

操作样式

获取样式属性的值

	$(selector).css('样式属性名')

设置样式属性的值

	- 以传入对象的方式设置样式：
	    $(selector).css({'属性名':'属性值'})
	- 以给函数传值的方式设置样式
	    $(selector).css('属性名','属性值')

操作样式类

添加样式类

$(selector).addClass(样式类名)

删除样式类

$(selector).removeClass(样式类名)

判断某个元素是否含有给定的样式类

$(selector).hasClass(样式类名)

交替添加(删除)样式类

$(selector).toggleClass(样式类名)

当用户名为abc时报错

    <label for="">
        用户名：
        <input type="text" id="username">
        <span id="msg"></span>
    </label>
    <script>
        $(function(){
            $('#username').blur(function(){//给文本框绑定失去焦点事件
                var name = $('input').val()//获取用户名
                if(name == 'abc'){
                    $('#msg').html('用户名可用')
                    if($('#msg').hasClass('wrong')){
                        $('#msg').removeClass('wrong')
                    }
                    $('#msg').addClass('right')
                }else{
                    $('#msg').html('用户名不可用')
                    if($('#msg').hasClass('right')){
                        $('#msg').removeClass('right')
                    }
                    $('#msg').addClass('wrong')                    
                }
            })
        })
    </script>

获取或设置元素的高度和宽度

宽度
    $(selector).width() 获取宽度
    $(selector).width(value) 设置宽度
高度
    $(selector).height() 获取高度
    $(selector).height(value) 设置高度

操作html代码
作用类似于innerHTML

                    获取html代码
                        $(selector).html()
                    设置html代码
                        $(selector).html('html代码')  

操作文本
作用类似于innerText

                    获取标签的文本
                        $(selector).text()
                    设置标签的文本
                        $(selector).text('文本')

操作值

		$(selector).val() 获取元素的value属性值

		$(selector).val(值) 设置元素的value属性值

操作元素的固有属性

                    获取元素的固有属性值
                        $(selector).prop('属性名')
                    设置元素的固有属性值
                        $(selector).prop('属性名','属性值')

data()方法
用来设置和获取元素上的值，但是不影响DOM结构，类似给元素绑定了一个变量，该变量是存放在内存中 在html中是看不到的

$('div').data('PI','3.1415')
console.log($('div').data('PI'))//3.1415 html中没有

查找和筛选元素

                    $(selector).eq(index) 获取索引为index的元素 
                    $(selector).filter(expr) 筛选出与指定表达式expr相同的元素
                    $(selector).not(expr) 筛选出与指定表达式expr不同相同的元素
                    $(selector).find(expr) 查找与指定表达式相同的子元素
                    $(selector).next([expr]) 返回与指定表达式相同的同辈元素
                    $(selector).parent([expr]) 返回与指定表达式相匹配的父元素
                    $(selector).sibling([expr]) 返回与表达式匹配的所有同辈元素