计算机系统应用教程网站

网站首页 > 技术文章 正文

JQuery笔记(上) jquery知识点梳理

btikc 2024-10-12 12:04:54 技术文章 21 ℃ 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){

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

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表