Jquery学习

时间：2016-07-13 17:45:55 阅读：357 评论：0 收藏：0 [点我收藏+]

标签：

Jquery学习
<input type="text" value="zhang" id="username" name="username" />
DOM获取
// var username = document.getElementById("username");
// alert(username.value);
jQuery获取(定义jQuery变量,在其前面增加"$".不加是可以的,但是不建议)
var $username = $("#username");
alert($username.val());
DOM转换成jQuery对象
//DOM获取
var username = document.getElementById("username");
//DOM对象转换成jQuery对象:$(DOM对象)
var $username = $(username);
alert($username.val());
jQuery对象转换成DOM对象
//jQuery获取
var $username = $("#username");
//jQuery对象转换成DOM对象
//1 jQuery对象是一个数组对象
//var username = $username[0];
//alert(username.value);
//2 jQuery提供了get(index)方法
var username = $username.get(0);
alert(username.value);
事件处理机制
//DOM对象
// var username = document.getElementById("username111");
//
// //缺少对象
// //alert(username.value);
//
// if(!username){ //不存在的值 == false
// alert("id不存在")
// }else{
// alert(username.value);
// }
//jQuery对象
var $username = $("#username111");

alert($username.val()); //undefind

//jQuery相对DOM来讲,具有相对完善的事件处理机制
9大选择器：
1.基本选择器
$(document).ready(function(){
//<input type="button" value="选择 id为 one 的元素." id="btn1"/>
$("#btn1").click(function(){
/*
* css():改变页面元素的样式
* * name:样式名称,对应css帮助文档中的内容
* * value:样式的值
*/
$("#one").css("background","yellow");
});

//<input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/>
$("#btn2").click(function(){
//jQuery表达式支持类似于批处理
$(".mini").css("background","yellow");
});

//<input type="button" value="选择元素名是 div 的所有元素." id="btn3"/>
$("#btn3").click(function(){
$("div").css("background","yellow");
});

//<input type="button" value="选择所有的元素." id="btn4"/>
$("#btn4").click(function(){
$("*").css("background","yellow");
});

//<input type="button" value="选择所有的span元素和id为two的元素." id="btn5"/>
$("#btn5").click(function(){
//多个选择器的用法:多个选择器之间利用","隔开(并集)
$("span,#two").css("background","yellow");
});

});
2.层次选择器
$(document).ready(function(){
//<input type="button" value="选择 body内的所有div元素." id="btn1"/>
$("#btn1").click(function(){
//祖先元素与后代元素的关系
$("body div").css("background","yellow");
});

//<input type="button" value="在body内,选择子元素是div的。" id="btn2"/>
$("#btn2").click(function(){
//父子元素的关系
$("body>div").css("background","yellow");
});

//<input type="button" value="选择 id为one 的下一个div元素." id="btn3"/>
$("#btn3").click(function(){
$("#one+div").css("background","yellow");
});

//<input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4"/>
$("#btn4").click(function(){
//指定元素的后面的所有兄弟元素
$("#two~div").css("background","yellow");
});

//<input type="button" value="选择 id为two的元素的所有div兄弟元素." id="btn5"/>
$("#btn5").click(function(){
//指定元素的所有兄弟元素
$("#two").siblings("div").css("background","yellow");
});
});
3.基本过滤选择器
$(document).ready(function(){
//<input type="button" value="选择第一个div元素." id="btn1"/>
$("#btn1").click(function(){
$("div:first").css("background","yellow");
});

//<input type="button" value="选择最后一个div元素." id="btn2"/>
$("#btn2").click(function(){
$("div:last").css("background","yellow");
});

//<input type="button" value="选择class不为one的所有div元素." id="btn3"/>
$("#btn3").click(function(){
//class不为one的元素,包含没有class属性的元素
$("div:not(‘.one‘)").css("background","yellow");
});

//<input type="button" value="选择索引值为偶数的div元素." id="btn4"/>
$("#btn4").click(function(){
$("div:even").css("background","yellow");
});

//<input type="button" value="选择索引值为奇数的div元素." id="btn5"/>
$("#btn5").click(function(){
$("div:odd").css("background","yellow");
});

//<input type="button" value="选择索引值等于3的元素." id="btn6"/>
$("#btn6").click(function(){
$("div:eq(3)").css("background","yellow");
});

//<input type="button" value="选择索引值大于3的元素." id="btn7"/>
$("#btn7").click(function(){
$("div:gt(3)").css("background","yellow");
});

//<input type="button" value="选择索引值小于3的元素." id="btn8"/>
$("#btn8").click(function(){
$("div:lt(3)").css("background","yellow");
});

//<input type="button" value="选择所有的标题元素." id="btn9"/>
$("#btn9").click(function(){
$(":header").css("background","yellow");
});

//<input type="button" value="选择当前正在执行动画的所有元素." id="btn10"/>
function move(){
$("#mover").slideToggle("slow",move);
}
move();

$("#btn10").click(function(){
$(":animated").css("background","yellow");
});

});
4.内容过滤选择器
$(document).ready(function(){
//<input type="button" value="选取含有文本“di”的div元素." id="btn1"/>
$("#btn1").click(function(){
$("div:contains(‘di‘)").css("background","yellow");
});

//<input type="button" value="选取不包含子元素(或者文本元素)的div空元素." id="btn2"/>
$("#btn2").click(function(){
$("div:empty").css("background","yellow");
});

//<input type="button" value="选取含有class为mini元素的div元素." id="btn3"/>
$("#btn3").click(function(){
$("div:has(‘.mini‘)").css("background","yellow");
});

//<input type="button" value="选取含有子元素(或者文本元素)的div元素." id="btn4"/>
$("#btn4").click(function(){
$("div:parent").css("background","yellow");
});

});
5.可见性过滤选择器
$(document).ready(function(){
//<input type="button" value=" 选取所有可见的div元素" id="b1"/>
$("#b1").click(function(){
$("div:visible").css("background","yellow");
});

//<input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来" id="b2"/>
$("#b2").click(function(){
$("div:hidden").show(3000).css("background","yellow");
});

//<input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b3"/>
$("#b3").click(function(){
/*
* 
<input type="hidden" value="hidden_1">
<input type="hidden" value="hidden_2">
<input type="hidden" value="hidden_3">
<input type="hidden" value="hidden_4">
*/
var $inputs = $("input:hidden");

// for(var i=0;i<$inputs.length;i++){
// var input = $inputs[i];
//
// alert(input.value);
// }
/*
* jQuery中的隐式迭代:each(callback)
* * callback:function(index,domEle){}
* * index:索引值
* * domEle:DOM对象(取到的是对应的页面元素)
*/
$inputs.each(function(index,domEle){
alert(domEle.value);
});

});

//<input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b4"/>
$("#b4").click(function(){
/*
* 
<input type="hidden" value="hidden_1">
<input type="hidden" value="hidden_2">
<input type="hidden" value="hidden_3">
<input type="hidden" value="hidden_4">
*/
var $inputs = $("input:hidden");

/*
* $.each(object,callback)
* * object:需要例遍的对象或数组。
* * callback:function(index,domEle){}
* * index:索引值
* * domEle:DOM对象(取到的是对应的页面元素)
*/
$.each($inputs,function(index,domEle){
//alert(domEle.value);
//alert($(domEle).val());
//alert(this.value);
alert($(this).val());
});

});

});
6.属性选择器
$(document).ready(function(){
//<input type="button" value="选取含有属性title 的div元素." id="btn1"/>
$("#btn1").click(function(){
$("div[title]").css("background","yellow");
});

//<input type="button" value="选取属性title值等于“test”的div元素." id="btn2"/>
$("#btn2").click(function(){
$("div[title=‘test‘]").css("background","yellow");
});

//<input type="button" value="选取属性title值不等于“test”的div元素(没有属性title的也将被选中)." id="btn3"/>
$("#btn3").click(function(){
$("div[title!=‘test‘]").css("background","yellow");
});

//<input type="button" value="选取属性title值以“te”开始的div元素." id="btn4"/>
$("#btn4").click(function(){
$("div[title^=‘te‘]").css("background","yellow");
});

//<input type="button" value="选取属性title值以“est”结束的div元素." id="btn5"/>
$("#btn5").click(function(){
$("div[title$=‘est‘]").css("background","yellow");
});

//<input type="button" value="选取属性title值含有“es”的div元素." id="btn6"/>
$("#btn6").click(function(){
$("div[title*=‘es‘]").css("background","yellow");
});

//<input type="button" value="组合属性选择器,首先选取有属性id的div元素，然后在结果中选取属性title值含有“es”的元素." id="btn7"/>
$("#btn7").click(function(){
//多个属性过滤选择器并列使用,不用任何内容分割.(交集)
$("div[id][title*=‘es‘]").css("background","yellow");
});

});
7.子元素过滤选择器
$(document).ready(function(){
//<input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn1"/>
$("#btn1").click(function(){
/*
* 子元素过滤选择器的特殊用法:
* * 必须要在其前面,增加空格
* * 子元素过滤选择器是从"1"开始
*/
$("div[class=one] :nth-child(2)").css("background","yellow");
});

//<input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn2"/>
$("#btn2").click(function(){
$("div[class=one] :first-child").css("background","yellow");
});

//<input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3"/>
$("#btn3").click(function(){
$("div[class=one] :last-child").css("background","yellow");
});

//<input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btn4"/>
$("#btn4").click(function(){
$("div[class=one] :only-child").css("background","yellow");
});

});
8.表单对象属性过滤选择器
$(document).ready(function(){
//<button id="btn1">对表单内可用input 赋值操作.</button>
$("#btn1").click(function(){
/*
* 可用元素：<input name="add" value="可用文本框"/> <br/>
不可用元素：<input name="email" disabled="disabled" value="不可用文本框"/><br/>
可用元素： <input name="che" value="可用文本框" /><br/>
不可用元素：<input name="name" disabled="disabled" value="不可用文本框"/><br/>
*/
/*
* val():设置与获取
* * 不传参数:获取
* * 传递参数:设置
*/
$("input:enabled").val("xxxxx");

});

//<button id="btn2">对表单内不可用input 赋值操作.</button>
$("#btn2").click(function(){
$("input:disabled").val("xxxxx");
});

//<button id="btn3">获取多选框选中的个数.</button>
$("#btn3").click(function(){
alert($("input[name=newsletter]:checked").length);
});

//<button id="btn4">获取下拉框选中的内容.</button>
$("#btn4").click(function(){
$("select>option:selected").each(function(index,domEle){
alert($(domEle).text());
});
});

});
9.表单选择器
$(document).ready(function(){
var $alltext = $("#form1 :text");
var $allpassword= $("#form1 :password");
var $allradio= $("#form1 :radio");
var $allcheckbox= $("#form1 :checkbox");

var $allsubmit= $("#form1 :submit");
var $allimage= $("#form1 :image");
var $allreset= $("#form1 :reset");
var $allbutton= $("#form1 :button"); // <input type=button /> 和 <button ></button>都可以匹配
var $allfile= $("#form1 :file");
var $allhidden= $("#form1 :hidden"); // <input type="hidden" />和<div style="display:none">test</div>都可以匹配.
var $allselect = $("#form1 select");
var $alltextarea = $("#form1 textarea");

var $AllInputs = $("#form1 :input");
var $inputs = $("#form1 input");

$("div").append(" 有" + $alltext.length + " 个（ :text 元素）<br/>")
.append(" 有" + $allpassword.length + " 个（ :password 元素）<br/>")
.append(" 有" + $allradio.length + " 个（ :radio 元素）<br/>")
.append(" 有" + $allcheckbox.length + " 个（ :checkbox 元素）<br/>")
.append(" 有" + $allsubmit.length + " 个（ :submit 元素）<br/>")
.append(" 有" + $allimage.length + " 个（ :image 元素）<br/>")
.append(" 有" + $allreset.length + " 个（ :reset 元素）<br/>")
.append(" 有" + $allbutton.length + " 个（ :button 元素）<br/>")
.append(" 有" + $allfile.length + " 个（ :file 元素）<br/>")
.append(" 有" + $allhidden.length + " 个（ :hidden 元素）<br/>")
.append(" 有" + $allselect.length + " 个（ select 元素）<br/>")
.append(" 有" + $alltextarea.length + " 个（ textarea 元素）<br/>")
.append(" 表单有 " + $inputs.length + " 个（input）元素。<br/>")
.append(" 总共有 " + $AllInputs.length + " 个(:input)元素。<br/>")
.css("color", "red")

$("form").submit(function () { return false; }); // return false;不能提交.

});
//]]>
</script>
</head>
<body>
<form id="form1" action="#">
<input type="button" value="Button"/><br/>
<input type="checkbox" name="c"/>1<input type="checkbox" name="c"/>2<input type="checkbox" name="c"/>3<br/>
<input type="file" /><br/>
<input type="hidden" /><div style="display:none">test</div><br/>
<input type="image" /><br/>
<input type="password" /><br/>
<input type="radio" name="a"/>1<input type="radio" name="a"/>2<br/>
<input type="reset" /><br/>
<input type="submit" value="提交"/><br/>
<input type="text" /><br/>
<select><option>Option</option></select><br/>
<textarea rows="5" cols="20"></textarea><br/>
<button>Button</button><br/>
</form>

