jQuery学习笔记 - 码农教程

jQuery的下载使用

jQuery下载地址：jquery.com。

使用方式：将下载下来的文件如jquery.js嵌入到HTML文件中。

<script typpe="text/javascript" src="jquery.js"></script>

jQuery之操作元素内容

$(ID)替代了document.getElementById(ID);

通过$(ID).val()取得value属性内容，$(ID).val(" ")设置value属性内容，如文本框，密码框，文本域，下拉列表等。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery练习</title>
        <script typpe="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            function fun(){
                var name = $(uname).val();
                alert("姓名："+name);
                $(uage).val("18");
            }
        </script>
    </head>
    <body>
        姓名：<input type="text" name="uname" id="uname"/>
        <input type="button" name="btn" id="btn" value="提交" onclick="fun()"  /><br/>
        年龄：<input type="text" name="uage" id="uage" value="提交后显示年龄"/> 
    </body>
</html>

val()实例

通过$(ID).text()取得元素内容，$(ID).text(" ")设置元素内容。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery练习之元素内容设置</title>
        <script typpe="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            function fun(){
                var obj = $(myDiv1).text();
                alert("myDiv1中的内容是"+obj);
                alert("设置myDiv2中的内容为Hello World!");
                $(myDiv2).text("Hello World!");
            }
        </script>
    </head>
    <body>
        <div id="myDiv1">啦啦啦</div>
        <div id="myDiv2"></div>
        <input type="button" name="btn" id="btn" value="设置" onclick="fun()"  />
    </body>
</html>

text()实例

用text()方法时不能加入HTML元素，所有的HTML元素需要转义，但是通过$(ID).html(" ")在设置元素内容的同时会保留HTML元素标签处理。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery练习之元素内容(包含标签)设置</title>
        <script typpe="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            function fun(){
                $(myDiv).html("<h1>Hello World!</h1>");
            }
        </script>
    </head>
    <body>
        <div id="myDiv"></div>
        <input type="button" name="btn" id="btn" value="设置" onclick="fun()"  />
    </body>
</html>

html()实例

jQuery之页面加载处理

原始的加载页面方法是：

window.onload = function(){};

学习jQuery之后使用$(document).ready(function(){ })来替代，其简略的写法是$(function(){ })，或者把$换成jQuery，即jQuery(document).ready(function(){ }),其简略的写法是jQuery(function(){ })。

jQuery之基础选择器

jQuery最强大的方便之处就是强大的元素选择功能，可以根据各种形式来选择。比如：根据ID、根据样式、根据父子关系、根据祖先关系、属性的内容。

NO	选择器	描述	返回结果
1	#ID	取得指定ID的内容，相当于document.getElementById(ID)	单个元素
2	元素名称	根据指定的标签名称取得对应的元素，相当于document.getElementsByTagName()	元素集合
3	.class	具备有指定样式的元素	元素集合
4	*	取得所有的元素，包括html,head等元素	元素集合
5	元素名称，元素名称，……	取得与指定元素名称相同的元素	元素集合