jQuery学习笔记
程序员文章站
2022-05-18 23:17:29
jQuery的下载使用 jQuery下载地址：jquery.com。 使用方式：将下载下来的文件如jquery.js嵌入到HTML文件中。 jQuery之操作元素内容 $(ID)替代了document.getElementById(ID); 通过$(ID).val()取得value属性内容，$(ID ......
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>
通过$(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()方法时不能加入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>
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 | 元素名称，元素名称，…… | 取得与指定元素名称相同的元素 | 元素集合 |