<div></div>

</body>
DOM操作
01_查找节点
// //获取北京节点的文本内容
// alert($("#bj").text());
//
// //设置北京节点的文本内容为北京
// $("#bj").text("北京");
// alert($("#bj").text());

//获取北京节点的name属性值
alert($("#bj").attr("name"));

//设置北京节点的name属性值
$("#bj").attr("name","beijing");
alert($("#bj").attr("name"));

//删除北京节点的name属性
$("#bj").removeAttr("name");
alert($("#bj").attr("name"));
02_创建节点
//在city下增加<li id="tj" name="tianjin">天津</li>节点
//1 创建<li id="tj" name="tianjin">天津</li>
// //1 创建<li></li>
// var $li = $("<li></li>"); //创建元素节点:$(HTML代码) 标签的闭合
//
// //2 设置属性
// $li.attr("id","tj");
// $li.attr("name","tianjin");
//
// //3 设置文本内容
// $li.text("天津");

var $li = $("<li id=‘tj‘ name=‘tianjin‘>天津</li>");

//2 获取id="city"标签
var $city = $("#city");

//3 增加
$city.append($li);
03_内部插入节点
//* append(content) :向每个匹配的元素的内部的结尾处追加内容
//append后面的元素插入到append前面的元素的后面
// $("#bj").append($("#fk"));

//* appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处
//appendTo前面的元素插入到appendTo后面的元素的后面
// $("#bj").appendTo($("#fk"));

//* prepend(content):向每个匹配的元素的内部的开始处插入内容
//prepend后面的元素插入到prepend前面的元素的前面
$("#bj").prepend($("#fk"));

//* prependTo(content) :将每个匹配的元素插入到指定的元素内部的开始处
//prependTo前面的元素插入到prependTo后面的元素的前面
// $("#bj").prependTo($("#fk"));
04_外部插入节点
<body>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjin">天津</li>
<li id="cq" name="chongqing">重庆</li>
</ul>

<p id="p3">I would like to say: p3</p>

<p id="p2">I would like to say: p2</p>

<p id="p1">I would like to say: p1</p>

</body>
<script type="text/javascript">
//* after(content) :在每个匹配的元素之后插入内容
//after后面的元素插入到after前面的元素的后面
// $("#bj").after($("#p2"));

//* before(content):在每个匹配的元素之前插入内容
//before后面等元素插入到before前面的元素的前面
$("#bj").before($("#p2"));

//* insertAfter(content):把所有匹配的元素插入到另一个、指定的元素集合的后面
//insertAfter前面的元素插入到insertAfter后面的元素的后面
// $("#bj").insertAfter($("#p2"));

