JQuery

关注

转载最新推荐文章于 2026-07-28 16:17:31 发布 176 阅读 AI 写同款· GEO 优化 ›

jQuery——jQuery基本概念文章目录jQuery基本概念为什么要学习jQuery？jQuery初体验什么是jQuery?jQuery的版本jQuery的入口函数jQuery对象与DOM对象的区别（重点）DOM对象转换成jQuery对象：jQuery对象转换成DOM对象：练习：隔行变色案例 jQuery基本概念学习目标：学会如何使用jQuery，掌握jQuery的常用api，能够使用jQuery实现常见的效果。为什么要学习jQuery？【01-让div显示与设置内容.html】使用javascript开发过程中，有许多的缺点阅读详情

JQUERY

1. JQuery 简介

jquery是javascript的类库，具有轻量级，完善的文档，丰富的插件支持，完善的Ajax功能，强大的选择器功能，出色的DOM操作封装，出色的浏览器兼容性，可靠的事件处理机制，隐式迭代和链式编程操作，免费开源的库。

2. 初始化jquery

jQuery方式监听页面的加载：
1.函数内部的代码页面加载(HTML)完毕之后执行
2.调用N次,会执行N次
3.jQ监听的代码可以简写

$（function（）{ 

}）

3. jquery的属性操作的样式和css操作的样式

3.1 css方法

语法：第一种： $(" 元素名称 ") . c s s (^{'} n a m e^{'}) 获取第一个匹配元素的样式属性。第二种：$ (“元素名称”).css(’ name’，‘value’) 设置样式属性
第三种：是以对象的形式写多种样式

3.2 获取内容和修改内容的方法 text()和html()

$(" 元素名称 ") . t e x t () 如果没有内容则获取到元素的内容。$ (“元素名称”).text(‘value’) 有内容则修改该元素的内容为value
$(" 元素名称 ") . h t m l () 如果没有内容则获取到该元素的内容，$ (“元素名称”).html(‘value’) 有内容则修改该元素的内容为value

区别：
一：html()操作的是innerHtml属性节点的内容。text() 操作的是innerText属性节点的内容
二：html如果传递了参数表示设置标签的内容覆盖之前的内容,传递的是标签加内容会覆盖之前的标签和内容。text传递参数是标签，则以文本形式展示
三：html方法没有传参,获取第一个标签的节点内容。text方法没有传参,获取所有标签的文本内容拼接在一起返回

4. jquery的选择器

4.1 基本选择器

 ID选择器：$("#myDiv") 匹配唯一的具有此id值的元素 
 类选择器：$(".myClass") 匹配具有此类样式值的所有元素
 标签选择器：$("div") 匹配指定标签名称的所有元素 
 通配符选择器：$("*") 匹配所有元素 
 并集选择器：$("div,span,p.myClass") 联合所有匹配的选择器 
 交集选择器：$("p.myClass") 匹配到p标签里面的类名 不常用

4.2 层级选择器

 后代选择器：$("form input") 后代选择器，选择ancestor的所有子孙节点 
 子代选择器：$("#main > span")main下一级的的所有span子节点 
 兄弟选择器：$("label + input") 兄弟相邻选择器，选择所有label相邻的第一个input节点 
 兄弟选择器：$("#prev ~ div") 相邻后边的所有，选择prev的所有后面的div同胞节点

4.3 筛选选择器，也是过滤选择器

 $("li:first") 匹配第一个选择的li元素
 $("li:last") 匹配最后一个选择的li元素
 $("li:not(:first)")选择除了第一个标签之外的所有li标签
 $("li").eq(4)选择第5个li标签 索引0开始
 $("td:eq(2)") 匹配集合中指定位置的元素(从0开始)
 $("li:odd") 选择索引为奇数 索引0开始
 $("li:even") 选择索引为偶数的li标签 索引0开始
 $("li:lt(3)")  $("li:gt(3)")选择索引大于或者小于3的所有li标签
 $(":animated") 获取正在执行动画效果的元素

4.4 属性过滤选择器

 $("div[属性]") 匹配所有具有指定属性的元素 
 $("input[name ='newsletter']") 匹配所有具有指定属性值的元素 
 $("input[name !='newsletter']") 匹配所有不具有指定属性值的元素 
 $("input[name ^='news']") 匹配所有指定属性值以news开头的元素 
 $("input[name $='letter']") 匹配所有指定属性值以letter结尾的元素 
 $("input[name *='man']") 匹配所有指定属性值含有man字符的元素 
 $("input[属性1 =“值”][name2 $= 'man']") 匹配同时符合多个选择器的所有元素

4.5 父子元素过滤器

 $("ul li:nth-child(2)"), 匹配所有li标签的索引为2的li元素，索引0开始
 $("ul li:nth-child(odd)"), 匹配所有li标签的奇数元素 
 $("ul li:nth-child(3n + 1)") 匹配所有li标签的第4,7,11元素
 $("div span:first-child") 匹配所有span标签的第1个span元素 
 $("div span:last-child") 匹配所有span标签的最后一个span元素
 parent() 获取指定标签的父节点
 parents() 获取指定标签的祖先节点 父节点以上都是 传参如果指定祖先哪个就是哪个
 parentsUntil()  获取指定标签的祖先节点直到...为止（不包含自己）
 children()    获取指定标签的所有子节点 
 siblings()    获取指定标签的兄弟节点 除了自己以外的所有兄弟
 $(当前元素).find(所有的后代元素)查找获得当前元素集合中每个元素的后代，必须参数

