您的位置：首页 > Web前端 > JQuery

jQuery学习笔记

2013-10-05 22:29 169 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航