//* insertBefore(content) :把所有匹配的元素插入到另一个、指定的元素元素集合的前面
//insertBefore前面的元素插入到insertBefore后面的元素的前面
// $("#bj").insertBefore($("#p2"));
</script>
05_删除节点
//删除<li id="bj" name="beijing">北京</li>
$("#bj").remove();

//删除所有的子节点清空元素中的所有后代节点(不包含属性节点).
$("#tj").empty();
06_复制节点
//button增加事件
$("button").click(function(){
alert("button");
});

//克隆button 追加到p上 ,但事件不克隆
//clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为
$("button").clone(true).appendTo($("p"));
07_替换节点
//$("button")用 <p>tttttttt</P>替换
$("button").replaceWith($("<p>tttttttt</P>"));

// p 用 <button>保存</button> 替换
$("<button>保存</button>").replaceAll($("p"));
08_样式操作
//<input type="button" value="采用属性增加样式" id="b1"/>
$("#b1").click(function(){
$("#mover").attr("class","one");
});

//<input type="button" value=" addClass" id="b2"/>
$("#b2").click(function(){
$("#mover").addClass("mini");
});

//<input type="button" value="removeClass" id="b3"/>
$("#b3").click(function(){
/*
* removeClass():
* * 不传参数:删除所有样式
* * 传递参数:删除指定样式
*/
$("#mover").removeClass();
});

