jQuery用法小结

jQuery加载
1.$(document).ready()
2.添加css样式:单个:$("p").css("color","red");
多个样式:$("p").css({"color":"red","border":"1px"})
3.选择器:
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
属性选择器:
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素

jQuery中的animate()

2.jQuery中的animate()方法不能改变div的背景颜色,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right,等等。
jQuery 方法链接
如需链接一个动作,您只需简单地把该动作追加到之前的动作上。
3.$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
4.三个简单实用的用于 DOM 操作的 jQuery 方法:
.text() - 设置或返回所选元素的文本内容
.html() - 设置或返回所选元素的内容(包括 HTML 标记)
.val() - 设置或返回表单字段的值
获取属性 .attr("属性")

用于添加新内容的四个 jQuery 方法:
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

如需删除元素和内容,一般可使用以下两个 jQuery 方法:
.remove() - 删除被选元素(及其子元素)
.empty() - 从被选元素中删除子元素


过滤被删除的元素

jQuery remove() 方法也可接受一个参数,允许对被删元素进行过滤。
该参数可以是任何 jQuery 选择器的语法。
例子删除 class="italic" 的所有 <p> 元素:
$("p").remove(".italic");


jQuery addClass() 方法:
添加单个class:$("div").addClass("class1")
添加多个class:$("#div").addClass("class1 class2");


jQuery removeClass() 方法:
删除指定的 class 属性:
$("h1").removeClass("blue");
对被选元素进行添加/删除类的切换操作:
jQuery toggleClass() 方法:
$("h1").toggleClass("blue");

设置指定的 <div> 元素的宽度和高度:
$("button").click(function(){
$("#div1").width(500).height(500);
});


jQuery 向上遍历:

1.parent() 方法返回被选元素的直接父元素。
$("span").parent().css("color":"red");
2.parents() 方法
parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。
3.parentsUntil() 方法
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
$(document).ready(function(){
$("span").parentsUntil("div");
});
jQuery 向下遍历

children() 方法返回被选元素的所有直接子元素(只会向下一级对 DOM 树进行遍历)
jQuery find() 方法:
find() 方法返回被选元素的所有后代元素:
例:$(document).ready(function(){
$("div").find("span");
});
在 DOM 树中水平遍历:
jQuery siblings() 方法:
siblings() 方法返回被选元素的所有同胞元素。
例:$(document).ready(function(){
$("h2").siblings();
});
jQuery next() 方法
next() 方法返回被选元素的下一个同胞元素,该方法只返回一个元素;
jQuery nextAll() 方法
nextAll() 方法返回被选元素的所有跟随的同胞元素。
Query nextUntil() 方法
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
例如:$(document).ready(function(){
$("h2").nextUntil("h6");
});h2-h6之间被选中;
jQuery 遍历 - 过滤
jQuery first() 方法
下面的例子选取首个 <div> 元素内部的第一个 <p> 元素:
jQuery last() 方法
last() 方法返回被选元素的最后一个元素。
$(document).ready(function(){
$("div p").last();
});div中最后一个p.
jQuery eq() 方法
eq() 方法返回被选元素中带有指定索引号的元素,从0开始。
例:$(document).ready(function(){
$("p").eq(1).css;
});
jQuery filter() 方法
允许规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回;
$(document).ready(function(){
$("p").filter(".lala").css;(class为lala都会被选择)
});
jQuery not() 方法
not() 方法返回不匹配标准的所有元素。
not() 方法与 filter() 相反。
jQuery - AJAX load() 方法
load() 方法从服务器加载数据,并把返回的数据放入被选元素中。
$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容,加载到指定的 <div> 元素中:
实例
$("#div1").load("demo_test.txt #p1");

jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。
GET 基本上用于从服务器获得(取回)数据。注释:GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不会缓存数据

原文地址:https://www.cnblogs.com/cxy66/p/6057317.html