JQuery总结

最新推荐文章于 2024-11-08 14:35:14 发布
最新推荐文章于 2024-11-08 14:35:14 发布
阅读量244 收藏
点赞数
分类专栏： head 文章标签： javascript jquery 选择器 dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yutao_Struggle/article/details/80991894
版权

常用原生JS

获取DOM对象：

  1. document.getElementById(“id选择器”);//返回符合条件第一个元素
  2. document.getElementsByName(“name属性名称”);//返回符合条件的所有元素(数组)
  3. document.getElementsByTagName(“标签名称”);//返回符合条件的所有元素(数组)
  4. document.getElementsByClassName(“类选择器名称”)//返回符合条件的所有元素(数组)

改变HTML内容：
document.getElementById(“id选择器”).innerHTML=”content”;

改变HTML属性：
document.getElementById(“id选择器”).attribute=value

改变CSS：
document.getElementById(id).style.property=style

HTML事件：

onload 和 onunload 事件会在用户进入或离开页面时被触发
onchange 事件常结合对输入字段的验证来使用
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件

Ajax（Asynchronous JavaScript and XML）

var xmlHttp;
if (window.XMLHttpRequest) {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlHttp=new XMLHttpRequest();
}
else  {
// code for IE6, IE5
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//添加HTTP请求头
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//method,url，async
xmlHttp.open("POST","/getInfo",true);
//String仅支持POST，如果是GET请求，空参或null
xmlHttp.send("name=yt&password=123");
//回调函数
xmlHttp.onreadystatechange=function() {
    /*
    XMLHttpRequest的状态从 0 到 4 发生变化。
    0 请求未初始化（在调用 open() 之前） 
    1 请求已提出（调用 send() 之前） 
    2 请求已发送（这里通常可以从响应得到内容头部） 
    3 请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应） 
    4 请求已完成（可以访问服务器响应并使用它）
    */
    if(xmlHttp.readyState==4&&xmlHttp.status==200) {
        //responseText：获得字符串形式的响应数据  responseXML：获得 XML 形式的响应数据。
        document.getElementById("myDiv").innerHTML=xmlHttp.responseText;
    }
}

1. 选择器

1.1 基本选择器

#id：根据给定的ID匹配一个元素
element：根据给定的元素标签名匹配所有元素
.class：根据给定的css类名匹配元素
*：匹配所有元素，多用于结合上下文来搜索
selector1,selector2,selectorN：将每一个选择器匹配到的元素合并后一起返回

<div id="myDiv">div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>

<script>
    $("#myDiv");
    $("div");
    $(".myClass");
    $("*");
    $("div,span,p.myClass");
</script>

1.2 层级选择器

ancestor descendant：在给定的祖先元素下匹配所有的后代元素
parent>child：在给定的父元素下匹配所有的子元素
prev + next：匹配所有紧接在 prev 元素后的 next 元素
prev ~ siblings：匹配 prev 元素之后同辈的所有 siblings 元素

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

<script>
    $("form input");
    $("form > input");
    $("label + input");
    $("form ~ input");
</script>

1.3 筛选器

1.3.1 基本筛选器

:first：获取匹配的第一个元素
:last：获取匹配的最后一个元素
:not(selector)：去除所有与给定选择器匹配的元素
:even：匹配所有索引值为偶数的元素，从 0 开始计数
:odd：匹配所有索引值为奇数的元素，从 0 开始计数
:eq(index)：匹配一个给定索引值的元素
:gt(index)：匹配所有大于给定索引值的元素
:lt(index)：匹配所有小于给定索引值的元素
:header：匹配如 h1, h2, h3之类的标题元素
:lang(language)：选择指定语言的所有元素
:animated：匹配所有正在执行动画效果的元素
:focus：匹配当前获取焦点的元素
:root：选择该文档的根元素，在HTML中根元素是<html>元素

1.3.2 内容筛选器

:contains(text)：匹配包含给定文本的元素
:empty：匹配所有不包含子元素或者文本的空元素
:has(selector)：匹配含有选择器所匹配的元素的元素
:parent：匹配含有子元素或者文本的元素

1.3.3 可见性筛选器

:hidden：匹配所有不可见元素
:visible：匹配所有的可见元素

1.3.4 属性筛选器

[attribute]：匹配包含给定属性的元素
[attribute=value]：匹配给定的属性是某个特定值的元素
[attribute!=value]：匹配所有不含有指定的属性，或者属性不等于特定值的元素
[attribute^=value]：匹配给定的属性是以某些值开始的元素
[attribute$=value]：匹配给定的属性是以某些值结尾的元素
[attribute*=value]：匹配给定的属性是以包含某些值的元素
[selector1][selector2][selectorN]：复合属性选择器，需要同时满足多个条件时使用

1.3.5 表单筛选器

:input：匹配所有 input, textarea, select 和 button 元素
:text：匹配所有的单行文本框
:password：匹配所有密码框
:radio：匹配所有单选按钮
:checkbox：匹配所有复选框
:submit：匹配所有提交按钮，type=”submit”的input或button都会被匹配
:image：匹配所有图像域
:reset：匹配所有重置按钮
:button：匹配所有按钮
:file：匹配所有文件域

1.3.6 表单对象属性

:enabled：匹配所有可用元素
:disabled：匹配所有不可用元素
:checked：匹配所有选中的被选中元素(复选框、单选框等，select中的option)，对于select元素来说，获取选中推荐使用 :selected
:selected：匹配所有选中的option元素

2. DOM操作

2.1 属性操作

attr(name|properties|key,value|fn)：设置或返回被选元素的属性值

  • name： 属性名称
  • properties：作为属性的“名/值对”对象
  • key,value：属性名称，属性值
  • key,function(index, attr)：key属性名称，index为当前元素的索引值，attr为原先的属性值
$("img").attr("src");
$("img").attr({ src: "test.jpg", alt: "Test Image" });
$("img").attr("src","test.jpg");
$("img").attr("title", function() { return this.src });

prop(name|properties|key,value|fn)：与attr用法和作用相同
removeAttr(name)：从每一个匹配的元素中删除一个属性
removeProp(name)：与removeAttr用法和作用相同

2.2 CSS 类

hasClass(class)：检查当前的元素是否含有某个特定的类，如果有，则返回true
addClass(class|fn)：为每个匹配的元素添加指定的类名
removeClass([class|fn])：从所有匹配的元素中删除全部或者指定的类
toggleClass(class|fn[,sw])：如果存在（不存在）就删除（添加）一个类

2.3 HTML节点/文本/值

2.3.1 创建节点

var $div = $("<div>this is div</div>");

2.3.2 插入节点

内部插入：

append(content|fn)：向每个匹配的元素内部的尾部追加内容
appendTo(element)：将所有匹配的元素追加到指定的元素内容的尾部
prepend(content)：向每个匹配的元素内部前置内容
prependTo(element)：将所有匹配的元素前置到指定的元素内部的头部

外部插入：
after(content|fn)：在每个匹配的元素之后插入内容
insertAfter(element)：把所有匹配的元素插入到另一个、指定的元素元素集合的后面
before(content|fn)：在每个匹配的元素之前插入内容
insertBefore(element)：把所有匹配的元素插入到另一个、指定的元素元素集合的前面

2.3.3 删除节点

empty()：删除匹配的元素集合中所有的子节点或内容
remove([expr])：从DOM中删除所有匹配的元素
detach([expr])：从DOM中删除所有匹配的元素，与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来

2.3.4 替换节点

replaceWith(content|fn)：将所有匹配的元素替换成指定的HTML或DOM元素
replaceAll(selector)：用匹配的元素替换掉所有 selector匹配到的元素

在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，返回值是所有被追加的内容，而不仅仅是先前所选中的元素。所以，要选择先前选中的元素，需要使用end()方法。

2.3.5 复制节点

clone([Events[,deepEvents]])：克隆匹配的DOM元素并且选中这些克隆的副本，Events表示事件处理函数是否被复制，默认为false，deepEvents表示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制

2.3.6 节点遍历

each(callback)：以每一个匹配的元素作为上下文来执行一个函数

$(“#u li”).each(function(i,obj){ 
    $(this)//指当前循环的对象
    //遍历每条数据执行的语句。
    //i是循环变量 obj是当前循环遍历的对象
    }
);

