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 表单选择器
  • 获取选择单选框的值
  • 获取选择多选框的值
  • 获取选择下拉框
相关文章
|
3月前
|
JavaScript 前端开发
jQuery 选择器
jQuery 选择器
41 2
|
4月前
|
JavaScript 索引
jQuery 选择器
jQuery 选择器
47 5
|
16天前
|
JavaScript 前端开发 API
【JQuery】基础从零入门操作,简单详细
jQuery下载,引入依赖,JQuery语法、选择器、时间、获取元素、返回CSS、修改属性、添加元素、删除元素、猜数字游戏、表白墙
|
3月前
|
JavaScript 前端开发
jQuery 选择器
jQuery 选择器用于操作 HTML 元素,支持基于 id、类、类型、属性等条件选择元素。它扩展了 CSS 选择器的功能,并使用 $() 符号。例如,$("p") 选取所有段落元素,而 $("button").click(function(){ $("p").hide(); }) 实现点击按钮后隐藏所有段落。
|
7月前
|
JavaScript 前端开发
jQuery 选择器
jQuery 选择器
42 0
|
7月前
|
JavaScript 前端开发 索引
jQuery的选择器与自带函数详解
jQuery的选择器与自带函数详解
|
4月前
|
JavaScript 前端开发 CDN
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
本文是关于jQuery的学习笔记,涵盖了jQuery的简介、语法、选择器、事件处理以及hide()、show()、toggle()等方法的使用。
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
|
4月前
|
JavaScript
jQuery 选择器
jQuery 选择器
31 3
|
3月前
|
JavaScript
Jquery从入门到精通
Jquery从入门到精通
|
4月前
|
JavaScript 索引
jQuery 选择器
jQuery 选择器
36 1