0、常用代码:

请容许我在1之前插入一个0，我觉得我有必要把最常用的代码放在第一位，毕竟大部分时间大家都是找代码的。

(1)AJAX请求

  1. $(function() {
  2. $('#send').click(function() {
  3. $.ajax({
  4. type: "GET", //GET或POST,
  5. async:true, //默认设置为true，所有请求均为异步请求。
  6. url: "http://www.idaima.com/xxxxx.<a href="https://www.idaima.com/explore/category-3" target="_blank">php</a>",
  7. data: {
  8. username: $("#username").val(),
  9. content: $("#content").val()
  10. },
  11. dataType: "json", //xml、html、script、jsonp、text
  12. beforeSend:function(){},
  13. complete:function(){},
  14. success: function(data) {
  15. alert(data)
  16. }
  17. error:function(){},
  18. });
  19. });
  20. });
$(function() {

	$('#send').click(function() {

		$.ajax({

			type: "GET", //GET或POST,

			async:true, //默认设置为true，所有请求均为异步请求。

			url: "http://www.idaima.com/xxxxx.php",

			data: {

				username: $("#username").val(),

				content: $("#content").val()

			},

			dataType: "json", //xml、html、script、jsonp、text

			beforeSend:function(){},

			complete:function(){},

			success: function(data) {

				alert(data)

			}

			error:function(){},

		});

	});

});

(2) 如何获取checkbox，并判断是否选中

  1. $("input[type='checkbox']").is(':checked')
  2. //返回结果：选中=true，未选中=false
$("input[type='checkbox']").is(':checked') 

//返回结果：选中=true，未选中=false

(3) 获取checkbox选中的值

  1. var chk_value =[];
  2. $('input[name="test"]:checked').each(function(){
  3. chk_value.push($(this).val());
  4. });
var chk_value =[]; 

$('input[name="test"]:checked').each(function(){ 

	chk_value.push($(this).val()); 

});

(4)checkbox全选/反选/选择奇数

  1. $("document").ready(function() {
  2. $("#btn1").click(function() {
  3. $("[name='checkbox']").attr("checked", 'true'); //全选
  4. }) $("#btn2").click(function() {
  5. $("[name='checkbox']").removeAttr("checked"); //取消全选
  6. }) $("#btn3").click(function() {
  7. $("[name='checkbox']:even").attr("checked", 'true'); //选中所有奇数
  8. }) $("#btn4").click(function() {
  9. $("[name='checkbox']").each(function() { //反选
  10. if ($(this).attr("checked")) {
  11. $(this).removeAttr("checked");
  12. } else {
  13. $(this).attr("checked", 'true');
  14. }
  15. })
  16. })
  17. })
$("document").ready(function() {

	$("#btn1").click(function() {

		$("[name='checkbox']").attr("checked", 'true'); //全选 

	}) $("#btn2").click(function() {

		$("[name='checkbox']").removeAttr("checked"); //取消全选 

	}) $("#btn3").click(function() {

		$("[name='checkbox']:even").attr("checked", 'true'); //选中所有奇数 

	}) $("#btn4").click(function() {

		$("[name='checkbox']").each(function() { //反选 

			if ($(this).attr("checked")) {

				$(this).removeAttr("checked");

			} else {

				$(this).attr("checked", 'true');

			}

		})

	})

})

(5)获取select下拉框的值

其实下拉框的最简单了，直接val就行了

  1. $("#select").val()
$("#select").val()

(6)获取选中值，三种方法都可以：

  1. $('input:radio:checked').val()；
  2. $("input[type='radio']:checked").val();
  3. $("input[name='rd']:checked").val();
$('input:radio:checked').val()；

$("input[type='radio']:checked").val();

$("input[name='rd']:checked").val();

(7)设置第一个Radio为选中值：

  1. $('input:radio:first').attr('checked', 'checked');
$('input:radio:first').attr('checked', 'checked');

或者

  1. $('input:radio:first').attr('checked', 'true');
$('input:radio:first').attr('checked', 'true');

(8)设置最后一个Radio为选中值：

  1. $('input:radio:last').attr('checked', 'checked');
$('input:radio:last').attr('checked', 'checked');

或者

  1. $('input:radio:last').attr('checked', 'true');
$('input:radio:last').attr('checked', 'true');

