前言
jQuery是个什么啊?是个框架。利用css选择器查找DOM对象,对其操作,操作样式或者增删方法等等。拥有强大的插件机制,可以使我们write less, do more。
细数家珍
(一)框架认识
示例:
//找到button按钮,注册事件
$("#verifyButton").click(function(){
//1.获取文本框的内容
var userName = $("#userName").val();
//2.将这个内容发送给服务器端
if(userName == ""){
alert("用户名不能为空");
}else{
$.get("http://127.0.0.1:8080/jQuery/UserVerify?userName=" + encodeURL(userName),null,function(response){
//3.接受服务器端返回的数据,填充到div中
$("#result").html(response);
})
}
});
1.$(.class).click(function(){})
给节点注册事件,选择节点用的是css选择器。
2.$(“.class”).val()
获取节点的属性。
3.$get(url,data,callback)
前台和服务器交互,前台把要调的后台地址和参数传过去,callback返回结果,返回结果是一个动作,要用function。$在这用做方法上。
4.$(.class).html(response)
给节点返回值的时候用html。
(二)表格
1.表格的html语法
<html>
<table>
<thead>
<tr>
<th>标题</th>
</tr>
</thead>
<tbody>
<tr>
<th>学号</th>
<th>姓名</th>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</html>
2.表格的css语法
css
table td{
border:1px solid black;
//修正单元格之间的边框不能合并
border-collapse:collapse;
}
3.页面加载的时候表格奇数行的背景色变化,往当前选中的单元格中添加文本框
//$(function(){})相当于 $(document).ready(function(){});
$(function(){
//奇数行颜色变化
$("tbody tr:even").css("background-color","#ECE9D8");
//找到所有学号的单元格
var numTd = $("tbody td:even");
//给这些单元格注册鼠标点击事件
numTd.click(function(){
//创建一个文本框
var inputObj = $("<input type = 'text'>");
//去掉文本框的边框
inputObj.css("border-width","0");
//找到当前鼠标点击的td,this对应的就是响应了click的那个td
var tdObj = $(this);
//讲文本框插入到td中
inputObj.appendTo(tdObj);
//文本框插入之后就被选中
inputObj.trigger("focus").trigger("select");
})
})
appendTo方法是把一个节点添加到另一个节点的子节点的最后。
trigger方法出发JavaScript的某个事件发生。
4.阻止事件传递
numId.click(function(){
//找到当前鼠标单击的td,this 对应的就是响应了click的那个ID
var tdobj = $(this);
if (tdobj.children("input").length > 0){
//当前td中有input,不执行click处理
return false;
}
});
如果td中有文本框就不响应td的click事件。
5.$的作用
(1)$(function(){}) document装载完成之后触发。里面直接放方法。
(2)里面放css选择器,找到css节点,包装成jQuery对象。
(3)里面放dom对象直接转换成jQuery对象。
(4)里面直接放html文本,会创建dom节点,并包装成jQuery对象。
(三)菜单
1.菜单语法
<ul>
<li class = "main">
<a>菜单项1</a>
<ul>
<li>菜单项11</li>
<li>菜单项12</li>
</ul>
</li>
</ul>
2.属性
css
.main{
//取消下划线
text-decoration:none;
//背景图片
background-image:url(../images/title.gif);
background-repeat:repeat-x;
background-position:3px center;
//清除默认的小圆点
list-style:none;
}
3. .main a 和 .main > a 的区别
前者选择了.main这个class元素下的所有a节点;后者只选择了.main的子节点中的a节点。
4.toggle 让显示的不显示,不显示的显示
//节点显示或隐藏可以设置速度
ulNode.show("slow");//fast normal
ulNode.hide();
//ulNode.slideToggle();
toggle的方法很强大,可以省去我们判断元素是显示还是隐藏状态,直接让显示的元素隐藏起来,隐藏的元素显示出来。使得实现动画效果更加方便快捷,也是do more, write less的体现。
小结
对jQuery的感觉就是html是难看的而且还是死的,jQuery使它变美了,并且动起来了。主要是对表格,菜单,标签页,下拉框还有弹出框等样式,弹出或消失的动画的设计。是一个很棒的框架,省了很多事,它封装了好多方法。