JQuery总结

最新推荐文章于 2024-09-21 11:34:18 发布

yutao_Struggle

最新推荐文章于 2024-09-21 11:34:18 发布

阅读量234

点赞数

分类专栏： head 文章标签： javascript jquery 选择器 dom

本文链接：https://blog.csdn.net/yutao_Struggle/article/details/80991894

版权

head 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

常用原生JS

获取DOM对象：

document.getElementById(“id选择器”);//返回符合条件第一个元素
document.getElementsByName(“name属性名称”);//返回符合条件的所有元素(数组)
document.getElementsByTagName(“标签名称”);//返回符合条件的所有元素(数组)
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 请求载入信息