//<input type="button" value=" 切换样式" id="b4"/>
$("#b4").click(function(){
//切换样式:是在没有样式与指定样式之间切换
$("#mover").toggleClass("one");
});

//<input type="button" value=" hasClass" id="b5"/>
$("#b5").click(function(){
//hasClass():判断是否含有某个指定样式
alert($("#mover").hasClass("one"));
});
09_遍历节点
//获取id="city"标签下的所有子节点的个数
//alert($("#city").children().length);

//获取天津节点的父节点
//alert($("#tj").parent().attr("id"));

//获取天津节点的上一个兄弟节点和下一个兄弟节点
// alert($("#tj").prev().attr("name"));
// alert($("#tj").next().attr("name"));
//
// alert($("#tj").siblings().length);

alert($("#city").find("li").length);
10_包裹节点
//jQuery代码如下：
$("strong").wrap("<b></b>");

/*
* 得到的结果如下
* <b><strong title="jQuery">jQuery</strong></b>
* <b><strong title="jQuery">jQuery</strong></b>
*/

//jQuery代码如下：
$("strong").wrapAll("<b></b>");

/*
* 得到的结果如下
* <b>
* <strong title="jQuery">jQuery</strong>
* <strong title="jQuery">jQuery</strong>
* </b>
*/

//jQuery代码如下：
$("strong"). wrapInner("<b></b>");

/*
* 得到的结果如下
* <strong title="jQuery"><b>jQuery</b></strong>
* <strong title="jQuery"><b>jQuery</b></strong>
*/
事件：jQuery中的特殊事件
* ready事件
* $(document).ready(function(){}) == window.onload = function(){}
* $().ready(function(){}) == $(function(){})
* bind()与unbind()：
* bind()：绑定事件
* 绑定单个事件
* 绑定多个事件
* 一共有以下这些：blur, focus, focusin, focusout, load, resize,
scroll, unload, click, dblclick, mousedown, mouseup, mousemove,
mouseover, mouseout, mouseenter, mouseleave, change, select,
submit, keydown, keypress, keyup, error 。
* unbind()：解绑事件
* 常规事件与绑定事件的区别？
* 常规事件：为页面元素绑定具体事件
* 为什么要需要绑定事件的方法来处理？实现或太效果
* 事件切换：
* hover()
* toggle()
事件绑定
//点击h5标签,单次时:显示答案;双次时,隐藏答案
// $("h5").click(function(){
// if($("div[class=content]").is(":hidden")){
// $("div[class=content]").show();
// }else{
// $("div[class=content]").hide();
// }
// });

