JQuery的一些基本功能代码(CH1&2)

一,JQuery文件的导入:
使用的时候可不能忘记我们需要JQuery的内核包:jquery-1.XXX.XX.js
不要忘记在要是用的页面中导入该函数库,导入方法如下:
<script type="text/javascript" src="[这里是JQuery.js文件的位置]"></script>
<script type="text/javascript">
//这个里面写JS代码和JQuery代码
</script>
这里附上一句JQuery的宗旨:Write less but do more!
二,JQuery基本的使用:
a)在使用之前我们要知道JQuery中开都都是以"{1}quot;开头的,这个和EL表达式有点像!
b)JQuery中的各种函数的使用
1.$(document).ready(function(){
//JQuery代码
});
这个代码的缩写是:
$(function(){
//JQuery代码
});
以上这两个函数的功能与JS中的document.onload();功能类似,但是又不完全相同!
不同点:JS中的onload是在整个网页内容全部加载完毕后才执行,而Jquery则是在DOM结构绘制完毕后即可执行
还有值得注意的是,JQuery中的事件名与JS中基本一致,但是要去掉JS事件名中开头的"on",
JSJQuery
onclickclick
onblurblur
onmouseovermouseover
onmouseoutmouseout
on........
2.假如我们就以一个id为theBtn的按钮和一个样式为theStyle的元素来进行讲解吧!
$(function(){
//当那个按钮按下时就会执行一个函数
$("#theBtn").click(function(){
//这里我们可以对这个DIV进行各种动画效果测试,详情见参考手册
//--------------------------------------------------
//表示立即隐藏
$(".theStyle").hide();
//在500毫秒之内隐藏
$(".theStyle").hide(500);
$(".theStyle").show([这里也可以有整形参数哦,功能同上]);
//这里还有一个很不错的方法toggle(),就是判断状态并进行相反的状态,显示->不显示->显示->....
$(".theStyle").toggle([毫秒数(可以要可以不要)]);
//--------------------------------------------------
//表示该元素在500毫秒之内会吧长度调整到500px
$(".theStyle").animate({width:"500px"},500);
//同时这个也支持方法链
$(".theStyle").animate({width:"500px"},500).animate({height:"500px"},500).animate(...);
//个人觉得为了代码的可读性和美观,可以写成这种:
$(".theStyle")
.animate({width:"500px"},500)
.animate({height:"500px",500})
.animate({paddingLeft:"50px"},500)
.animate(...);
;
//--------------------------------------------------
//当然这里在列出常用的几种:
$(".theStyle")
//改变样式相当于JS中的XXX.style="";
.css("border","solid 1px lightBlue")
.css("color","red")
.css(....)
;
//改变其中的文本:
.html("<a href='#'>check here</a>");
.text("How you doing?");
//注意这里如果.html()与.text()中没有参数时这个方法用于得到里面的值!
.attr("属性名","属性值");
.attr("属性名");
//这里的attr("属性名")是指得到该属性值,而attr("属性名","属性值")则是得到该属性的值!
.val();
//注意这个是表示用于获取表单注意是表单中的元素的值
});
});
3.再来一个比较有意思的:
//这个方法把mouseover与mouseout合为了一个:hover(funciton(){},funciton(){});
如:
$(function(){
$("#theId").hover(function(){
//mouserover事件
},function(){
//mouseout事件
});
});
c)JQuery中对象的转换:
DOM对象到JQuery对象:var [JQuery对象]=$("DOM对象"),这样就转换过去了!常见的有:$(this);
JQuery对象到DOM对象:var [DOM对象]=$("JQuery对象")[0];
这样我们通常可以用来判断该元素是否存在!
在JS中:if(document.getElementById("DOMObj"))
而在JQuery中我们就可以使用两种方法:
if($("对象").length>0) 或 if($("JQueryObj")[0])
d)在JQuery中取值:
首先:我们需要知道的是JQuery的取值是与CSS取值的机制是一样的!
1.样式中有id,class,标签三种选择器,在JQuery也有则几种!
写一段代码来做个例子:
//----------------------Test Code Begin--------------------
<div id="main-div">
<div>How you doing?</div>
<div>
<div class="second-div">Here is!</div>
<div>
<table>
<tr>
<td>Lovingshu</td>
<td>Lovingshu</td>
<td>Lovingshu</td>
</tr>
<tr>
<td>Lovingshu</td>
<td>Lovingshu</td>
<td>Lovingshu</td>
</tr>
<tr>
<td>Lovingshu</td>
<td>Lovingshu</td>
<td>Lovingshu</td>
</tr>
<tr>
<td>Lovingshu</td>
<td>Lovingshu</td>
<td>Lovingshu</td>
</tr>
</table>
</div>
</div>
<div>Where are you going?</div>
<div>Lovingshu's Forever</div>

<ul id="theUl">
<li>First</li>
<li>
Second
<ul>
<li>1st</li>
<li>2nd</li>
<li>3rd</li>
</ul>
</li>
<li>Thrid</li>
</ul>
</div>
//----------------------Test Code Finish--------------------
在以上代码中如果我们要取到"Here is!"这个文本,我们使用JQuery如下:
$(function(){
//有最外面的那个DIV的ID入手,然后层层递进,找到我们需要的,注意这里样式与id选择器的区别
alert($("#main-div div .second-div").html());
//在这里有更猛的~用一句话直接实现找到表格并且使其隔行变色的功能
$("#main-div #theTable tr:odd").css("background","pink");
//讲解:通过#main-div 找到id为:theTable 中的所有行tr,其中tr:odd表示里面的奇数行,even表示偶数行(从0开始)

});
//--------------------这里开始讲各种取值的区别-------------
1)$("元素名1 元素名2")
意思就是取到元素名1的子元素2中的所有元素,这其中包含了元素2的子子元素以及各种下级元素,
比如说:$("#main-div div")这个就取到了main-div下面的div中的所有元素,包括了table,tr,td....但是没有ul哦!

2)$("元素名1>元素名2")
意思就是取到元素名1的子元素2中的所有元素,注意这其中不包含了元素2的子子元素!!
比如说:$("#main-div>div")这样就只能取到main-div下面的div元素而取不到div中的table,tr,td.....

3)$("元素名1+元素名2")
意思是取到元素名的下一个(注意是一个)同级元素!
比如说:$("#theUl+li")这样就只会找到theUl下的li的下一个同级元素li而不会找到second中的li里去!

4)$("元素名1~元素名2")
意思与第三点相同,但是不同点是这个不是取下一个,而是取以下的!
比如说:$("#theUl~li")这样会取到theUl中的所有的li的同级元素(不包含second中的li!)
d)目前基本上能讲的也就只有这些了!

更多相关文章

随机推荐