2.3.7 文本/值

html([val|fn])：取得第一个匹配元素的html内容

  • val：用于设定HTML内容的值
  • function(index, html)：此函数返回一个HTML字符串。接受两个参数，index为元素在集合中的索引位置，html为原先的HTML值

text([val|fn])：取得所有匹配元素的内容

  • val：用于设置元素内容的文本
  • function(index, text)：此函数返回一个字符串。接受两个参数，index为元素在集合中的索引位置，text为原先的text值

val([val|fn|arr])：获得匹配元素的当前值

  • val：要设置的值
  • function(index,value)：此函数返回一个要设置的值。接受两个参数，index为元素在集合中的索引位置，value为原先的value值
  • array：用于 check/select 的值

3. CSS样式

css(name|pro|[,val|fn])：访问匹配元素的样式属性

  • name：要访问的属性名称，可以是String或Array
  • properties：要设置为样式属性的名/值对
  • name,value：属性名，属性值
  • name,function(index,value)：name为属性名，index为元素在对象集合中的索引位置，value是原先的属性值
$("input").css("color");
$("input").css("border-width","10px");
$("input").css({"border-width":"10px","color":"red"});

height([val|fn])：取得匹配元素当前计算的高度值（px）

  • val：设定CSS中 ‘height’ 的值
  • function(index, height)：接收元素的索引位置和元素旧的高度值作为参数

