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字符串
例子：
< div >
< p > two </ p >
</ div >
< p > three </ p >
< a href ="#" id ="test" onClick ="jq()" > jQuery </ a >
alert($("div > p").html());
}
运行：当点击id为test的元素时，弹出对话框文字为two，即div标签下p元素的内容
$(" < div >< p > Hello </ p ></ div > ").appendTo("body");
}
当点击id为test的元素时，向body中添加“<div><p>Hello</p></div>”
$(elem)
说明：限制jQuery作用于一个特定的dom元素，这个函数也接受xml文档和windows对象
参数： elem：通过jQuery对象压缩的DOM元素
例子：
未执行jQuery前：
< div >
< p > two </ p >
</ div >< p > three </ p >
< a href ="#" id ="test" onClick ="jq()" > jQuery </ a >
alert($(document).find("div > p").html());
}
运行：当点击id为test的元素时，弹出对话框文字为two，即div标签下p元素的内容
$(document.body).background( " black " );
}
运行：当点击id为test的元素时，背景色变成黑色
$(elems)
说明：限制jQuery作用于一组特定的DOM元素
参数： elem：一组通过jQuery对象压缩的DOM元素
例子：
未执行jQuery前：
< input type ="text" name ="textfield" >
< input type ="submit" name ="Submit" value ="提交" >
</ form >
< a href ="#" id ="test" onClick ="jq()" > jQuery </ a >
$(form1.elements ).hide();
}
运行：当点击id为test的元素时，隐藏form1表单中的所有元素。
jQuery代码及功能：
四：总结
通过Jquery使我们操作更加方便.
