jQuery学习笔记

最新推荐文章于 2024-11-10 15:10:09 发布

lixin327

最新推荐文章于 2024-11-10 15:10:09 发布

阅读量530

点赞数

文章标签： jquery javascript js

本文链接：https://blog.csdn.net/lixin3273110c/article/details/12321347

版权

本文详细介绍了JavaScript中处理DOM元素的关键概念，包括如何避免全局变量污染，利用window.onload和jQuery的ready方法进行页面加载事件处理，以及如何在jQuery中获取和操作元素的属性和值。此外，文章还展示了如何使用jQuery实现表单的GET和POST提交，包括序列化表单数据和处理响应的不同方法。

摘要由CSDN通过智能技术生成

1.若有一个jsp页面

<head>
	<script type="text/javascript">
		var t1 = document.getElementById("t1");	
		alert(t1);
	</script>
</head>

<body>
	<input id="t1" name="uname">
</body>

此时若执行的话会提示为null，因为执行顺序是从上到下依次进行。当执行js代码时，下边的t1还没执行，所以会提示为null。
解决方法有两个，一是把js代码写到body下边，另一种方法是无需改顺序，但要添加代码。如下：

<head>
	<script type="text/javascript">
		window.onload = function(){ //页面加载完毕时执行
			var t1 = document.getElementById("t1");	
			//alert(t1);//不推荐使用
			console.info(t1);//打印到控制台，推荐使用
		}		
	</script>
</head>

<body>
	<input id="t1" name="uname">
</body>

这样也能得到正确结果。

2.jquery中的ready方法会在dom对象构建完成后就会执行，而传统的onload则会在整个页面都加载完后才会执行。

基于ready()的方法有多种，推荐使用$(function(){//代码部分});
较复杂的有$(document).ready(function(){//代码部分});

3.若想取某个值，可以用

var $t1 = $("#t1");

对于变量的命名，在jquery中最好加“$”,为了与普通的js区分开，防止混淆。这等价于普通js中的

var t1 = document.getElementById("t1");

若想获取t1的值，在jquery中不能使用$t1.value;应该使用$t1.val()，使用 val()方法才行。
若实在是想使用value属性，可以转化为普通dom对象

①jquery对象转化为dom对象，jquery对象是一个数组对象

$t1[0].value;

或

$t1.get(0).value；

②dom对象也可以转化为jquery对象

var t1 = document.getElementById("t1");
var $t1 = $(t1);//注意此时没有双引号，即若想将dom对象转化为jquery对象，只需加一个$()即可
$t1.val();//也可取到值

这就实现了dom对象和jquery对象的转化。

4.jquery中attr方法使用

var r1 = $("#radio1").attr("checked")?"男":"女";
//这句话的意思是先取得radio1对象，若为checked,则为“男”,否则为“女”

<body>
	性别:<input id="radio1" checked="checked" type="radio" name="sex" value="男">男
	     <input id="radio2" type="radio" name="sex" value="女">女
</body>

5.对于jquery选择器，只需搞懂基本选择器即可，其它两种现用现查就行。
基本选择器中多用
#id:根据给定id匹配一个元素，结果是返回单个元素,
element:根据给定元素名匹配所有元素，返回一个元素集合，名称可以是标签的名
.class:根据给定的类匹配所有元素，返回一个元素集合
如：
id匹配元素，可以用$("#div1"),其中div1是某个div的id
名称匹配元素,可以用$("span"),会获取所有的span
也可以合并匹配的元素，如

$("#div1,.claOne")//这为并列的关系，只要符合的都会列出来注意只有一个双引号，中间用逗号隔开，逗号表示并列
$(".clsFrame span")//则为包含的关系，中间没有逗号只有空格，表示包含，只会获取class为clsFrame下的span
$("span")//则是获取所有的span

6. .css()是一个操作样式的方法，如$("id1").css("display","block");是将所选元素显示出来。

7.arguments是js中每一个方法都包含的属性，callee是调用函数本身。
arguments.callee则相当于递归，调用它自己。

8.选择器中过滤选择器也很常用，如

$("div[id]").show();//表示把含有id属性的div显示出来
$("div[title='A']").show();//把属性为title且值为A的div显示出来
$("div[title!='A']").show();//title属性值不为A的显示出来
$("div[title^='AB']").show();//title属性值以AB开头的显示出来
$("div[title$='c']").show();//title属性值是以c结尾的显示出来
$("div[title*='B']").show();//title属性值中包含B的显示出来
$("div[id^='div'][title*='B']").show();//多个选择器匹配，把div属性中id以div开头，并且title属性中包含B的显示出来

9.jquery中操作元素的属性用attr()方法。

attr(name);//是获取属性的值，相当于getAttribute()
attr(name,value);//设置属性的值，相当于setAttribute()

而要获取元素的值用val()方法

val();//获取元素的值
val(val);//设置元素的值

10.如何创建dom元素？
传统的需要用document.createElement();
而在jquery中，则简单许多。即在html语句添加$(),如

var myDiv = $("<div id='d1' title='createDiv'></div>")
$("body").append(myDiv);//这样才能显示出来

11.jquery遍历对象可以用each(callback),callback是一个函数，该函数内部有一个形参index，这为遍历元素的序号(index从0开始)。可以配合this使用。当然，函数名不一定叫callback，可以为如：

$("img").each(function(index){})

12.jquery在事件的写法上，与js不同。js需要加on，如onclick,onblur,onfocus等。而jquery中一律不要on

13.jquery提交表单，既可以用get，也可以用post,都有三个参数：1.url 2.参数 3.callback.当然，get和post方法都很少用，一般用jquery的ajax方法，它需要一个配选项options,即json
serialize()方法用来序列化表单值，创建url编码文本字符串
如有一个body，

<body>
	<form id="myform">
	用户名：<input name="uname"><br/>
	密码:<input name="pwd">
	</form>
</body>

①get方式提交表单

$.get("TestServlet?method=get",datas,function(data){
	alert(data);
});

②post方式提交表单

$.post("TestServlet?method=post",datas,function(data){
	alert(data);
});

③ajax方式提交,推荐使用

$.ajax({
	type:"post",
	url:"TestServlet?method=ajax",
	async:true,//异步
	cache:flse,//清除页面缓存
	data:{ // 提价的数据，可以为json	
		uname:$("#myform").find("input[name="uname"]").val(),	
		pwd:$("#myform").find("input[name="pwd"]").val()
	},
	//下边有两种数据接收类型的处理方式
	
	//⑴第一种
        dataType:"json",//设置从服务器接收的数据类型为json对象
	success:function(data){//回调函数，当响应成功时如何接收
		alert(data);//会正常提示
	}

	//⑵第二种
        dataType:"text",//设置从服务器接收的数据类型为文本
	success:function(data){
		alert(data);//此时alert会提示undefined,因为data不是对象
	}
	  

	//解决方法是将文本转换为json对象
	dataType:"text",	
	success:function(data){
		var data = $.parseJSON(data);
		alert(data);//此时才会正常显示
	}

});

14.jquery上传可以用插件Uploadify