(9)根据索引值设置任意一个radio为选中值：

  1. $('input:radio').eq(索引值).attr('checked', 'true');//索引值=0,1,2....
$('input:radio').eq(索引值).attr('checked', 'true');//索引值=0,1,2....

或者

  1. $('input:radio').slice(1,2).attr('checked', 'true');
$('input:radio').slice(1,2).attr('checked', 'true');

(10)根据Value值设置Radio为选中值

  1. $("input:radio[value='rd2']").attr('checked','true');
$("input:radio[value='rd2']").attr('checked','true');

或者

  1. $("input[value='rd2']").attr('checked','true');
$("input[value='rd2']").attr('checked','true');

1、关于页面元素的引用

通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。http://www.idaima.com/a/1663.html

2、jQuery对象与dom对象的转换

只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。

普通的dom对象一般可以通过$()转换成jquery对象。

如：

  1. $(document.getElementById("msg"))
$(document.getElementById("msg"))

则为jquery对象，可以使用jquery的方法。

由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。

如：

  1. $("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]
$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]

这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。

以下几种写法都是正确的：

  1. $("#msg").html();
  2. $("#msg")[0].innerHTML;
  3. $("#msg").eq(0)[0].innerHTML;
  4. $("#msg").get(0).innerHTML;
$("#msg").html();

$("#msg")[0].innerHTML;

$("#msg").eq(0)[0].innerHTML;

$("#msg").get(0).innerHTML;

3、如何获取jQuery集合的某一项

对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jquery对象，而get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法，而dom对象只能使用dom的方法，如要获取第三个<div>元素的内容。有如下两种方法：

  1. $("div").eq(2).html(); //调用jquery对象的方法
  2. $("div").get(2).innerHTML; //调用dom的方法属性
$("div").eq(2).html(); //调用jquery对象的方法

$("div").get(2).innerHTML; //调用dom的方法属性

4、同一函数实现set和get

Jquery中的很多方法都是如此，主要包括如下几个：http://www.idaima.com/a/1663.html

  1. $("#msg").html(); //返回id为msg的元素节点的html内容。
  2. $("#msg").html("<b>new content</b>");
  3. //将“<b>new content</b>” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content
  4. $("#msg").text(); //返回id为msg的元素节点的文本内容。
  5. $("#msg").text("<b>new content</b>");
  6. //将“<b>new content</b>” 作为普通文本串写入id为msg的元素节点内容中,页面显示<b>new content</b>
  7. $("#msg").height(); //返回id为msg的元素的高度
  8. $("#msg").height("300"); //将id为msg的元素的高度设为300
  9. $("#msg").width(); //返回id为msg的元素的宽度
  10. $("#msg").width("300"); //将id为msg的元素的宽度设为300
  11. $("input").val("); //返回表单输入框的value值
  12. $("input").val("test"); //将表单输入框的value值设为test
  13. $("#msg").click(); //触发id为msg的元素的单击事件
  14. $("#msg").click(fn); //为id为msg的元素单击事件添加函数
$("#msg").html(); //返回id为msg的元素节点的html内容。

$("#msg").html("<b>new content</b>");

//将“<b>new content</b>” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content

$("#msg").text(); //返回id为msg的元素节点的文本内容。

$("#msg").text("<b>new content</b>");

//将“<b>new content</b>” 作为普通文本串写入id为msg的元素节点内容中,页面显示<b>new content</b>

$("#msg").height(); //返回id为msg的元素的高度

$("#msg").height("300"); //将id为msg的元素的高度设为300

$("#msg").width(); //返回id为msg的元素的宽度

$("#msg").width("300"); //将id为msg的元素的宽度设为300

$("input").val("); //返回表单输入框的value值

$("input").val("test"); //将表单输入框的value值设为test

$("#msg").click(); //触发id为msg的元素的单击事件 

$("#msg").click(fn); //为id为msg的元素单击事件添加函数

同样blur,focus,select,submit事件都可以有着两种调用方法

5、集合处理功能

对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理，jquery已经为我们提供的很方便的方法进行集合的处理。

包括两种形式：

  1. $("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][i]})
  2. //为索引分别为0，1，2的p元素分别设定不同的字体颜色。
  3. $("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})
  4. //实现表格的隔行换色效果
  5. $("p").click(function(){alert($(this).html())})
  6. //为每个p元素增加了click事件，单击某个p元素则弹出其内容
$("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][i]})

//为索引分别为0，1，2的p元素分别设定不同的字体颜色。

$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})

//实现表格的隔行换色效果

$("p").click(function(){alert($(this).html())})

//为每个p元素增加了click事件，单击某个p元素则弹出其内容

6、扩展我们需要的功能

  1. $.extend({
  2. min: function(a, b){return a < b?a:b; },
  3. max: function(a, b){return a > b?a:b; }
  4. }); //为jquery扩展了min,max两个方法
$.extend({ 

    min: function(a, b){return a < b?a:b; },

    max: function(a, b){return a > b?a:b; }

}); //为jquery扩展了min,max两个方法

使用扩展的方法（通过“$.方法名”调用）：

  1. alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));
alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));

