jQuery入门级别介绍及选择器的使用----详细介绍

简介: jQuery入门级别介绍及选择器的使用----详细介绍

一,3W1H

要知道3W1H是什么 ? want 是什么?,why 为什么要使用?,

where 什么时候用?,how 怎么使用?

1.1 Want jQuery是什么?

jQuery是个快速,便利的javascript框架,简单来说就是javascript封装

了很多便我们用的功能代码。

1.2 Why 为什么要学用jQuery?

jQuery设计的宗旨是“Write Less Do More",写的更少,做的更多。

在学习jQuery之前也最好把javascript(js)了解一下,这样学jQuery会更轻松

1.3 Where jQuery什么时候用?

  • 中大型网站
  • 是一些前端框架的基础,比如EasyUl,Bootstrap

1.4 How jQuery怎么使用?

第一步:下载jQuery类库

在jQuery的官网:jQuery ---->doewnload--->选择合适的版本(大部分通用)

第二步:将下载的js文件引入开发工具HBUilder X里面的项目里(要引入外部js里面)

第三步:开始编码工作

二,选择器的使用

选择器的分类:

基本选择器分类:

id选择器:$("#id")

类选择器:$(".类名")

标签选择器:$("标签名")

通配符=全部标签:$("*")

基本选择器代码展示:
//2.1基本选择器
                $("#xx").css("background-color","yellow");//id选择器
                $(".yy").css({"background":"yellow","color":"pink"});//类选择器
                $("div").css("background","pink");//标签选择器
                $("*").css("background","yellow");//通配符:全部
                $("p,span").css("background","yellow");//并集
  • 层次选择器

交集选择器(第一个标签内的所有后代标签)例如:$("div span")代表div中的所有span标签。

父子关系(第一个标签的所有子标签) 例如:$("div>span")代表div中的所有span的子标签。

兄弟关系(第一个标签的所有同级标签)例如 $("p+span")代表与p标签同级的所有span标签。

$("div span").css("background","red");//交集 拿到后代标签span
$("div>span").css("background","red);//父子关系 拿到div子标签span
$("div+span").css("background","red")//兄弟关系
  • 过滤选择器

过滤选择器类似于找序列或者根据下标找到对应的对象。

找到第一个 :first eg:$("ul>li:first")找到第一个li

找到最后一个 :last eg:$("ul>li:last")找到最后一个li

找到偶数下标 :even eg:$("ul>li:even")下标为偶数的li(用户角度为奇数)

找到奇数下标 :odd eg:$("ul>li:odd")下标为奇数的li(用户角度为偶数)

大于 :gt(下标) eg:$("ul>li:gt(0)")下标大于0的li

小于 :lt(下标) eg:$("ul>li:lt(5)")下标小于5的li

区间查询: 用lt()与gt()的组合 eg:$("ul>li:lt(5):gt(0)")下标介于0~5的里

注意:在区间查询一定要先小于再大于查询

$("ul>li:first").css("background","yellow");//第一个
                $("ul>li:last").css("background","yellow");//最后一个
                $("ul>li:even").css("background","yellow");//偶数下标
                $("ul>li:odd").css("background","yellow");//奇数下标
                $("ul>li:gt(0)").css("background","yellow");//大于0的
                $("ul>li:lt(5)").css("background","yellow");//小于5
                $("ul>li:lt(5):gt(0)").css("background","yellow");//大于0小于5
  • 表单选择器

单选框radio、复选框checkbox判断是否选中用checked

下拉框判断option是否选中用selected

目录
相关文章
|
2月前
|
JavaScript
jquery的9大选择器
jquery的9大选择器
19 2
|
2月前
|
JavaScript
jQuery :nth-of-type(n)选择器的用法详解
jQuery中,:nth-of-type(n)选择器可以对selector选择器匹配选择到的所有HTML元素进行二次匹配选择,为了更好地阐述:nth-of-type(n)的语法,这里假设selector是一个元素p选择器,如此,:nth-of-type(n)可以用于匹配p元素选择器选择到的p元素指向的父元素中第n个类型为p的子元素,而且与p是否是该父元素的第n个子元素无关,比如
34 5
|
25天前
|
JavaScript 前端开发 数据格式
2022年11月23日——jQuery——T1(基础选择器与表单选择器)
2022年11月23日——jQuery——T1(基础选择器与表单选择器)
36 0
|
2月前
|
JavaScript 前端开发 UED
简约优雅的 jQuery 选择器
简约优雅的 jQuery 选择器
15 0
|
2月前
|
JavaScript 前端开发 数据安全/隐私保护
jQuery选择器-第2次课-大部分跟CSS3选择器类似-几乎没有学习成本-附案例-作业等
jQuery选择器-第2次课-大部分跟CSS3选择器类似-几乎没有学习成本-附案例-作业等
12 0
|
3月前
|
JavaScript 前端开发
jQuery 第三章(语法+选择器+事件)
jQuery 第三章(语法+选择器+事件)
34 1
|
3月前
|
存储 JavaScript 前端开发
JQuery入门基础
JQuery入门基础
22 0
|
4月前
|
JavaScript
jQuery :contains 选择器
jQuery :contains 选择器
18 0
|
4月前
|
存储 JavaScript 前端开发
Jquery 如何获取子元素。如何找到所有 HTML select 标签的选中项。jQuery 里的 ID 选择器和 class 选择器有何不同
Jquery 如何获取子元素。如何找到所有 HTML select 标签的选中项。jQuery 里的 ID 选择器和 class 选择器有何不同
24 1
|
JavaScript 前端开发 CDN
jQuery入门基础
jQuery入门基础 jQuery是一个JavaScript函数库。jQuery是一个轻量级的"写的少,做的多"的JavaScript库。
jQuery入门基础