5. jquery的核心函数方法

5.1 $(this).index()方法：

    作用：获取索引，角标

5.2 get（）方法：和 eq()方法差不多，不过get方法返回的是DOM标签

作用:获取指定索引对应的标签返回
如果没有传递参数:获取页面中所有指定的标签存储在数组中返回
001 参数是正数
002 参数是负数 如果是-1,表示获取倒数第一个

5.3 eq（）方法

作用:获取指定索引对应的标签并且包装成jQuery对象返回
没有参数:返回一个空的jQ对象(不是this)
001 参数是正数
002 参数是负数 如果是-1,表示获取倒数第一个

5.4 data（）方法和 removeData()方法：

作用：在元素上存取数据和删除数据

5.4.1.在一个div上存取数据

  $("div").data("blah");  // undefined
  $("div").data("blah", "hello");  // blah设置为hello
  $("div").data("blah");  // hello
  $("div").data("blah", 86);  // 设置为86
  $("div").data("blah");  //  86
  $("div").removeData("blah");  //移除blah
  $("div").data("blah");  // undefined

5.4.2.在一个div上存取名/值对数据

  $("div").data("test", { first: 16, last: "pizza!" });
  $("div").data("test").first  //16;
  $("div").data("test").last  //pizza!;

5.4.3.在HTML5规范中div中读取预存的data-[key]值

  <div data-test="this is test" ></div>
  $("div").data("test"); //this is test

6. 常用事件类型

 blur( ) 元素失去焦点 a, input, textarea, button, select, label, map, area
 change( ) 用户改变域的内容 input, textarea, select 
 click( ) 鼠标点击某个对象 几乎所有元素 
 dblclick( ) 鼠标双击某个对象 几乎所有元素 
 error( ) 当加载文档或图像时发生某个错误 window, img 
 focus( ) 元素获得焦点 a, input, textarea, button, select, label, map, area
 keydown( ) 某个键盘的键被按下 几乎所有元素 
 keypress( ) 某个键盘的键被按下或按住 几乎所有元素 
 keyup( ) 某个键盘的键被松开 几乎所有元素 
 load( fn ) 某个页面或图像被完成加载 window, img 
 mousedown( fn ) 某个鼠标按键被按下 几乎所有元素 
 mousemove( fn ) 鼠标被移动 几乎所有元素 
 mouseout( fn ) 鼠标从某元素移开 几乎所有元素 
 mouseover( fn ) 鼠标被移到某元素之上 几乎所有元素 
 mouseup( fn ) 某个鼠标按键被松开 几乎所有元素 
 resize( fn ) 窗口或框架被调整尺寸 window, iframe, frame 
 scroll( fn ) 滚动文档的可视部分时 window 
 select( ) 文本被选定 document, input, textarea 
 submit( ) 提交按钮被点击 form 
 unload( fn ) 用户退出页面 window

7. DOM属性节点的操作

7.1.dom操作增删改查

添加|修改:setAttribute()
查询获取:getAttribute()
删除:removeAttribute()

7.2. 属性和属性节点对比

属性:所有的对象(包括DOM)都有属性,保存在对象身上.
属性节点:只有DOM标签有属性节点,保存在对象身上的attributes对象上面.比如heaf=“”

7.3.$.trim()方法

作用:清除字符串前面和后面的空格

8. jquery中的ajax使用方法

8.1.Ajax-load方法

语法:$(selector).load(URL,data,callback);
URL 为路径。路径后面可以加指定的id或者类名标签等
data 为添加的参数(JSON对象|查询字符串)返回给服务器端。不要有空格
callback 为回调函数一般不写

注意点:
1) 对返回的结果支持使用选择器来进行筛选
2)默认情况下,发送的是GET请求
3) load方法在使用的时候,支持提交参数到服务器端
参数的格式支持两种情况:
	[1] JSON对象 发送的网络请求是POST请求
	[2] 查询字符串 发送的网络请求是GET请求

8.2.Ajax-get方法

语法:$.get(url,data,function(respoonse,status,xhr){},dataType)

 url:请求路径
 data:参数(JSON对象|查询字符串)  
 第三个参数:请求完成的回调函数
 response:服务器返回的响应体
 status:  网络请求状态(success | error)
 xhr: 请求对象
 dataType:期望服务器返回的数据类型:json | xml | script |jsonP | text   一般不写

8.3.Ajax-post方法

语法:$.post(url,data,function(respoonse,status,xhr){},dataType)

 url:请求路径
 data:参数(JSON对象|查询字符串)
 第三个参数:请求完成的回调函数
 response:服务器返回的响应体
 status:  网络请求状态(success | error)
 xhr: 请求对象
 dataType:期望服务器返回的数据类型:json | xml | script |jsonP | text   一般不写

8.4.Ajax-ajax方法

语法：
   (1) $.ajax(url,{})
   (2) $.ajax({})

    url: 请求路径(不带参数)
    type: 请求方法 GET|POST
    data: 设置参数(JSON对象|查询字符串)
    success:请求成功的回调函数
          回调函数参数response:响应体
          status:响应的状态
          xhr:请求对象
    async:设置是否发送异步请求 默认是异步
    cache:是否要进行缓存处理
    timeout:请求超时的时间
    beforeSend:请求发送前要执行的回调函数
    complete:请求完成执行的回调函数
    context:设置所有回调函数中this(上下文)指向特定的jQ实例对象
    dataType:预期服务器返回的数据类型
    error:请求失败时调用此函数
          回调函数参数XMLHttpRequest, textStatus, errorThrown