jQuery学习笔记

来源：互联网发布：威纶触摸屏软件下载编辑：程序博客网时间：2024/05/01 03:08

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:{ // 提价的数据，可以为jsonuname:$("#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