7、支持方法的连写

所谓连写，即可以对一个jquery对象连续调用各种不同的方法。

例如：http://www.idaima.com/a/1663.html

  1. $("p").click(function(){alert($(this).html())})
  2. .mouseover(function(){alert('mouse over event')})
  3. .each(function(i){this.style.color=['#f00','#0f0','#00f'][i]});
$("p").click(function(){alert($(this).html())})

.mouseover(function(){alert('mouse over event')})

.each(function(i){this.style.color=['#f00','#0f0','#00f'][i]});

8、操作元素的样式

主要包括以下几种方式：

  1. $("#msg").css("background"); //返回元素的背景颜色
  2. $("#msg").css("background","#ccc") //设定元素背景为灰色
  3. $("#msg").height(300); $("#msg").width("200"); //设定宽高
  4. $("#msg").css({ color: "red", background: "blue" });//以名值对的形式设定样式
  5. $("#msg").addClass("select"); //为元素增加名称为select的class
  6. $("#msg").removeClass("select"); //删除元素名称为select的class
  7. $("#msg").toggleClass("select"); //如果存在（不存在）就删除（添加）名称为select的class
$("#msg").css("background"); //返回元素的背景颜色

$("#msg").css("background","#ccc") //设定元素背景为灰色

$("#msg").height(300); $("#msg").width("200"); //设定宽高

$("#msg").css({ color: "red", background: "blue" });//以名值对的形式设定样式

$("#msg").addClass("select"); //为元素增加名称为select的class

$("#msg").removeClass("select"); //删除元素名称为select的class

$("#msg").toggleClass("select"); //如果存在（不存在）就删除（添加）名称为select的class

9、完善的事件处理功能

Jquery已经为我们提供了各种事件处理方法，我们无需在html元素上直接写事件，而可以直接为通过jquery获取的对象添加事件。

如：

  1. $("#msg").click(function(){alert("good")}) //为元素添加了单击事件
  2. $("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][i]})
  3. //为三个不同的p元素单击事件分别设定不同的处理
$("#msg").click(function(){alert("good")}) //为元素添加了单击事件

$("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][i]})

//为三个不同的p元素单击事件分别设定不同的处理

jQuery中几个自定义的事件：

（1）hover(fn1,fn2)：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。

//当鼠标放在表格的某行上时将class置为over，离开时置为out。

  1. $("tr").hover(
  2. function(){
  3. $(this).addClass("over");
  4. },
  5. function(){
  6. $(this).addClass("out");
  7. });
$("tr").hover(

function(){

     $(this).addClass("over");

}, 

function(){ 

$(this).addClass("out"); 

});

（2）ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

$(document).ready(function(){alert("Load Success")})http://www.idaima.com/a/1663.html

//页面加载完毕提示“Load Success”,不同于onload事件，onload需要页面内容加载完毕（图片等），而ready只要页面html代码下载完毕即触发。与$(fn)等价

（3）toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。

  1. //每次点击时轮换添加和删除名为selected的class。
  2. $("p").toggle(function(){
  3. $(this).addClass("selected");
  4. },function(){
  5. $(this).removeClass("selected");
  6. });
//每次点击时轮换添加和删除名为selected的class。

$("p").toggle(function(){ 

     $(this).addClass("selected"); 

},function(){ 

     $(this).removeClass("selected"); 

});

（4）trigger(eventtype): 在每一个匹配的元素上触发某类事件。

例如：

$("p").trigger("click"); //触发所有p元素的click事件

（5）bind(eventtype,fn)，unbind(eventtype): 事件的绑定与反绑定

从每一个匹配的元素中（添加）删除绑定的事件。

例如：

$("p").bind("click", function(){alert($(this).text());}); //为每个p元素添加单击事件

$("p").unbind(); //删除所有p元素上的所有事件

$("p").unbind("click") //删除所有p元素上的单击事件

10、几个实用特效功能

其中toggle()和slidetoggle()方法提供了状态切换功能。

如toggle()方法包括了hide()和show()方法。

slideToggle()方法包括了slideDown()和slideUp方法。

11、几个有用的jQuery方法

$.browser.浏览器类型：检测浏览器类型。有效参数：safari, opera, msie, mozilla。如检测是否ie：$.browser.isie，是ie浏览器则返回true。

$.each(obj, fn)：通用的迭代函数。可用于近似地迭代对象和数组（代替循环）。

如

  1. $.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); });
