jQuery小结-CSDN博客

本文链接：https://blog.csdn.net/chinasoftosg/article/details/7901059

jquery能做什么：
取得页面中的元素
修改页面的外观
改变页面的内容
响应用户的页面操作
为页面添加动态效果
无需刷新页面即可从服务器获取信息
简化常见的JavaScript任务

jQuery的特色：
利用CSS的优势
支持扩展
抽象浏览器不一致性
总是面向集合
将多行操作集于一行

jQuery的调用
<head>
<script type="text/javascript" src="jquery-1.5.1.min.js"/>
</head>

$(function(){
});

$(selector).action()
$(this).hide() //隐藏当前元素
$("p").hide()   //隐藏所有<p>元素
$("p.test").hide() //隐藏所有class="test"的<p>标签
$("#test").hide() //隐藏所有id="test"的元素

jQuery对象于DOM对象
DOM对象：
document.getElementById("testId");
document.getElementsByName();
document.getElementsByTagName();
content.innerHTML="新内容";

jQuery对象
元素选择器
$("#testId") //选取页面中id为testId的元素
$("p") //选取页面中的<p>元素
$(".classTest") //选取页面中样式为classTest的元素
jQuery对象.html("新内容");

<div class="content">
<div class="box"></div>
</div>
选择器层级关系
.content.box{}   //CSS中的层级选择器
$(".content.box") //jQuery中的层级选择器

<form name="regForm" method="post" action="">
<input type="test" name="username"/>
</form>
属性选择器
$("form[name='regForm']")
$("input[name='username']")
$("form[name='regForm']input[name='username']")

<div id="topdiv">
   <table id="table1">
      <tr id="tr1"><td>123</td><td>456</td></tr>
   </table>
   <table id="table2"></table>
   <table id="table3"></table>
   <table id="table4"></table>
   <div id="d5">
      <table id="table5"></table>
   </div>
</div>

$("#table4").prev()，返回上一个兄弟节点，不是所有的兄弟节点 table3
$("#table4").prevAll()，返回所有之前的兄弟节点 table1,2,3
$("#table2").next(),返回下一个兄弟节点，不是所有的兄弟节点   table3
$("#table2").nextAll()，返回所有之后的兄弟节点 table3,4,5
$("#topdiv").children("table") 不包含table5 table1,2,3,4
$("#topdiv").find("table")   包含topdiv下的所有table，12345都包含
$("#topdiv").find("table:first")   包含topdiv下的所有table中的第一个，table1
$("#topdiv").find("table:last")   包含topdiv下的所有table中的最后一个，table5
$("#tr1").parent()   直接父亲节点，只包含table1
$("#tr1").parents() 查找所有祖先元素，不限于父元素包含table1,2,3,4,d5和topdiv
$("#table2").siblings("td")   返回兄弟姐妹节点，不分前后 table1,3,4,d5

jQuery属性与内容的操作
获取属性值attr(name)
修改属性值attr(key,value)
删除属性removeAttr(name)
<a id="link" href="http://www.baidu.com" target="blank">百度</a>
$("#link").attr("href") //取得的值是http://www.baidu.com
$("#link").attr("target") //取得的值是blank
$("#link").attr("href","http://www.hao123.com")
$("#link").removeAttr("target")

获取样式css(name)
修改样式css(name,value)
修改多个样式css({key1:value1,key2:value2,key3:value3})
<style type="test/css">
#demo{width:200px;height:200px;background-color: red;}
</style>
<div id="demo">this is a demo</div>
$(function(){
alert($('#demo').css('background-color'));
});
修改单个样式
$(function(){
$('#demo').css('background-color','#0c0');
$('#demo').css('height','100px');
});
$(function(){
$('#demo').css('background-color','#0c0')
.css('height','100px');
});
修改多个样式
$(function(){
$('#demo').css({'background-color':'#0c0','height':'100px'});
});

操作类样式
添加类样式addClass(class)
移除类样式removeClass(class)
$("#demo").addClass("current");
$("#demo").addClass("bold large");
$("#demo").removeClass("large");
$("#demo").removeClass("bold").removeClass("large");
$("#demo").removeClass("bold large");
<style type="test/css">
.bold{font-weight:bold}
.large{font-size:30px}
</style>
<div id="demo" class="bold large"></div>

内容操作
获取或设置内部html html()、html(val)
获取或设置对象的值 val()、val(val)
追加内容 append(content)
删除节点 remove()
<div id="demo"><p>好好学习</p></div>
<input id="userName" type="test" name="username" value="小子"/>
$("#demo").html("<p>好好学习,天天向上</p>");
$("#userName").val();
$("input[name='username']").val();
$("#demo").append("<p>天天向上</p>");
$("#demo p").remove();

jQuery事件
绑定事件bind(type,fn)
触发事件trigger(type)
绑定活动事件live(type,fn) 和bind一样
<form id="regForm">
<input id="btn" type="button" value="猛击"/>
</form>
$(function(){
$("#btn").bind("click",function(){
$("#regForm").trigger("submit");
//$("#regForm").submit();
})
})
除了submit()之外还有click()、click(fn)、blur()等等

jQuery效果
speed:动画时长（毫秒）、slow、fast、normal
显示、隐藏   显示show(speed[,callback])   隐藏hide(speed[,callback])
滑动    向上滑动 slideUp(speed[,callback])   向下滑动slideDown(speed[,callback])
淡入淡出淡入效果fadeIn(speed[,callback])   淡出效果fadeOut(speed[,callback])
自定义动画 animate(params[,duration][,callback])    params:{key1:value1,key2:value2,key3:value3}
$("#demo").show();
$("#demo").show("fast");
$("#demo").slideUp("fast");
$("#demo").show("fast",function(){
alert("动画执行完毕！");});
$("#demo").animate({"width":"200px","height":"200px","font-size":"70px"},1000);

Ajax请求
get请求$.get(url[,data][,callback])        data:{key1:value1,key2:value2,key3:value3}
post请求$.post(url[,data][,callback])
$.ajax({
             url:"/aif/user/lookForPwd.json",
             data:{loginName:name,loginPhone:phoneNum},
             type:"post",
             dataType:"json",
             success:function(data){
                  $("#userPwd").html(data);
                  $("#userPwdShow").show();
             }   ,
             error:function(data){
                 alert(data.responseText);
             }
         })   ;

知识拓展
$.ajax([options])
load(url[,data][,callback])
$.getJSON(url[,data][,callback])
$.getScript(url[,data][,callback])

循环：
js中：
for(var j = 0; j < parentLevel-1; j++)
{
    alert(j);
}
jquery中：
$(".class").each(function(){
     $(this).html();
});