Jquery基础教程

1. jQuery概述

- jQuery是一个优秀的JavaScript框架

- 主要提供如下功能

　 - 访问页面框架的局部

　 - 修改页面的表现

　 - 更改页面的内容

　 - 响应事件

　 - 为页面添加动画

　 - 与服务器异步交互

　 - 简化常用的JavaScript操作

- 下载并使用jQuery

　 - 官方网站（http://jquery.com/）

　 - 不需要任何安装过程

2. jQuery的“$”

- 选择器

- 功能函数前缀

- window.onload

　 - window.onload的冲突

　 - ready()方法

- 创建DOM元素

3. 选择器

- 属性选择器

- 位置选择器

3. 实例

实例一 ：一行代码实现隔行变色效果：

Code

运行效果：

 

实例二 ：选择器

Code

 

运行效果：

 

 

实例三：字符串操作：

Code

 

实例4：获取浏览器的型号和版本号“

 

Code

四：核心部分

$(expr)：该函数可以通过css选择器，Xpath或html代码来匹配目标元素，所有的jQuery操作都以此为基础。expr：字符串，一个查询表达式或一段html字符串

例子：

< p > one </ p >
< div >
       < p > two </ p >
</ div >
     < p > three </ p >  
     < a  href ="#"  id ="test"  onClick ="jq()"   > jQuery </ a >

 

 

function jq(){  
    alert($("div > p").html());  
}

 

运行：当点击id为test的元素时，弹出对话框文字为two，即div标签下p元素的内容

function jq(){
    $(" < div >< p > Hello </ p ></ div > ").appendTo("body");
}

 

当点击id为test的元素时，向body中添加“<div><p>Hello</p></div>”

 $(elem)

说明：限制jQuery作用于一个特定的dom元素，这个函数也接受xml文档和windows对象
参数： elem：通过jQuery对象压缩的DOM元素

例子：
未执行jQuery前：

< p > one </ p >
   < div >
      < p > two </ p >
   </ div >< p > three </ p >
< a  href ="#"  id ="test"  onClick ="jq()" > jQuery </ a >

 

 

function jq(){
    alert($(document).find("div > p").html());
}

 

运行：当点击id为test的元素时，弹出对话框文字为two，即div标签下p元素的内容

function  jq(){
   $(document.body).background( " black " );
}

 

运行：当点击id为test的元素时，背景色变成黑色
$(elems)

说明：限制jQuery作用于一组特定的DOM元素
参数： elem：一组通过jQuery对象压缩的DOM元素
例子：
未执行jQuery前：

< form  id ="form1" >
       < input  type ="text"  name ="textfield" >
       < input  type ="submit"  name ="Submit"  value ="提交" >
</ form >
< a  href ="#"  id ="test"  onClick ="jq()" > jQuery </ a >

 

 

function  jq(){ 
   $(form1.elements ).hide(); 
}

 

运行：当点击id为test的元素时，隐藏form1表单中的所有元素。

jQuery代码及功能：

四：总结

  通过Jquery使我们操作更加方便.

本文转自麒麟博客园博客，原文链接：http://www.cnblogs.com/zhuqil/archive/2008/08/22/1273929.html，如需转载请自行联系原作者