标签：
JQUERY
js框架
主要功能: 查找元素 操作 dom 处理事件 执行动画 开发ajax
jquery包装页面元素和dom 产生一个新的对象,jquery对象是一个数组,jquery对象和dom对象可以相互的转换
var $username=$(“#username”) //jquery对象 --> dom对象var username=$username[0];
或者$username.get(0)
var username= document.getElementById(“username”); //dom对象-->jquery对象 $(unsername)
1.获取元素
要操作dom必须先获得dom的jquery对象 jquery提供了9种选择器,用来获得dom
id选择器$(#id) 类选择器$(.myclass) 标签元素选择器 $(“div ”) $(input)
组合选择器 $( “body div”)
层级选择器 $(“#one+div”) 选择id为one 的下一个div元素
过滤选择器 $(“div:first”) 第一个div元素
内容过滤选择器 $(“div:parent”) 选取含有子元素的div
属性过滤选择器 $(“div[title=test]”) 选取 属性title 等于test 的div元素
子元素过滤选择器
表单过滤选择器 $( “input:checked”).size() 获取被选中框的个数
2.dom操作
查找节点
页面上的节点分为元素节点(九大选择器获得的是元素节点)
属性节点
文本节点
2.1创建节点
/通过jquery dom 创建<li id="tj" name="tianjin">天津</li>
创建元素节点
var $li=$(“<li></li>”);
设置节点属性
$li.attr(“id”,”tj”)
$li.attr(“name”,”tianjin”)
设置文本节点
$li.text(“天津”);
2.2添加节点 $(“#city”).append( $li); 内部元素结尾出添加节点
prepend内部元素开始出添加节点
在外部插入节点 有afterbefore 方法
2.3删除节点
remove()
2.4复制节点
clone()
2.5 替换节点
replaceWith replaceAll
2.6样式操作
$(“#id”).css(background","red"))
addClass()
removeClass()
2.7遍历元素 next()
2.8 包裹节点 wrap
3.处理事件
//页面加载完毕执行 window.onload=function(){
}
//页面加载完毕执行 $(function(){
})
$().ready(function(){
})
动态绑定事件
$(“#id”).bind(“mouserovee”,function(){})
解绑事件 unbind
//光标定位..
$("#keywords").focus();
//失去焦点的事件...
$("#keywords").blur(function(){
$(".message_area").hide(1000);
})
//键盘敲下去离开的事件
$("#keywords").bind("keyup",function(){
var keywords=$(this).val();
4.使用ajax
4.1 load()方法
//$.load()
/**
* 1:如果有参数的时候，则使用post 方式提交，
* 2：如果没有请求参数，则默认使用get 方式提交..
* load 方法它一般都是用于去载入一个静态的页面..
*/
$("div").load("ajax.html");
//$("div").load("../../loadServlet",{username:"高压"},function(){});
})
})
4.2 post() 方法
$("#postbutton").bind("click",function(){
//一般如果我们有请求参数，就使用post 方法..
$.post("../../postServlet",{},function(data){
//alert(data);
//<xml><province><city id="1">邯郸</city><city>邯郸</city></province></xml>
alert($(data).find(‘city‘).text());
})
})
})
4.3 get()
<title>getJSON 访问服务端，服务端返回的数据格式必须是json 的数据格式...</title>
script type="text/javascript" src="../../js/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function(){
$("#getJSON").click(function(){
$.getJSON("data.json",function(data){
//alert(data);
//alert(data);
//jQuery 在解析json 的时候要求key 上面需要有双引号...
var length=data.length;
alert(length);
});
})
})
<title>getScript 异步去加载服务端的一段脚本文件...</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../../js/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function(){
$("#getScript").click(function(){
$.getScript("../../js/test.js")
})
})
</script>
2.5ajax提交表单
标签：
原文地址：http://www.cnblogs.com/chuanqimessi/p/4774192.html
