查看完整版本: JQuery基础教程一：入门（兴趣）

JQuery基础教程一：入门（兴趣）

1、jquery是什么

以下是官方表述：

[quote][size=4]jQuery is a new type of JavaScript library.           
jQueryis a fast, concise, JavaScript Library that simplifies how you traverseHTML documents, handle events, perform animations, and add Ajaxinteractions to your web pages. [b]jQuery is designed to change the way that you write JavaScript.[/b][/size]
[/quote]


[quote][size=4][b]jQuery 是一个新的javascript类型
[/b]jQuery 是一种快速、简洁的javascript框架，它能让我们更简单的操作HTML文档、调用事件、呈现动画效果，并且能非常简单的把Ajax交互效果添加到我们的网页中，[b]jQuery是为了改变我们的javascript编写而设计的。[/b][/size][/quote]

[[i] 本帖最后由 chris 于 2007-10-19 20:32 编辑 [/i]]

最简单的实例一：[url=http://dev.nowphp.com/example/jquery/001.html]http://dev.nowphp.com/example/jquery/001.html[/url][code]首先<script src="http://res.nowphp.com/script/jquery/jquery-1.2.1.pack.js" type="text/javascript"></script>调用jquery框架[/code]定义CSS：[code]p.surprise {display: none;} 让文字先隐藏
p.ohmy {width: 300px; border: 1px solid green; background: yellow;} 定义显示后的样式
span.run {font-size:50px; font-weight:bold; color: #FF0000;} 定义按钮样式[/code][code]$(function(){
      $("span.run").bind("click", function(){
            $("p.surprise").addClass("ohmy").show("slow");
      });
});
这是js的代码，其中的$(function(){}就相当于原来的onload，是不是感觉非常方便，接着往下来[/code][code]$("span.run".bind("click", function(){}); 这是绑定事件，事件操作写在function(){}内，如果你用过vb之类的开发环境，就会非常熟悉
$("p.surprise").addClass("ohmy").show("slow"); 给元素添加css样式并且以slow的速度显示[/code]

[[i] 本帖最后由 chris 于 2007-10-19 21:36 编辑 [/i]]

顶一下，不过俺还是先学习JS基础去了，嘿嘿～

在jQuery中以前的一些复杂写法都可以简化，比如：
[quote]window.onload=function(){} [/quote]
可以写为：
[quote]
$(document).ready(function(){
   // Your code here
});
[/quote]
或者直接写为：
[quote]
$(function(){
  // Youre Code here
});
[/quote]

jQuery最大的特色是他的选择器（selecter），支持Supports CSS 1-3 and basic XPath，页面上所有的元素都可以选取到，下面对选择器作一个简单的介绍
[size=4][color=Red]下面是最常用的选择器：[/color][/size]
1、ID选取
[quote]
<div id="myid">your html code herer</div>
如果要择取这个div，可以使用以下代码：
$("#myid)，返回值是一个jquery类型，非常方便
[/quote]

2、HTML元素，如p，div，span等html标签
[quote]
选择所有div：$("div")
选择所有span：$("span")
选择所有超链接：$("a")
[/quote]
3、自定义类class
[quote]
<div class="myclass">your code herer</div>
<span class="myclass">your code herer</span>
如果要选择所有class为myclass的元素，可以用以下代码：
$(".myclass")
如果要选择所有class为myclass的div元素，可以用以下代码：
$("div.myclas")
[/quote]

[[i] 本帖最后由 chris 于 2007-10-20 00:24 编辑 [/i]]

4、选择文档内的所有元素
[quote] $("*")[/quote]

5、选择多个元素
[quote]
$("div,p,span,.myclass")
[/quote]

6、父元素与继承元素
[quote]
<ul>
    <li>code 1</li>
    <li>code 2</li>
<ul>
如果要选择所有li，用以下代码：
$("ul li") 中间用空格分隔
[/quote]

7、父元素与子元素
[quote]
<div>
    <p>code 1</p>
    <div>code 2</div>
<div>
选择引div下的p元素：$("div > li") 中间用空格分隔
选择div下的所有元素：$("div > *")
[/quote]

6、下一个元素
[quote]
<p>code 1</p>
<span>code 2</span>
<p>code 3</p>
<div>code 4</div>
代码：$("p + span") 选择的是span
[/quote]

精僻

压力传感器

我是[url=http://www.bjkd.com/]压力传感器[/url]公司,有需要的找我