投稿
  1. 首页
  2. html-js-css

JQuery 入门基础知识

广东2a学校排名 • 2022-6-10 • html-js-css • 阅读 24

JQuery 入门基础知识,第1张

jquery到底是什么

jQuery的官网 jQuery
jQuery就是一个js库，使用jQuery的话，会比使用JavaScript更简单。

jquery的版本问题

官网下载地址：Download jQuery | jQuery
jQuery版本有很多，分为1.x 2.x 3.x
1.x和2.x版本jquery都不再更新版本了，现在只更新3.x版本。

jquery的引入
在线引入

找一些在线官网如bootstrap官网的jquery,搜索bootstrap.cdn即可，但必须要确保再有网络的情况下使用。

本地引入

将官网的jQuery文件下载下来引用即可
jquery的入口函数

使用jQuery的四个步骤：

引入jQuery文件检测引入是否成功入口函数功能实现 
// 检测jquery是否引入成功
        alert(jQuery);
        alert($);//   总结得到$ == jQuery

关于jQuery的入口函数：

//第一种写法
$(document).ready(function() {
	
});
//第二种写法
$(function() {
	
});

jQuery入口函数与js入口函数的区别： JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。  jq对象和dom对象(重要)

DOM对象：使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。
jQuery对象：jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。
jQuery对象其实就是DOM对象的包装集包装了DOM对象的集合（伪数组）
DOM对象与jQuery对象的方法不能混用。

获取jQuery对象  $("dom对象选择器") 
jQuery获取jQuery对象
$("dom对象选择器")
原理解析
// js获取元素对象
        var _box = document.getElementById("box");
// $(dom对象) === $(document.getElementById("box"))
实例
$("#box");
// 所以$("#box") === document.getElementById("box")
 dom对象转换jquery对象 
dom对象转换为jquery对象
    $(dom对象);
    如 $(_box);//_box是已获取的jsDOM对象
jquery对象转换为dom对象  
jquery对象  转换为 dom对象
//方法一
 jQuery对象[索引]
//方法二
 jQuery对象.get(索引)
 如 $("div")[0];
jquery选择器 选择器参考：https://www.runoob.com/jquery/jquery-traversing-filtering.htmlhttps://www.runoob.com/jquery/jquery-traversing-filtering.html 基本选择器

名称

用法

描述

ID选择器

$(“#id”);

获取指定ID的元素

类选择器

$(“.class”);

获取同一类class的元素

标签选择器

$(“div”);

获取同一类标签的所有元素

并集选择器

$(“div,p,li”);

使用逗号分隔，只要符合条件之一就可。

交集选择器

$(“div.redClass”);

获取class为redClass的div元素

总结：跟css的选择器用法一模一样。

层级选择器

名称

用法

描述

子代选择器

$(“ul>li”);

使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素

后代选择器

$(“ul li”);

使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

总结：跟css的选择器用法一模一样。

过滤选择器

名称

用法

描述

:eq（index）

$(“li:eq(2)”).css(“color”, ”red”);

获取到的li元素中，选择索引号为2的元素，索引号index从0开始。

:odd

$(“li:odd”).css(“color”, ”red”);

获取到的li元素中，选择索引号为奇数的元素

:even

$(“li:even”).css(“color”, ”red”);

获取到的li元素中，选择索引号为偶数的元素

总结：这类选择器都带冒号

筛选选择器(方法)

名称

用法

描述

children()

$(“ul”).children(“li”)

方法返回被选元素的所有直接子元素。

相当于$(“ul>li”)，子类选择器

find()

$(“ul”).find(“li”);

方法返回被选元素的后代元素，一路向下直到最后一个后代。

相当于$(“ul li”),后代选择器

first()

例子选取首个 元素内部的第一个

元素

$("div p").first();

方法返回被选元素的首个元素。
last()

例子选择最后一个 元素中的最后一个

元素

$("div p").last();

方法返回被选元素的最后一个元素。

siblings(selector)

例子返回属于 的同胞元素的所有

元素

$("h2").siblings("p");

查找兄弟节点，不包括自己本身。

parent()

$(“#first”).parent();

查找父亲

parents()$(“#first”).parents();方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。
eq()

$(“li”).eq(2);

方法返回被选元素中带有指定索引号的元素。索引号从 0 开始，因此首个元素的索引号是 0 而不是 1

next()

$(“li”).next()

找下一个兄弟

nextAll()$("h2").nextAll();方法返回被选元素的所有跟随的同胞元素。
nextUntil()

例子返回介于 与 元素之间的所有同胞元素

$("h2").nextUntil("h6");

方法返回介于两个给定参数之间的所有跟随的同胞元素。

prev()

$(“li”).prev()

找上一次兄弟

prevAll()，prevUntil()用法与next()一系列方法向同，不过方向相反

总结：筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。

:nth-child()选择器详细功能描述:

:nth-child(even)能选择每个父元素下的索引值是偶数的元素

:nth-child(odd)选择出每个父元素下的索引值是奇数的元素

:nth-child(2)选取每个父元素下的索引值等于2的元素

:nth-child(3n)能选出每个父元素下的索引值是3的倍数的元素,n从0开始

:nth-child(3n+1)能选取每个父元素下的索引值是3n+1的元素.n从0开始

表单选择器

选择器

描述

返回值

示例

:input

匹配所有