一、jQuery的常用方法使用示例
1 // 页面加载之后执行 2 $(function(){ 3 // 事件的绑定方式1 4 $("#bt3").bind("click",function(){ 5 var old= $("#img_id").prop("width"); 6 $("#img_id").prop("width",old+100); 7 }); 8 9 // 事件的绑定方式2 10 $("#bt4").click(function(){ 11 //操作属性值 12 var old= $("#img_id").prop("width"); 13 $("#img_id").prop("width",old-100); 14 //操作value值 15 this.value;//this获取的js对象,所以要使用value来获取属性值 16 var value= $(“#username”).val();//获取value属性的属性值 17 $(“#username”).val(“aa”); //设置value属性的属性值,value方法只能用于：包含“value”属性的表单 18 //操作html内容 19 var str = $(“#aid”).html(); 20 $(“#divid”).html(“<a href=“#”>abced</a>”); 21 //操作文本 22 var str = $(“#aid”).text(); 23 $(“#pid”).text(“abced”); 24 //操作css属性 25 $(“#pid”).css(“color”,“red”); 26 }); 27 );
二、jQuery基础知识
1 jquery对象和js对象的互相转换
1.1 认识两者的不同
a. 来源不同
- 通过“document.getElementById()”获得对象是：js对象。
- 通过“$(选择器)”获得对象是：jquery对象
b. 使用方式不同
- js对象，使用属性，进行操作
- jquery对象，使用方法进行操作（示例中所有方法等)
c. 如何判断是jquery对象和js对象（重点）
- 假定有一个对象，放在这里，如何判断，他是js对象，还是Jquery对象？
- 感知法：
- alert(item.innerHTML);
- alert(item.html());
- 感知法：
1.2 js对象 --> jquery对象
1.2.1 js对象--> jquery对象
a. 语法
- 把js对象p转换成jQuery对象： $(p)，特别注意，不要写成： $p, $("p")
b. 演示
// 获得js对象
var js_item =document.getElementById("h1_id");
// 转换成jquery对象(推荐用“$”便于区别,不是强制要求)
var $jquery_item = $(js_item);
// jquery对象使用jquery方法
$jquery_item.css("background-color","red");
1.2.2 jquery对象 --> js对象
a. 语法
- 把jQuery对象(q)转换成js对象：q[0]或者q.get(0)
b. 演示
-- 准备数据
<h1 id="h1_id">我是中国人</h1>
--js代码
// 获得jquery对象
var #jquery_item = $("#h1_id");
// 转换成js对象(方式1)
var js_item1=#jquery_item[0];
alert(js_item1.innerText); //使用js方法
// 转换成js对象(方式2)
var js_item2=#jquery_item.get(0);
alert(js_item2.innerText); // 使用js方法
2 jquery的加载顺序
2.1. 定义
- 和js一样，jquery也存在加载顺序问题。
- jquery自己封装了一个document的ready方法，即“页面加载完成时”触发该方法。
2.2 语法
- $(document).ready(当页面加载完成时要执行的函数)
2.3 特点
- $(document).ready(当页面加载完成时要执行的函数)，其作用类似于：js中window的onload事件
- 两者对比来看，ready事件执行时机比onload事件早，另外，可以多次执行。
2.4 使用演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
// 加载完直接弹框
$(document).ready(function(){
alert("加载完直接弹框");
}
);
// 加载后完成按钮的绑定
$(document).ready(function(){
$("#but_id").bind("click",function(){
alert("点击了测试按钮");
});
});
</script>
</head>
<body>
<input id="but_id" type="button" value="测试"/><br>
</body>
</html>
2.5 偷懒的写法
$(当页面加载完成时要执行的函数)
$(function(){});
3 选择器获得多个元素的遍历方法
3.1 获得元素的个数
a. 使用演示
- $("h1").length
3.2 each方法--jquery方法
a. 语法
- $(selector).each(function(index,element))
// 留心这里，element是js对象，表示元素的索引（次序）
b. 使用
--准备数据
<h1 class="bbb">aaa<strong>bbb1</strong>ccc</h1>
<h1 class="bbb">aaa<strong>bbb2</strong>ccc</h1>
<h1 class="bbb">aaa<strong>bbb3</strong>ccc</h1>
$("h1").each(function(index, element){
alert(index);
alert(element.innerText);
});
3.3 each搭配this使用
$("h1").each(function(index){
alert(index);
alert(this.innerText); // 留心这里：this是js对象
});