jQuery入门&选择器

简介: jQuery入门&选择器

一. 3W1H

1.1 what ? 是什么

jQuery就是JavaScript库,封装了很多js代码(类库)

官方地址:http://jquery.com/

1.2 why?为什么要学习

为了简化JavaScript开发:选择器,CSS,HTML事件处理,JS动画,浏览器兼容,丰富插件

理解官方jQueryLOGO:理念write less,do more

1.3 where?哪些情况下用
  • 中大型网站开发
  • 一些前端框架的基础:比如easyUI,bootstrap
1.4 how?怎么用

工具:HBuilderX

使用jQuery步骤:1.下载jQuery库

2.引入:将js文件复制到项目中

3.使用

二.jQuery文件结构

jQuery版本:

1.x版本:能够兼容IE678浏览器(不再更新版本)

2.x版本:不能兼容IE678浏览器(不再更新版本)

3.x版本:不能兼容IE678浏览器,更加的精简(在国内不流行,因为国内使用jQuery的主要目的就是兼容IE678)

jQuery文件中可以看出是一个自执行函数

(function(){

window.jQuery=window.$=jQuery

}());

自执行函数

自执行函数也叫立执行函数,是将函数的声明和调用合并在一起

三. $ 和 $()

  • $代表jQuery对象(Java类),同时也是一个函数对象,即 $和jQuery是等价的。
  • $()构造了一个jQuery对象。所以,
    $()可以叫做jQuery的构造函数
$(function(){})
$("选择器")
$("标签")
$(DOM对象)
  • 在jQuery文件中,$和jQuery作为了window对象的一个属性
    源码:window.jQuery=window. $=jQuery;
    检测 $的类型:object.prototype.toString.call( $);

四. jQuery选择器

1.1 基本选择器
  • ID选择器:#ID —单个元素
  • 类选择器:.class —元素集合
  • 元素选择器:element —元素集合
  • 通配符选择器:* —元素集合
  • 群组选择器(并集):selector1,selector2 —元素集合
1.2 层次选择器
  • 后代选择器(交集):selector1 selector2 —元素集合
  • 子代选择器:> —元素集合
1.3 过滤选择器
  • 获取第一个元素 :first
  • 获取最后一个元素 :last
  • 获取偶数下标的元素 :even
  • 获取奇数下标的元素 :odd
  • 获取某一范围元素 :gt大于 :lt小于
1.4 表单选择器
  • 获取选择单选框的值
  • 获取选择多选框的值
  • 获取选择下拉框
相关文章
N..
|
1月前
|
JavaScript 前端开发 开发者
jQuery选择器
jQuery选择器
N..
14 1
|
3月前
|
JavaScript
jquery的9大选择器
jquery的9大选择器
28 2
|
2天前
|
JavaScript 索引
jQuery 选择器有几种,分别是什么
jQuery 选择器有几种,分别是什么
15 5
|
1月前
|
JavaScript
jQuery选择器案例之——index.js
jQuery选择器案例之——index.js
8 0
|
1月前
|
JavaScript
jQuery选择器案例之——index.html
jQuery选择器案例之——index.html
9 1
|
1月前
|
JavaScript 前端开发
jQuery选择器整理
jQuery选择器整理
13 0
|
1月前
|
前端开发 JavaScript 索引
第二章jQuery选择器
第二章jQuery选择器
8 0
|
1月前
|
JavaScript
jquery选择器案例分享
jquery选择器案例分享
9 0
|
1月前
|
JavaScript 索引
jQuery选择器 获取元素的十一种方式
jQuery选择器 获取元素的十一种方式
|
2月前
|
JavaScript 前端开发 数据格式
2022年11月23日——jQuery——T1(基础选择器与表单选择器)
2022年11月23日——jQuery——T1(基础选择器与表单选择器)
46 0