width([val|fn])：取得第一个匹配元素当前计算的宽度值（px）

  • val：设定CSS中 ‘width’ 的值
  • function(index,width)：接收元素的索引位置和元素旧的宽度值作为参数

innerHeight()：获取第一个匹配元素内部区域高度（包括补白、不包括边框）
innerWidth()：获取第一个匹配元素内部区域宽度（包括补白、不包括边框）
outerHeight([options])：获取第一个匹配元素外部高度（默认包括补白和边框），options默认为false
outerWidth([options])：获取第一个匹配元素外部宽度（默认包括补白和边框），options默认为false

offset([coordinates])：获取或设置匹配元素在当前视口的相对偏移（top和left）
position()：获取匹配元素相对父元素的偏移（top和left）
scrollTop([val])：获取或设置匹配元素相对滚动条顶部的偏移
scrollLeft([val])：获取或设置匹配元素相对滚动条左侧的偏移

$("#btn").offset().top;
$("#btn").offset({top:10,left:30});
$("#btn").position().left;
$("div").scrollTop();
$("div").scrollLeft(200);

4. 事件

4.1 事件类型及注册

change([[data],fn])：元素的值发生改变
click([[data],fn])：单击
dblclick([[data],fn])：双击
error([[data],fn])：元素载入遇到错误
focus([[data],fn])：获得焦点
focusin([data],fn)：获得焦点，跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况
blur([[data],fn])：失去焦点
focusout([data],fn)：失去焦点，focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况
keydown([[data],fn])：当键盘或按钮被按下时，发生 keydown 事件
keypress([[data],fn])：当键盘或按钮被按下时，发生 keypress 事件，keypress 事件与 keydown 事件类似，它发生在当前获得焦点的元素上
keyup([[data],fn])：当按钮被松开时，发生 keyup 事件，它发生在当前获得焦点的元素上
mousedown([[data],fn])：当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件
mouseup([[data],fn])：当在元素上放松鼠标按钮时，会发生 mouseup 事件
mouseenter([[data],fn])：当鼠标指针穿过元素时，会发生 mouseenter 事件
mouseleave([[data],fn])：当鼠标指针离开元素时，会发生 mouseleave 事件
mousemove([[data],fn])：当鼠标指针在指定的元素中移动时，就会发生mousemove 事件
mouseout([[data],fn])：当鼠标指针从元素上移开时，发生 mouseout 事件
mouseover([[data],fn])：当鼠标指针位于元素上方时，会发生 mouseover 事件
resize([[data],fn])：当调整浏览器窗口的大小时，发生 resize 事件
scroll([[data],fn])：当用户滚动指定的元素时，会发生 scroll 事件
select([[data],fn])：当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件
submit([[data],fn])：当提交表单时，会发生 submit 事件

4.2 页面载入事件

当DOM(HTML、XML等)载入就绪可以查询及操纵时绑定一个要执行的函数。

$(document).ready(function(){
    //处理代码
});
//或者
$().ready(function(){});
//或者
$(function(){});

4.3 事件绑定

on(events,[selector],[data],fn)：在选择元素上绑定一个或多个事件的事件处理函数

  • events：一个或多个事件类型，使用空格分隔多个事件
  • selector：一个选择器字符串用于过滤器的触发事件的选择器元素的后代
  • data：当一个事件被触发时要传递event.data给事件处理函数
  • fn：该事件被触发时执行的函数

off(events,[selector],[fn])：在选择元素上移除一个或多个事件的事件处理函数

  • events:一个或多个空格分隔的事件类型和可选的命名空间
  • selector:一个最初传递到.on()事件处理程序附加的选择器
  • fn:事件处理程序函数以前附加事件上，或特殊值false

one(type,[data],fn)：为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数

  • type:添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件
  • data:将要传递给事件处理函数的数据映射
  • fn:每当事件触发时执行的函数