// $("#start").click(function(){
// /*
// * bind(type,data,fn)绑定事件
// * * type:指定要绑定的事件名称
// * * data:作为event.data属性值传递给事件对象的额外数据对象
// * * fn:回调函数
// */
// $("h5").bind("click",function(){
// if($("div[class=content]").is(":hidden")){
// $("div[class=content]").show();
// }else{
// $("div[class=content]").hide();
// }
// });
//
// });
//
// $("#stop").click(function(){
// /*
// * unbind(type,fn):解绑事件
// * * type:指定要解绑的事件名称
// * * fn:回调函数
// */
// $("h5").unbind();
//
// });

// $("h5").mouseover(function(){
// $("div[class=content]").show();
// }).mouseout(function(){
// $("div[class=content]").hide();
// });

$("#start").click(function(){
//绑定多个事件:多个事件之间利用空格隔开
$("h5").bind("mouseover mouseout",function(){
if($("div[class=content]").is(":hidden")){
$("div[class=content]").show();
}else{
$("div[class=content]").hide();
}
});
});

$("#stop").click(function(){
/*
* unbind():
* * 默认为空:解绑所有事件
* * 指定一个事件时:解绑指定的一个事件
* * 指定多个事件时:解绑指定的多个事件
*/
$("h5").unbind("mouseover mouseout");
});
/*
* hover()的作用:
* * 做页面切换的特效
* * 替代mouseover与mouseout事件
*/
$("h5").hover(function(){
$("div[class=content]").show();
},function(){
$("div[class=content]").hide();
});
$("h5").toggle(function(){
$("h5").css("background","red");
$("div[class=content]").show();
},function(){
$("h5").css("background","green");
$("div[class=content]").hide();
},function(){
$("h5").css("background","blue");
$("div[class=content]").show();
},function(){
$("h5").css("background","yellow");
$("div[class=content]").hide();
});

