一、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 ????// 事件的绑定方式210 ????$("#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对象
?});
jQuery学习笔记
原文地址：https://www.cnblogs.com/gdwkong/p/8267288.html