trigger(type,[data])：在每一个匹配的元素上触发某类事件

  • type:一个事件对象或者要触发的事件类型
  • data:传递给事件处理函数的附加参数，String或Array类型

4.4 事件切换

hover([overFn,]outFn)：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法

  • overFn:鼠标移到元素上要触发的函数
  • outFn:鼠标移出元素要触发的函数

toggle([speed],[easing],[fn])：用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的

//对表格切换显示/隐藏
$("td").toggle();
$("td").toggle(true);
//第偶数次点击和奇数次点击触发事件，1.9版本 .toggle(function, function, … ) 方法删除
$("td").toggle(
  function () {
    $(this).addClass("selected");
  },
  function () {
    $(this).removeClass("selected");
  }
);
//隐藏/显示 效果的速度。默认是 "0"毫秒。可能的值：slow，normal，fast
$("p").toggle("slow");
//显示状态切换后触发方法
$("p").toggle("fast",function(){
   alert("Animation Done.");
 });

5. AJAX

$.ajax(url,[settings])：通过 HTTP 请求加载远程数据。jQuery 底层 AJAX 实现

url：发送请求的地址
type：请求方式 (“POST” 或 “GET”)， 默认为 “GET”。
timeout：设置请求超时时间（毫秒）
async：(默认: true) 默认设置下，所有请求均为异步请求
cache：(默认: true) 设置为 false 将不会从浏览器缓存中加载请求信息
data：发送到服务器的数据。将自动转换为请求字符串格式。
dataType：预期服务器返回的数据类型,xml、text、html、jsone 如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText
complete：请求完成后回调函数 (请求成功或失败时均调用) 
error：请求失败时将调用此方法。这个方法有三个参数：XMLHttpRequest 对象，错误信息textStatus，（可能）捕获的错误对象errorThrown
success:请求成功后回调函数。这个方法有三个参数：服务器返回数据data，返回状态textStatus，XMLHttpRequest 对象

$(“selector”).load(url, [data], [callback])：载入远程 HTML 文件代码并插入至 DOM 中
$.get(url, [data], [callback], [type])：通过远程 HTTP GET 请求载入信息，type为返回的内容格式，xml、html、script、json等
$.getJSON(url, [data], [callback])：通过 HTTP GET 请求载入 JSON 数据
$.getScript(url, [callback])：通过 HTTP GET 请求载入并执行一个 JavaScript 文件
$.post(url, [data], [callback], [type])：通过远程 HTTP POST 请求载入信息

