Jquery
我们为什么需要jquery?
jquery是一个轻量级的js框架,他简化了javaScript的代码,并且丰富了js的操作,并且最重要的,他实现了页面二次请求aJax.这让jquery成了后台程序员必须掌握的技能,因为很多时候前台也好页面,我们需要自己书写js调用后台的接口.
语法
$(selector).事件(function(){
$(selector).效果();
})
一句话:当我们对一个/类元素做出某个动作时候,则对某些元素实现什么效果.
并且效果达成之后,还可以实现某种回调函数.
一.选择器(元素选择器/id选择器/类选择器/后代选择器/属性选择器/)
（1）直接选择某元素
①选中本身: $(this)
②元素选择器: $(“p”)
③id选择器: $(“#idNumber”)④类选择器: (“a[target!=’_blank’]”)选中a标签里target属性不等于_blank的a标签
⑥后代选择器: $(“p div”)
⑦序号选择器: $(“p:first”)
⑧组合选择器: $(“p.className”) 选中类名为className的p标签
$(“ul li:first”) 选中ul标签下的第一个li标签元素
（2）选择该元素有关的元素,例如父元素/子元素/同级元素.
①父级元素
1）直接父亲:$(“span”).parent();2）所有父级元素:$(“span”).parents();
3）具体某个父级元素:$(“span”).parents(“ul”);
4）某个父级元素范围:$(“span”).parentsUntil(“div”);
②子级元素
1）儿子元素:$(“div”).children();扫描二维码关注公众号，回复： 9628499 查看本文章
2）儿子元素中:$(“div”).children(“p.1”);
3）子孙元素中寻找:$(“div”).find(“span”);
③同胞元素
1）前后左右兄弟元素:$(“h2”).siblings(“p”);2）后:$(“h2”).next(); $(“h2”).nextAll();
3）前:$(“h2”).pre(); $(“h2”).preAll();
④选择序号
1）$(“div p”).first();2）$(“div p”).last();
3）$(“p”).eq(1);
二.事件(click/dbclick/mouse/key…)
（1）文档就绪事件
(这也是一种事件,只是这种事件比较特殊)
$(function(){
})
（2）鼠标事件
①Click
②Dbclick
③Mouseenter
④Mouseleave
⑤Hover
（3）键盘事件
①Keypress
②Keydown
③Keyup
（4）表单事件
①Submit
②Change
③Focus
④Blur
（5）文档窗口事件
①Load
②Unload
③Resize
④scroll
三.效果(hide/show/toggle/fadein/fadeout/slide…)
1．画面效果
（1）隐藏显示
①隐藏:$(“p”).hide();
②显示:$(“p”).show();
③切换状态:$(“p”).toggle()
（2）淡入淡出
①$("#div1").fadeIn(); /$("#div2").fadeIn("slow"); /$("#div3").fadeIn(3000);
②$("#div1").fadeOut(); /$("#div2").fadeOut("slow"); /$("#div3").fadeOut(3000);
③$("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000);
④$("#div1").fadeTo("slow",0.15);$("#div2").fadeTo("slow",0.4);$("#div3").fadeTo("slow",0.7)
（3）滑动
①$("#panel").slideDown();
②$("#panel").slideUp();
③$("#panel").slideToggle();
（4）动画
①绝对值:$("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' });
②相对值:$("div").animate({ left:'250px', height:'+=150px', width:'+=150px' });
③多个动画,实现队列
:div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
（5）效果的回调函数
①$("p").hide("slow",function(){ alert("段落现在被隐藏了"); });
2．增删元素
（1）捕获
①$("#test").text() 文本元素值
②$("#test").html() 文本元素内包括标签显示
③$("#test").val()); 表达元素的值
④$("#runoob").attr("href") 捕获属性
（2）设置属性
①$("#test1").text("Hello world!");
②$("#test2").html("<b>Hello world!</b>");
③$("#test3").val("RUNOOB");
④$("#runoob").attr({ "href" : "http://www.runoob.com/jquery", "title" : "jQuery 教程" });
⑤$("#runoob").attr("href", function(i,origValue){
return origValue + "/jquery";
});设置成功后回调
（3）添加
①$("p").append("追加文本");
②$("p").prepend("在开头追加文本");
③$("img").after("在后面添加文本");
④$("img").before("在前面添加文本");
⑤添加标签元素
var txt1="<p>文本。</p>"; // 使用 HTML 标签创建文本
var txt2=$("<p></p>").text("文本。"); // 使用 jQuery 创建文本
var txt3=document.createElement("p");
txt3.innerHTML="文本。"; // 使用 DOM 创建文本 text with DOM
$("body").append(txt1,txt2,txt3); // 追加新元素
（4）删除
①$("#div1").remove();
②$("#div1").empty();
（5）Css属性操作
①$("p").css("background-color");
②$("div").addClass("important");
③$("h1,h2,p").removeClass("blue");
④$("h1,h2,p").toggleClass("blue");
四.特殊效果:ajax(在事件发生之后,实施的特殊效果)
1.load()
(1)$("#div1").load("demo_test.txt");
(2)$("button").click(function(){
$("#div1").load("http://localhost:8080/test",function(data){
if(data=="success") alert("外部内容加载成功!");
if(data=="error") alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
2.ajax()
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
3.get()/post()
(1)$("button").click(function(){
$.get("http://localhost:8080/test",params,function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
});
