百度360必应搜狗淘宝本站头条
nodejsbufferorg.jsoupsetnocountoncv2.bitwise_nottime.strptime
当前位置：网站首页 > 编程字典 > 正文

JQuery笔记(上)（jquery100例）

toyiye 2024-09-09 08:57 3 浏览 0 评论

1.JQuery简介。

jQuery是一套跨浏览器的JavaScript库，简化HTML与JavaScript之间的操作。由John Resig在2006年1月的BarCamp NYC上发布第一个版本。目前是由 Dave Methvin 领导的开发团队进行开发。全球前10000个访问最高的网站中，有59%使用了jQuery，是目前最受欢迎的JavaScript库。简单来说就是一款免费且开放源代码的JavaScript代码库，类似的JavaScript代码库还有比如：jQuery、dojo、prototype、ExtJS。

2.JQuery特点。

  1. 动态特效

  2. AJAX

  3. 通过插件来扩展

  4. 方便的工具 - 例如浏览器版本判断

  5. 渐进增强

  6. 链式调用

  7. 多浏览器支持，支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+（在2.0.0中取消了对Internet Explorer6,7,8的支持）。

3.JQuery中的选择器

在JQuery中，获得页面中元素的方式就称做选择器。

  1. 基本

  2. 层级

  3. 简单

  4. 内容

  5. 可见性

  6. 属性

  7. 子元素

  8. 表单

  9. 表单对象属性

3.1.基本

  1. #id ：通过id属性值获取元素

  2. Element ：通过元素名获取元素selector1,selector2 ：获取列表中指定的所有元素.

  3. class ：获取使用class样式的所有元素

3.2简单

  1. first ：匹配第一个元素

  2. last ：匹配最后一个元素

  3. even ：匹配索引为偶数的元素

  4. odd ：匹配索引为奇数的元素

  5. eq(index) ：匹配索引为指定值的元素

  6. gt(index) ：匹配索引大于指定值的元素

  7. lt(index) ：匹配索引小于指定值的元素

  8. not(selector) ：匹配除了指定选择器之外的所有元素

3.3层级

  1. ancetor descendant：匹配祖先元素下的后代元素

  2. parent > child ：匹配父元素下的子元素

  3. prev + next ：匹配上一个元素的后面的元素，必须是挨着的

  4. prev~siblings ：匹配前一个元素的所有平辈元素，在prev元素后面才能匹配

3.4内容

  1. :contains(text)：匹配内容中包含指定内容的元素

  2. :empty ：匹配内容为空的元素

  3. :has(selector)：匹配内容中包含指定选择器的元素

  4. :parent：匹配内容不为空的元素

3.5可见性

  1. hidden：匹配隐藏的元素

  2. visible：匹配显示的元素

3.6属性

  1. [attribute]：匹配具有指定属性的元素

  2. [attribute=value]：匹配属性值等于指定值的元素

  3. [attribute!=value]：匹配属性值不等于指定值的元素

  4. [attribute^=value]：匹配属性值以指定值的开始的元素

  5. [attribute$=value]：匹配属性值以指定值的结束的元素

  6. [attribute*=value]：匹配属性值中包含指定值的元素

  7. [selector1][selector2][selectorN]：同时满足所有条件，则匹配

3.7子元素

  1. :nth-child(index/even/odd)：匹配指定索引的元素，从1算起

  2. :first-child：匹配第一个子元素

  3. :last-child：匹配最后一个元素

  4. :only-child：如果子元素是父元素的唯一元素，则匹配

3.8表单

  1. :input：匹配所有表单元素

  2. :text：匹配文本框

  3. :password：匹配密码框

  4. :radio：匹配单选按钮

  5. :checkbox：匹配复选框

  6. :submit：匹配提交按钮

  7. :reset：匹配重置按钮

  8. :image：匹配图像按钮

  9. :button：匹配按钮

  10. :file：匹配文件框

  11. :hidden：匹配隐藏域

3.9表单对象属性

  1. :enabled：匹配状态可用的表单元素

  2. :disabled：匹配状态不可用的表单元素

  3. :checked：匹配被选中的元素 单选或复选

  4. :selected：匹配被选中的元素 匹配的是option

4.0 JQuery对象与dom对象

4.1什么是dom对象


以上方式获取回来的是dom对象，dom对象可以调用dom属性和相关方法，dom对象不能调用JQuery方法。

4.2什么是JQuery对象

以上方式获取回来的是JQuery对象，其实，jQuery对象本身就是一个数组，选择器匹配回来几个数组元素，jQuery对象（数组）长度就是元素个数。每个jQuery对象下的某个元素都是一个dom对象。

4.3dom对象与JQuery对象的相互转换

1)JQuery对象转dom对象

语法: JQuery[0]或JQuery.get(0)


2)dom对象转JQuery对象

语法: $(dom)


5、属性操作

5.1基本属性

  • attr(name)：获取指定属性的值

  • attr(key,value)：获取指定属性的值

  • attr(properties)：一次设置多个属性的值，要求参数必须是json对象

  • attr(key,fn)：通过一个函数的返回值设置指定属性的值

  • removeAttr(name)：删除指定的属性

5.2css

  • addClass(class)：添加样式

  • removeClass(class)：移除样式

  • toggleClass(class)：切换样式

  • hasClass(class)：判断是否使用了摸个样式，返回true:有，false:没有


5.3html/文本/值

  • html()

  • html(val)

  • text()

  • text(val)

  • val()

  • val(val)

6、css操作

6.1 基本css

css(name)：获取指定样式的值
css(name,value)：设置指定样式的值
css(properties)：一次设置多个样式的值，要求参数的json对象

6.2 位置

offset()：获取元素的位置，返回json对象，包含left和top属性
offset(coordinates) ：设置元素的位置，要求参数json对象，必须包含left和top