yutao_Struggle
关注
专栏目录
jquery总结
10-24
**2.3 优点总结** 通过以上代码可以看出，jQuery在以下方面展现出其独特的优势： - **灵活的选择器**：jQuery提供了类似于CSS的选择器，可以快速定位DOM元素。 - **隐式迭代**：在jQuery中，无需手动编写`for`循环...
JQuery入门，JQuery总结
01-05
**jQuery入门与总结** jQuery是一个深受开发者喜爱的JavaScript库，它的出现极大地方便了JavaScript的编程，使得HTML元素的选择、操作和隐藏等任务变得更加简单。jQuery的核心理念是"write less, do more"，即用更...
jQuery总结
weixin_44327380的博客
10-15 806
jQuery总结一、jQuery是什么？二、jQuery 核心函数三、jQuery 对象和 dom 对象区分四、jQuery 选择器1.基本选择器2.层级选择器3.过滤选择器五、jQuery 元素筛选 一、jQuery是什么？ jQuery，顾名思义，也就是 JavaScript 和查询（Query），它就是辅助 JavaScript 开发的 js 类库。 jQuery 核心思想！！！ 它的核心思想是 write less,do more(写得更少,做得更多)，所以它实现了很多浏览器的兼容问题。 jQue
仿写jQuery总结
LWH8011的博客
06-20 2024
闭包 使用匿名函数||闭包 实现局部变量避免变量的全局污染 (function(){})() window全局方法 window.$=window.jQuery jQuery无new化操作 function jQuery(){ return new jQuery.prototype.init() } jQuery.prototype.init=function(){ return this; } jQuery.prototype.init.prototype = jQuery.proto
前端基础04 Jquery 总结
Xs943的博客
03-26 2037
一、jquery 1.简介 A.就是对js的一个简单的封装 优化Html文档操作 事件处理 动画设计 ajax交互 B.适配了各种主流的浏览器 C.轻量级的前端框架 2.下载 官网下载地址：https://jquery.com/ 二、引入jquery 1.1 step01 将jquery.js放入到js文件夹下 step03 新建html界面 引入js文件 <!DOCTYPE html> <html> <head> <meta charset="utf-8
Bootstrap+jQuery总结
Duktig的博客
03-21 3191
基础 jQuery基础 jQuery API 中文文档 jQuery API 3.3.1 速查表 （比较系统，好查询） DOM的jquery操作（遍历） 使用注意事项 将其文件放在项目指定文件夹（一般在js文件夹下），然后像引用js文件那样引用它 必须放在所有自定义js文件之前 jQuery官网中可以下载大量的插件以方便使用（2000多个插件） jacarousel插件（图片传送带，点击实现，不能自动轮播） easyslide插件（图片轮播，不能点击） facelist插件（输入关键字，显
jQuery学习总结3
qq_63479468的博客
03-25 1276
一、jQuery事件机制 JavaScript中已经学习了事件，jQuery对JavaScript事件进行了封装，增加并扩展了事件处理机制。jQuery不仅提供了更加优雅的事件处理语法，而且极大地增强了事件的处理能力。 二、jQuery注册事件的发展历程 1.简单事件绑定 click() 不支持同时注册，也不支持动态注册。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&
JQuery总结2
Emperorn的博客
10-24 663
/通过jquery对象来调用获取方法。// jQuery //他是核心的对象 里面的方法都是通过他来调用的。// 使用$来替代jQuery。
Jquery总结图
zhong_fucheng
06-07 341
读完锋利Jquery第二版书，对其进行整理做出的思维导图：
JQUERY总结
忠麦一生
05-31 1601
什么是Jquery框架     所谓框架，就是指一套包含工具、函数库、约定、以及尝试从常用任务中抽象出可以复用的通用模块，其目的使开发人员和设计师把重点放在特有的业务逻辑上，避免重复开发。Jquery就是这样一个东西，因此被称作Jquery框架。避免重复开发，也就是Jquery开发人员的初衷“写的更少做的更多”。但是Jquery不是一门独立的语言，它是基于javascript的封装。它具有以下特
jQuery总结1
08-03
6、总结jQuery是一个强大的JavaScript库，它极大地简化了DOM操作、事件处理和动画制作。它的核心优势在于提高了开发效率，降低了代码复杂性，同时具有良好的浏览器兼容性。jQuery通过其独特的选择器语法，使得选取...
jquery总结学习资料JQuery总结
10-16
**jQuery 总结** 在实际开发中，jQuery 可以极大地提高工作效率，减少代码量，使得动态交互和界面美化变得更加简单。然而，随着 ES6 和现代前端框架的崛起，如 React 和 Vue，jQuery 在某些场景下可能不再是首选。...
2022Jquery总结.pptx
01-25
本文将深入探讨2022年jQuery的总结，包括其概念、优点、基本使用方法以及与DOM对象的区别。 首先，jQuery是由John Resig于2006年创立的，它是最受欢迎的JavaScript库之一。jQuery的设计理念是"write less, Do more...
Echarts 折线图
weixin_44443380的博客
11-08 241
解决方法：设置emphasis.lineStyle和折线图本身lineStyle相同即可。问题：鼠标悬停在折线图上，折线变粗。3、去掉 hover 折线变粗方法。
每天10个vue面试题(九)
最新发布
不熬夜的臭宝的博客
11-08 520
一天10个vue面试题喽！
上门理发系统的搭建
app830的博客
11-07 388
上门理发系统的搭建涉及多个方面，包括技术架构、功能模块、用户体验以及运营策略等。服务器：部署应用到云服务器（如AWS、阿里云）或本地服务器上，确保系统的稳定性和可扩展性。消息通知：通过短信、邮件或APP推送等方式，向用户发送预约确认、提醒等消息。订单管理：用户可以查看自己的预约订单，包括待付款、已付款、已完成等状态。服务浏览与选择：展示各类理发服务，包括价格、时长、适用人群等信息。在搭建过程中，要确保系统的安全性和稳定性，防止数据泄露和系统崩溃。操作便捷：优化用户操作流程，减少不必要的步骤，提高用户体验。
JavaScript数据类型- BigInt详解（处理任意大小整数的终极指南）
cx18333的博客
11-05 529
随着ECMAScript 11（ES11）引入了BigInt，JavaScript开发者现在可以轻松地处理超出传统Number类型限制的大整数。本文全面解析了BigInt的使用方法、核心特性和限制条件，为你提供了处理大型整数数据的强大工具。从BigInt的基础用法到算术运算和比较，再到类型检查和兼容性考量，一步步的深入了解这个新的数据类型。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值