JQuery 就是这么简单

JQuery 就是这么简单()

首先我解释一下终极的意思和我想达到的效果:
1.
很多人都在为学习找教程,但是总是找不到最适合自己,找了换,换了再找,导致白白的浪费了时间。
2.
效果:只要有编程基础(asp,php,jsp都成),我可以保证简单得会让你有种想吐的感觉。
OK
,切入主题:
准备阶段:
1.
首先下载一个jquery-1.3.1.js文件。(我这没法上传,不好意思,没有的可以去gougou上搜,大把的)
2.
然后在页面内引用<script language=”javascript” type=”text/javascript” src=”jquery-1.3.1.js”></script>
ok
,这样就可以开工了,简单吧。
只要是编程语言,学习的第一步,是什么?先看看这段文字:
某程序员对书法十分感兴趣,退休后决定在这方面有所建树。于是花重金购买了上等的文房四宝。一日,饭后突生雅兴,磨墨拟纸,点了上好的檀香,颇有王羲之风范,又具颜真卿气势,定神片刻,泼墨挥毫,郑重地写下一行字: hello world
这段文字的亮点就是Hello World,有些冷哈,那么,学习jquery的话,我们最开始,也用Hello World开启路程。
在经过上面的准备步骤之后,继续写:
<script>
$(function(){
        alert(”hello world!”);
        document.write(”hello world!”);
});
</script>
然后打开页面,马上弹出提示框,内容为hello world
然后我在解释一下这段代码的意思:
$(function(){
});
这一段,表示页面刚加载的时候,也就是body onload事件,然后alert()弹出提示框,或者document.write()打印文字内容;
所以,第一讲,主要目的,就是入门。
个人发布教程,追求的就是简洁、明了,甚至是来个外行或傻子都能明白的境界。
然后我们在稍微延伸一下。
body里面,加一个<a>标签,如下:
<a href=”#” id=”test” >jQuery</a>
<script>中的内容,变成:
<script>
$(function(){
        alert(”hello world!”);
        document.write(”hello world!”);
        $(”#test”).click(function(){
                alert(”
你点击了这个超链接”);
        });
});
</script>
效果:点击超链接,就会弹出提示框。
程序运行流程:
1.
页面加载的时候,选中id=”test”的标签,jquery获得某个标签其实和写css选中是一样的。
2.
选定之后,会赋予这个超链接点击事件,然后点击时候,执行函数体内的内容,我这里设置的是alert()弹出对话框。
就是这么简单。
其实,如果超链接形式为<a href=”#” class=”test” >jQuery</a>
那么,获得超链接这个标签就是$(”.test”).click()这样了。
简单吧!!!
全文完。
下一篇,为jquery的选择器。

 

 

JQuery 就是这么简单()

