12 12
发新话题
打印

[教程] JQuery基础教程一:入门(兴趣)

本主题由 chris 于 2007-10-20 00:24 设置高亮

JQuery基础教程一:入门(兴趣)

1、jquery是什么

以下是官方表述:
引用:
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. jQuery is designed to change the way that you write JavaScript.
引用:
jQuery 是一个新的javascript类型
jQuery 是一种快速、简洁的javascript框架,它能让我们更简单的操作HTML文档、调用事件、呈现动画效果,并且能非常简单的把Ajax交互效果添加到我们的网页中,jQuery是为了改变我们的javascript编写而设计的。
[ 本帖最后由 chris 于 2007-10-19 20:32 编辑 ]

TOP

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

TOP

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

TOP

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

TOP

jQuery最大的特色是他的选择器(selecter),支持Supports CSS 1-3 and basic XPath,页面上所有的元素都可以选取到,下面对选择器作一个简单的介绍
下面是最常用的选择器:
1、ID选取
引用:
<div id="myid">your html code herer</div>
如果要择取这个div,可以使用以下代码:
$("#myid),返回值是一个jquery类型,非常方便
2、HTML元素,如p,div,span等html标签
引用:
选择所有div:$("div")
选择所有span:$("span")
选择所有超链接:$("a")
3、自定义类class
引用:
<div class="myclass">your code herer</div>
<span class="myclass">your code herer</span>
如果要选择所有class为myclass的元素,可以用以下代码:
$(".myclass")
如果要选择所有class为myclass的div元素,可以用以下代码:
$("div.myclas")
[ 本帖最后由 chris 于 2007-10-20 00:24 编辑 ]

TOP

4、选择文档内的所有元素
引用:
$("*")
5、选择多个元素
引用:
$("div,p,span,.myclass")
6、父元素与继承元素
引用:
<ul>
    <li>code 1</li>
    <li>code 2</li>
<ul>
如果要选择所有li,用以下代码:
$("ul li") 中间用空格分隔
7、父元素与子元素
引用:
<div>
    <p>code 1</p>
    <div>code 2</div>
<div>
选择引div下的p元素:$("div > li") 中间用空格分隔
选择div下的所有元素:$("div > *")
6、下一个元素
引用:
<p>code 1</p>
<span>code 2</span>
<p>code 3</p>
<div>code 4</div>
代码:$("p + span") 选择的是span

TOP

精僻

TOP

压力传感器

我是压力传感器公司,有需要的找我

TOP

 12 12
发新话题