jQuery——jquery的引用、 jQuery对象与dom对象转换、选择器、方法

jQuery

jQuery是一个优秀的JavaScript库,它凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档,操作DOM、处理事件、执行动画和开发Ajax的操作。

jquery的引用

    方法一：本地调用
    <script src="./js/jquery-3.6.0.min.js"></script>
    方法二：jquery官网
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    方法三：百度
    <script src="http://libs.baidu.com/jquery/3.6.0/jquery.min.js"></script>
    方法四：boot
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

入口小函数

$(document).ready(function(){})    简写：$(function(){ })

	window.onload	$(document).ready()
执行时机	必须等待网页全部加载完毕（包括 图片等），然后再执行包裹代码	必须等待网页全部加载完毕（包括 图片等），然后再执行包裹代码
执行次数	只能执行一次，如果第二次，那么 第一次的执行会被覆盖	可以执行多次，第N次都不会被上 一次覆盖

 jQuery对象与dom对象转换

dom对象转化为jquery对象 

    $(dom对象)
    jquery(dom对象)

jquery对象转化为dom对象

    jquery对象[索引号]
    jquery对象.get(索引号)

 操作样式

获取样式
    jquery对象.css("属性名")      通过样式属性名获取属性值
设置样式
    设置一条样式      jquery对象.css("属性名"，"属性值")
    设置多条样式      jquery对象.css({"属性名":"属性值","属性名":"属性值"......})

 选择器

层次选择器

$("E F")    

   选择E1下所有E2

$("E>F")    

   选择E1下的子E2,不包含E2下满足的元素

$("E+F")=$(E1).next(E2)
    $("E").next( )    $("E").next("F")     往后查找，紧邻E选择器后的那一个F兄弟选择器
    $("E").prev( )    $("E").prev("F")     往前查找，紧邻E选择器前的那一个F兄弟选择器

$("E~F")=$(E1).nextAll(E2)
    $("E").nextAll( )    $("E").nextAll("F")   往后查找，紧邻E选择器后的所有F兄弟选择器
    $("E").prevAll( )    $("E").prevAll("F")   往前查找，紧邻E选择器前的所有F兄弟选择器

$("E:eq(索引)")      $("E").eq(索引)

基本过滤选择器

选择器	描述	返回	示例
:first	选择第1个元素	单个元素	$(“div:first”)选择第1个div元素
:last	选择最后1个元素	单个元素	$(“div:last”)选择最后1个div元素
:not(E1)	去除所有E1选择器匹配的元素	集合元素	$(“input:not(.my)”)选择class不是.my的所有input元素
:even	选择索引是偶数的所有元素，索引从0开始	集合元素	$(“tr:even”)选择表格中所有偶数的行
:odd	选择索引是奇数的所有元素，索引从0开始	集合元素	$(“tr:odd”)选择表格中所有奇数的行
:eq(index)	选择索引值是index的元素，index从0开始	单个元素	$(“tr:eq(1)”)选择表格行索引等于1的行
:gt(index)	选择索引值大于index的元素,index从0开始	集合元素	$(“tr:gt(1) ”)选择表格行索引大于