$.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); });

等价于：

  1. var tempArr=[0,1,2];
  2. for(var i=0;i<tempArr.length;i++){
  3. alert("Item #"+i+": "+tempArr[i]);
  4. }
var tempArr=[0,1,2]; 

for(var i=0;i<tempArr.length;i++){ 

    alert("Item #"+i+": "+tempArr[i]); 

}

也可以处理json数据，如

  1. $.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", Value: " + n ); });
$.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", Value: " + n ); });

结果为：

Name:name, Value:John

Name:lang, Value:JS

$.extend(target,prop1,propN)：用一个或多个其他对象来扩展一个对象，返回这个被扩展的对象。这是jquery实现的继承方式。

如：

  1. $.extend(settings, options);
$.extend(settings, options);

//合并settings和options，并将合并结果返回settings中，相当于options继承setting并将继承结果保存在setting中。

  1. var settings = $.extend({}, defaults, options);
var settings = $.extend({}, defaults, options);

//合并defaults和options，并将合并结果返回到setting中而不覆盖default内容。

可以有多个参数（合并多项并返回）

$.map(array, fn)：数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中，并返回生成的新数组。

如：

  1. var tempArr=$.map( [0,1,2], function(i){ return i + 4; });
var tempArr=$.map( [0,1,2], function(i){ return i + 4; });

tempArr内容为：[4,5,6]

  1. var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });
var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });

tempArr内容为：[2,3]

$.merge(arr1,arr2):合并两个数组并删除其中重复的项目。

如：

  1. $.merge( [0,1,2], [2,3,4] ) //返回[0,1,2,3,4]
$.merge( [0,1,2], [2,3,4] ) //返回[0,1,2,3,4]

$.trim(str)：删除字符串两端的空白字符。

如：

  1. $.trim(" hello, how are you? "); //返回"hello,how are you? "
$.trim(" hello, how are you? "); //返回"hello,how are you? "

12、解决自定义方法或其他类库与jQuery的冲突

很多时候我们自己定义了$(id)方法来获取一个元素，或者其他的一些js类库如prototype也都定义了$方法，如果同时把这些内容放在一起就会引起变量方法定义冲突，Jquery对此专门提供了方法用于解决此问题。

使用jquery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用Jquery的时候只要将所有的$换成jQuery即可，如原来引用对象方法$("#msg")改为jQuery("#msg")。

如：

  1. jQuery.noConflict();
  2. // 开始使用jQuery
  3. jQuery("div p").hide();
  4. // 使用<a href="https://www.idaima.com/explore/category-17" target="_blank">其他</a>库的 $()
  5. $("content").style.display = 'none';
jQuery.noConflict(); 

// 开始使用jQuery 

jQuery("div p").hide(); 

// 使用其他库的 $() 

$("content").style.display = 'none';

