一些啰嗦,我是jQuery新手,应该是前台设计方面的新手。所以在我的博客里面所记录的一般都是基础的东西。如有问题,希望大家给予指正。谢谢
之所以要专门的学习jQuery,原因在于,上一次的项目,我负责的模块牵扯到前台页面显示的改动,但是面对JavaScript、jQuery,我束手无策。痛定思痛,我觉得花时间学习一下jQuery也是可以的,学习参考《锋利的Jquery》,这本书真不错,对jQuery感兴趣的同学,可以拿来看看。下面的Demo,则是,我在学习过程中觉得有必要记录的东西。
正题——
1 等待Dom元素加载完毕:
jQuery(document).ready().
2 Javascript 一点东西
1 :<tr><td></td></tr>,<td>标签一定要写啊,我刚刚忘记写了,还查了好长时间- -||||汗颜
2:JavaScript: 通过TagName获取页面上的元素
通过TagName获取页面上的元素,我在VS2005中,document.getElementsByTagName("p")这样是错误的。
要这样子才可以:document.documentElement.getElementsByTagName("p")
但是我百度一下,大家都是这样子写滴~document.getElementsByTagName("p"),为什么我不可以,人品不好吗,有木有,有没有和我遇到同一情况的同学?
3:JavaScript: 通过ID获取页面上的元素
var item=document.getElementById("tb");
4 Javascript和Jquery 一个对比的小例子
html代码:
<body>
<form id="form1" runat="server">
<div >
<input type="checkbox" value="1" name="check" checked /><br />
<input type="checkbox" value="2" name="check" /><br />
<input type="checkbox" value="3" name="check" checked /><br />
<input type="button" value="你选中的个数" id="btn"/>
</div>
</form>
</body>
Javascript 方法:
var count=0;
var items=document.getElementsByName("check"); //要用什么东西都要先声明成变量,对变量进行操作
for(var i=0;i<items.length;i++)
{
if(items[i].checked)
count+=1;
}
var btn=document.getElementById("btn");
btn.οnclick=function(){
alert("个数是"+count);
}
jquery方法如下:
注释部分 是我私下、当时,对[name='check']用法的理解
//===========对多选框进行操作,输出选中的多选框的个数
$("#btn").click(function(){
//alert($("input[type='checkbox']:checked").length);
alert($("input[name='check']:checked").length);//jquery的选择器有对id的有对class的也有对标签的,但是没有对name 和 type的,所以要这样表示
})
5 附带一个 CSS 小例
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<%-- 先将样式写在style里面,用class属性将元素和样式联系起来。内部样式表--%>
<style>
.demo{
color:red;
font-size:30px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<p style="color:Red; font-size:30px;">CSS Demo</p> <%--这样讲css和html混合在一起 ,不好。分离开--%>
<p class="demo">CSS Demo1</p>
</div>
</form>
</body>
</html>
6 零零碎碎
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script src="script/jquery-1.3.2.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<p οnclick="demo()">click me!</p>
<p class="demo">jquery click me!</p>
</div>
</form>
</body>
</html>
<script type="text/javascript"> //将js和html分离开
function demo()
{
alert("click");
}
$(".demo").click(function(){ //这样做把click事件从html中分离出来,css添加样式,jQuery是添加行为
alert("jquery click me!");
})
</script>