第一篇,是最简单的入门教程。
你要问我入门的感觉是什么?我可以告诉你,就像是一颗大树,猛然长出主干,接下来,分支就会不断的伸展,成长。
开讲之前,大家最好手上有一个jquery帮助文档,我放在附件,大家自由下载。
有了文档之后,打开,你就会发现,东西还真不少!
1.
核心(不要理会这些没用的东西)
2.选择器(拐杖)
3.属性(走路的开始)
4.筛选(走路的开始)
5.
文档处理(这个不怎么重要)
6.CSS
(让页面来得更生动些,想要加强前端,这个是重点)
7.事件(确定目标)
8.ajax(安装了消音器的枪)
9.
工具(不要理会这些没用的东西)
10.
关于(不要理会这些没用的东西)
不急,不要因为多而失去耐心,因为,我们首先会掌握常用的!
第一讲,只是让你了解到jquery是如何运作的,而第二讲,根据本人学习的经验来看,只非常重要的基础,有了这个基础之后,就好比之前是需要依靠拐杖来走路,而当你掌握了之后,这个拐杖就不再需要了!
ok
,开始巩固我们树的根基!
jquery的选择器。
之前看到好多人问怎么选中这个标签啊什么之类的,是,开始学的时候,我也苦恼过,但现在,不存在了,信手拈来!
.最基本的选择:这点对于了解css是如何选中标签,优势会很明显,我就不废话了,直接上代码:
html
代码:<a href=”#” id=”xiongdilian” class=”jerry”></a>(这里什么a,p,span,h1,h2等等均可,会一举反三是绝对没错滴!)
1.
通过id来获取标签:$(”#xiongdilian”).click(function(){alert(”点击就弹出”);});
2.
通过class来获取标签:$(”.jerry”).mouseover(function(){alert(”鼠标移动就弹出”);});
我这里只谈这2点,这样,返回的就这一个标签的jquery对象,还有其他的,但是用得都比较少,知道了这2点,其他的运用一下就OK了,搞多了会混淆的。
.最基本的还有一种方式,就是不依靠id或者class命名,也能准确选中。
html
代码:
<div class=”xiongdilian”>
<p>aaaaaaaaaaaaaaaa</p>
<p>bbbbbbbbbbbbbb</p>
<p>cccccccccccccccc</p>
</div>
1.
提问:看到这段代码,是不是会想到,我怎么样才能获得div中的p了?其实很简单
$(”xiongdilian p”)
或者$(”.xiongdilian > p”),这2个,都可以。
具体的js代码:
$(function(){
        size = $(”.xiongdilian p”).size();
        alert(size);
});
弹出值为3,表示获得了div3p元素。
2.
拓展:有人会想说,我不要3个,我只要1个,那这时候怎么办了,方法有很多种,我这里就不改html代码了,直接上代码。
$(function(){
        wenben = $(”div p:eq(0)”).text();
        alert(wenben);
});
看看弹出的是什么值,没错,是aaaaaaaap标签,其实方法不止这一个,还有:
wenben = $(”div p:first”).text();     
可能有人会问first是什么意思?我觉得学一些基础的英文,是有必要的,呵呵。
还有人想问,我要获得div中,第2p标签,这也很简单,上代码:
wenben = $(”div p:eq(1)”).text();
这里,我先解释下一个概念,玩jquery或者其他语言,返回值必须存在!我就不解释这个概念了。
那么,选中标签的时候,其实就是返回了一个或者多个jquery对象
选中一个的话,那就是单个对象;二个或者多个的话,绝大多数,都是以数组形式返回的。
有了这个概念,我们就看eq(i),在这里变量值i,其实就相当于数组的下标,从0开始,然后依次绑定选中。
这样,我们就可以循环取出了,代码如下:
size = $(”div p”).size();   //size = 3
for (i=0; i<size; i++){
        alert($(”div p:eq(”+i+”)”).text());
}
这样,就循环打印出了获得的值。
这里我们先总结一下我们遇到的属性:eq()属性,size()属性,text()属性。
有基础的童鞋,是不是觉得灰常滴简单了?好了,废话就不多说了,下一步,进入表单的筛选。
其实最最最常用的就是这些,掌握了这些,拐杖就等于丢弃了,接下来就是在地上怕了,但放心,想走或者跑起来,也很快!
.表单相关,因为网站一些信息的验证是必须的,所以,这点也非掌握不可!
表单控件如下:
<input type=”text” name=”buxili” />
<input type="checkbox" name="xiongdilian" value="baby" checked='checked' />
<input type="checkbox" name="xiongdilian" value="come" />
<input type="checkbox" name="xiongdilian" value="on" />
这里我就举文本框和复选框这两种,因为实质都是一样的。
你可以看到这些控件上都没有什么id或者class,但你也可以加,但我这里主要是想讲控制器中的根据属性值来选定
选取文本框:$(”input[name='buxili']“),这样就选中了。
复选框同理:$(”input[name='xiongdilian']“),这可是一选就是3个哦。
什么?你想选择复选框的时候只选取选中的?这也不难哦。
$(”input[name='xiongdilian']:checked”);
ok
,这一讲,我想就此打住了,因为,已经包含了很多知识点了。
学技术,总结是非常重要的,下面我们来总结一下我们运用到了那些方面,那些方面还需要加强!
1.基本的选取:通过id或者class,还有eq()方法。
如果要拓展的话:
:first(
第一个):last(最后一个):not(排除一个)
:even
:odd。这2个和table或者li结合得比较多,前者是偶数行,后者是奇数行。
:gt(i)
lt(i)。前者是选取大于i的,后者是选取小于i的。
其他的就用得比较少了,知道了行。
2.和表单结合的:通过属性;通过控件的种类;通过表单对象的属性。
通过属性:$(”input[name='xxx']“)获得name值为xxx的控件。
通过控件种类:$(”:checked”)获得所有的复选框;$(”:radio”)获得所有的单选框。
通过表单对象属性:$(”input:checked”)或者$(”input:selected”)获得选中的值。
本人在学习的过程中走了一些弯路,现在回头看,发现了距离最近到达终点之路,所以提取出重点,还有一些其他的,可以自行根据需要学习。
另外,本人再三强调,在jquery 中,选择器是必须且要熟练掌握的,这样才可事半功倍,宁可在这一个知识点上花费很多时间,也一定要掌握!
因为这个知识点,好比一个树的根基,根延伸在地底的长度和粗壮程度,决定着树的成长粗度和高度!

 

 

posted @ 2010-05-05 10:43  ly712  阅读(330)  评论(0编辑  收藏  举报