Ajax：
load()方法
<script language="JavaScript">
$(function(){
$("#b1").click(function(){
/*
* load(url,data,callback)
* * url:请求路径
* * data:请求参数,格式一定是key/value格式(JSON:1)key/value;2)Array)
* * callback:回调函数,function(data,textStatus,XMLHttpRequest){}
* * data:代表请求返回内容
* * textStatus:代表请求状态,值可能为: succuss, error, notmodify, timeout 4 种
* * XMLHttpRequest对象
*
* load()方法不能自定义请求类型:
* * 当不发送请求数据时,请求类型就是GET方式
* * 当发送了请求数据时,请求类型就是POST方式
* * load()方法的请求类型由是否发送请求数据来决定
*/
var json = {
username : $("#username").val(),
psw : $("#psw").val()
}

$("#one").load("load.jsp",json,function(data,textStatus,XMLHttpRequest){
alert(data);
});
});
});
</script>
get/post方式：
<script language="JavaScript">
$(function(){
$("#b1").click(function(){
// /*
// * $.get(url,data,callback,type)
// * * url:请求路径
// * * data:请求参数,格式一定是key/value
// * * callback:回调函数,function(data,textStatus){}
// * * data:返回的请求内容,可以是 XML 文档, JSON 文件, HTML 片段等
// * * textStatus:返回请求状态,succuss, error, notmodify, timeout 4 种
// * * 返回值:XMLHttpRequest
// * * type:返回内容格式，xml, html, script, json, text, _default。
// * * 通过回调函数的底层代码,自动识别数据格式(建议设置type参数)
// * * 底层代码自动识别只有HTML\XML
// * * JSON格式的数据内容,没有被回调函数的底层代码识别出来(服务器端封装JSON格式出现问题)
// * * 利用默认情况将JSON数据接收成HTML格式,利用eval()函数进行转换
// * * 肯定可以利用type参数设置成"json",直接接收到JSON格式的数据
// *
// * $.get()方法无论是否发送请求数据,请求类型就是GET方式
// */
// var json = {
// username : $("#username").val(),
// psw : $("#psw").val()
// }
//
// $.get("get.jsp",json,function(data,textStatus){
// console.info(data);
// var json = eval("("+data+")");
// console.info(json);
// });

/*
* $.post(url,data,callback,type)
* * url:请求路径
* * data:请求参数,格式一定是key/value
* * callback:回调函数,function(data,textStatus){}
* * data:返回的请求内容,可以是 XML 文档, JSON 文件, HTML 片段等
* * textStatus:返回请求状态,succuss, error, notmodify, timeout 4 种
* * 返回值:XMLHttpRequest
* * type:返回内容格式，xml, html, script, json, text, _default。
* * 通过回调函数的底层代码,自动识别数据格式(建议设置type参数)
* * 底层代码自动识别只有HTML\XML
* * JSON格式的数据内容,没有被回调函数的底层代码识别出来(服务器端封装JSON格式出现问题)
* * 利用默认情况将JSON数据接收成HTML格式,利用eval()函数进行转换
* * 肯定可以利用type参数设置成"json",直接接收到JSON格式的数据
*
* $.post()方法无论是否发送请求数据,请求类型就是POST方式
*/
//手工构建key/value格式的数据
// var json = {
// username : $("#username").val(),
// psw : $("#psw").val()
// }

/*
* 自动构建key/value格式的数据(序列化元素)
* JSON格式:1)key/value;2)Array
* * key/value:JSON字符串 - serialize()
* * Array:JSON对象 - serializeArray()
*/
var json = $("#form1").serialize();

// $.post("get.jsp",json,function(data,textStatus){
// console.info(data);
// var json = eval("("+data+")"); 先写双引号，再写++
// console.info(json);
// });

/*
* $.ajax(options)
*/
$.ajax({
url:"get.jsp",
type:"get",
async:true,
data:json,
success:function(data,textStatus){
alert(data);
},
error:function(XMLHttpRequest,textStatus,errorThrown){
alert(textStatus);
}
});
});
});
</script>
getJson方式：
<script type="text/javascript">
$(function(){
$(‘#send‘).click(function() {
$.getJSON("test.json",function(data){
$(‘#resText‘).empty();
var html = ‘‘;
$.each( data , function(commentIndex, comment) {
html += ‘<div class="comment"><h6>‘ + comment[‘username‘] + ‘:</h6><p class="para">‘ + comment[‘content‘] + ‘</p></div>‘;

oDiv.style.top = ev.clientY + ‘px‘;
var scrollTop = document.documentElement.scrollTop || do})
$(‘#resText‘).html(html);
});
})
})
</script>

event是一个全局对象，事件调用才有值
var ev = ev || event;
oDiv.style.left = ev.clientX + ‘px‘; 可视区域cument.body.scrollTop; 头部分距离

****传递参数时，对对象的封装 var dd = JSON.stringify(objj);

is用法
// 是否是隐藏的
$(‘#test‘).is(‘:visible‘);
// 判断input元素是否被选中
$(‘input[name=chkNoChecked]‘).is(‘:checked‘)；
// 是否是第一个子元素
$(this).is(":first-child");
// 是否包含.blue,.red的class
$(this).is(".blue,.red");
// 文本中是否包含Peter这个词
$(this).is(":contains(‘Peter‘)");

find用法
$(".div_tools").find(".tb_TypeInfo").is(‘:hidden‘)

自己写框架： Vquery
1.面向对象思想
2.jquery模拟
3.绑定，样式比较熟悉

$就是一个函数
function VQuery(vArgs){
this.elements=[];
switch(typeof vArgs){
case ‘function‘:
//window.onload = vArgs;
myAddEvent(window,‘load‘,vArgs);
break;
case ‘string‘:
switch(vArgs.charAt(0)){
case ‘#‘:
var obj = document.getElementById(vArgs.substring(1));
this.elements.push(obj);
break;
case ‘.‘:
break;
default:

}

break;
}
}

Jquery学习

标签：

原文地址：http://blog.csdn.net/wt346326775/article/details/51882028

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行