jQuery常用方法(持续更新)（转）的更多相关文章

  1. jQuery常用方法(持续更新) jQuery（转）

    0.常用代码: 请容许我在1之前插入一个0,我觉得我有必要把最常用的代码放在第一位,毕竟大部分时间大家都是找代码的. (1)AJAX请求 $(function() { $('#send').click ...

  2. [jquery] jQuery点滴[持续更新]

    001.查看jquery的版本. $(function(){ console.log($()); //jquery console.log($().jquery); }); 002.(new Func ...

  3. 【MAC】常用方法-持续更新

    1.Homebrew安装 删除brew ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/ma ...

  4. vue项目常用方法封装，持续更新中。。。

    vue项目中可以直接使用 1.常用工具类untils.js中 /* * 验证手机号是否合格 * true--说明合格 */ export function isPhone(phoneStr){ let ...

  5. 【持续更新】JavaScript常见面试题整理

    [重点提前说]这篇博客里的问题涉及到了了JS中常见的的基础知识点,也是面试中常见的一些问题,建议初入职场的园友Mark收藏,本文会持续更新~ 1. 引入JS的三种方式 1.在HTML标签中直接使用,直 ...

  6. BAT 前端开发面经 —— 吐血总结 前端相关片段整理——持续更新 前端基础精简总结 Web Storage You don't know js

    BAT 前端开发面经 —— 吐血总结   目录 1. Tencent 2. 阿里 3. 百度 更好阅读,请移步这里 聊之前 最近暑期实习招聘已经开始,个人目前参加了阿里的内推及腾讯和百度的实习生招聘, ...

  7. 总结js常用函数和常用技巧（持续更新）

    学习和工作的过程中总结的干货,包括常用函数.常用js技巧.常用正则表达式.git笔记等.为刚接触前端的童鞋们提供一个简单的查询的途径,也以此来缅怀我的前端学习之路. PS:此文档,我会持续更新. Aj ...

  8. java视频教程 Java自学视频整理(持续更新中...)

    视频教程,马士兵java视频教程,java视频 1.Java基础视频 <张孝祥JAVA视频教程>完整版[RMVB](东西网) 历经5年锤炼(史上最适合初学者入门的Java基础视频)(传智播 ...

  9. ( 译、持续更新 ) JavaScript 上分小技巧(一)

    感谢好友破狼提供的这篇好文章,也感谢写这些知识点的作者们和将他们整理到一起的作者.这是github上的一篇文章,在这里本兽也就只做翻译,由于本兽英语水平和编程能力都不咋地,如有不好的地方也请多理解体谅 ...

随机推荐

  1. 深入了解"网上邻居"原理

    说到“网上邻居”,相信很多人都很熟悉.但是说起“网上邻居”的工作机制,可能大家就不太清楚了. 要说“网上邻居”的工作机制,不妨联系一下生活中的例子:比如我(A),要拜访一个远方的朋友(B),我要去他的 ...

  2. Ubuntu 下安装 Python 虚拟环境

    写在前面: 安装指南是在 Ubuntu 下面操作的.不同的 Linux 版本,安装指令不同.所以,该指南的某些指令对于像 CentOS 等非 Ubuntu 系统不适用. 为什么需要使用虚拟环境? 虚拟 ...

  3. Ternary Tree

    前一篇文章介绍了Trie树.它实现简单但空间效率低.假设要支持26个英文字母,每一个节点就要保存26个指针,因为节点数组中保存的空指针占用了太多内存.让我来看看Ternary Tree. When y ...

  4. 相似group by的分组计数功能

    之前同事发过一个语句,实现的功能比較简单,相似group by的分组计数功能,由于where条件有like,又无法用group by来实现. SELECT a.N0,b.N1,c.N2,d.N3,e. ...

  5. JS实现文件另存为

    JS实现文件另存为 //下载平面图 function downPlan() { var oPop = window.open(src, "", "width=1, hei ...

  6. jqXHR对象

    //$.ajax()返回的对象就是jqXHR对象 var jqXHR = $.ajax({ type:'post', url:'test.php', data:$('form').serialize( ...

  7. 创建VG

    创建VG smit mkvg Add a Volume Group Add a Scalable Volume Group   VOLUME GROUP name                    ...

  8. GIS学习 Geoserver使用添加、删除、查询地图中的POI

    geoserverwfs:Querywfs:Deletewfs:Updatewfs:Insert  在geoserver自定义的地图中通过geoserver wfs 查询,删除,添加相关的POI. 相 ...

  9. Android中使用HttpClient实现HTTP通信效果

    HTTP通信,这一案例在操作的时候遇到N多种种问题,是前面看过几个实例里面最麻烦的一个.由于没有系统的接触过JAVA,所以出了非常多错误,也无从下手解决,这里经过对错误的检索实现了HTTP通信,以做记 ...

  10. Scala入门到精通——第二十二节 高级类型 （一）

    作者:摇摆少年梦 视频地址:http://www.xuetuwuyou.com/course/12 本节主要内容 this.type使用 类型投影 结构类型 复合类型 1. this.type使用 c ...