6.3尺寸 

width()：获取宽度
width(value)：设置宽度
height()：获取高度
height(value)：设置高度


7、事件编程

7.1页面载入

js中

window.onload=function(){ //页面初始化}

JQuery中封装了方法用于页面加载

$(document).ready(function(){ //页面初始化});

7.2基本事件

change(fn)：内容改变
click(fn)：点击
dblclick(fn)：双击
focus(fn)：获取焦点
keydown(fn)：键盘按下
keyup(fn)：键盘抬起
keypress(fn)：键盘点击
load(fn)：页面加载
unload(fn)：页面关闭
mousedown(fn)：鼠标按下
mouseup(fn)：鼠标抬起
mousemove(fn)：鼠标移动
mouseover(fn)：鼠标经过
mouseout(fn)：鼠标离开
resize(fn)：改变尺寸
scroll(fn)：滚动条滚动
select(fn)：选择内容
submit(fn)：提交按钮

6.3事件切换

hover(over,out)
#over：鼠标经过时执行的事件处理程序
#out：鼠标离开时执行的事件处理程序
toggle(fn,fn)
#当鼠标点击时的事件绑定
#第一次点击时触发第一个事件处理程序
#第二次点击时触发第二个事件处理程序

7.4事件处理

bind(type,[data],fn)
#绑定事件
type：事件名
[data]：事件发生时传递的参数
fn：事件处理程序

bind({type:fn,type:fn})

one(type,[data],fn)
绑定事件，只触发一次
type：事件名
[data]：事件发生时传递的参数
fn：事件处理程序

unbind([type])

7.5事件冒泡

什么是事件冒泡，之所以称之为冒泡，是因为事件会按照dom层次结构向水泡一样上升至最顶端

<body><div>

</div>

</body>

取消事件冒泡

function display(event){

7.6默认行为

有些html元素会有自己的行为，如：点击按钮时提交表单

<form>

阻止默认行为

function display(event){

如果觉得我的文章对您有用，请你多多支持，多多订阅。当然如果写的不好的地方也请你海涵。您的支持，就是创作的最大动力。

相关推荐

为何越来越多的编程语言使用JSON（为什么编程）

JSON是JavascriptObjectNotation的缩写，意思是Javascript对象表示法，是一种易于人类阅读和对编程友好的文本数据传递方法，是JavaScript语言规范定义的一个子...

何时在数据库中使用 JSON（数据库用json格式存储）

在本文中，您将了解何时应考虑将JSON数据类型添加到表中以及何时应避免使用它们。每天?分享?最新?软件?开发?，Devops，敏捷?，测试?以及?项目?管理?最新?，最热门?的?文章?，每天?花?...

MySQL 从零开始:05 数据类型（mysql数据类型有哪些,并举例）

前面的讲解中已经接触到了表的创建，表的创建是对字段的声明，比如：上述语句声明了字段的名称、类型、所占空间、默认值和是否可以为空等信息。其中的int、varchar、char和decimal都...

JSON对象花样进阶（json格式对象）

一、引言在现代Web开发中，JSON（JavaScriptObjectNotation）已经成为数据交换的标准格式。无论是从前端向后端发送数据，还是从后端接收数据，JSON都是不可或缺的一部分。...

深入理解 JSON 和 Form-data（json和formdata提交区别）

在讨论现代网络开发与API设计的语境下，理解客户端和服务器间如何有效且可靠地交换数据变得尤为关键。这里，特别值得关注的是两种主流数据格式：...

JSON 语法（json 语法 priority）

JSON语法是JavaScript语法的子集。JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔花括号保存对象方括号保存数组JS...

JSON语法详解（json的语法规则）

JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔大括号保存对象中括号保存数组注意：json的key是字符串,且必须是双引号，不能是单引号...

MySQL JSON数据类型操作（mysql的json）

概述mysql自5.7.8版本开始，就支持了json结构的数据存储和查询，这表明了mysql也在不断的学习和增加nosql数据库的有点。但mysql毕竟是关系型数据库，在处理json这种非结构化的数据...

JSON的数据模式（json数据格式示例）

像XML模式一样，JSON数据格式也有Schema，这是一个基于JSON格式的规范。JSON模式也以JSON格式编写。它用于验证JSON数据。JSON模式示例以下代码显示了基本的JSON模式。{"...

前端学习——JSON格式详解（后端json格式）

JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScriptProgrammingLa...

什么是 JSON:详解 JSON 及其优势（什么叫json）

现在程序员还有谁不知道JSON吗？无论对于前端还是后端，JSON都是一种常见的数据格式。那么JSON到底是什么呢？JSON的定义...

PostgreSQL JSON 类型:处理结构化数据

PostgreSQL提供JSON类型，以存储结构化数据。JSON是一种开放的数据格式，可用于存储各种类型的值。什么是JSON类型？JSON类型表示JSON(JavaScriptO...

JavaScript:JSON、三种包装类（javascript 包）

JOSN:我们希望可以将一个对象在不同的语言中进行传递，以达到通信的目的，最佳方式就是将一个对象转换为字符串的形式JSON（JavaScriptObjectNotation）-JS的对象表示法...

Python数据分析 只要1分钟 教你玩转JSON 全程干货

Json简介：Json，全名JavaScriptObjectNotation,JSON(JavaScriptObjectNotation(记号、标记))是一种轻量级的数据交换格式。它基于J...

比较一下JSON与XML两种数据格式?（json和xml哪个好）

JSON（JavaScriptObjectNotation）和XML（eXtensibleMarkupLanguage）是在日常开发中比较常用的两种数据格式，它们主要的作用就是用来进行数据的传...

取消回复欢迎 你 发表评论:

请填写验证码
一周热门
最近发表
标签列表