概述
- jQuery是于2006年初建立的一个轻量级javascript库(即一个快速的，简洁的javaScript库)
- Jquery是对javaScript做了轻量级的封装,简化语法
- jQuery 理念：写得少(语法简单), 做得多(功能强大)
- https://jquery.com 官网
- http://hemin.cn/jq 中文api文档
导入
在js中加入js/jquery-1.8.3.min.js包
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
jQuery对象与DOM对象
原生DOM对象实际表示网页中的标签
jQuery对象就是通过**jQuery()或者$()**包装DOM对象后产生的对象，是一个数组对象，将原生DOM对象包含在里面，然后再数组中包含了许多方法
jQuery对象转换为DOM对象
var jobj = $("#textid");//jquery的语法获得标签对象 jQuery对象
jobj[0];
jobj.get(0);
DOM对象转换成jQuery对象
var tobj = document.getElementById("textid");//原生态DOM对象
$(tobj)
选择器
$("#div1") //id选择器
$("div") //标签选择器
$(".myClass") //类选择器
$("*") //通配选择器
$("div,span,p.myClass") //组合选择器
操作HTML属性
val() 获得第一个匹配标签的当前值
val(val) 设置所有匹配标签的值
attr(name) 获得第一个匹配标签的属性值
attr(name,value) 设置所有匹配的标签设置一个属性值
attr方法只能操作标签中已经定义的属性,不能操作动态添加的属性
removeAttr(name);删除所有匹配的标签中已经定义的属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
function test(){
//val() 获得第一个匹配标签的value属性值
//val(v) 设置所有匹配的标签的value属性值
$("#textid2").val($("#textid1").val());
//console.log($("input").val());
//$("input").val("aaa");
//attr("属性名") 获得指定属性的值
//console.log($("input").attr("type"));
//attr("name","value"); 设置匹配标签的属性值
$(":checkbox").attr("checked",false);
//删除属性
//$(":checked").attr("checked",false);
$(":checked").removeAttr("checked");
}
</script>
</head>
<body>
<input type="text" id="textid1"/>
<input type="text" id="textid2" />
<input type="checkbox" checked="checked" />
<input type="checkbox" checked="checked" />
<input type="checkbox" checked="checked" />
<input type="checkbox" />
<input type="button" value="测试" onclick="test()" />
</body>
</html>
操作CSS属性
css (name) 取得样式name属性的值
css (name,val)
css ({“name”:” val”, “name”:” val” }) 设置样式name属性的值
addClass (classname) 为每个匹配的标签添加指定的class
removeClass (clas sname) 从所有匹配的标签中删除全部或者指定的
toggleClass (calssname) 如果已经存在就删除一个类，如果没有就添加一个类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1{
width: 200px;
height: 100px;
background-color: aquamarine;
}
.div{
width: 100px;
height: 100px;
background-color: black;
}
</style>
<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function change(){
//添加、修改css改变样式
$("#div1").css({"width":"100px","height":"200px","background-color":"red"})
}
function add(){
//为标签添加类改变css样式
$("#div2").addClass("div")
}
function remove(){
//去除类
$("#div2").removeClass("div")
}
function change2(){
//切换
$("#div2").toggleClass("div")
}
</script>
</head>
<body>
<div id="div1">
div1
</div>
<input type="button" name="" id="" value="切换样式" onclick="change()"/>
<div id="div2">
div2
</div>
<input type="button" value="添加" onclick="add()" />
<input type="button" value="去除" onclick="remove()" />
<input type="button" value="切换" onclick="change2()" />
</body>
</html>
操作文本
html() 获得第一个匹配标签的html内容
html(val) 设置所有匹配标签的html内容
text() 获得所有匹配标签文本内容
text(val) 设置所有匹配标签文本内容
append(content) 向所有匹配标签中追加一些HTML标记
after(content) 匹配的标签之后追加HTML内容。
before(content) 匹配的标签之前追加HTML内容。
appendTo(content) 把指定的标签移动到指定的标签中
remove() 从DOM中删除所有匹配的标签
empty() 清空DOM中所有匹配的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
var i = 0;
function test(){
i++;
// alert($("#div1").html()); 获得html内容(包含标签)
//alert($("#div1").text()); 只能获得文本内容
//$("#div2").html("<b>aaaa</b>"+i); //设置html内容 可以解析字符串中的标签
//$("#div2").text("<b>aaaa</b>"); 设置文本内容 不会解析字符串中的标签
//$("div").append("<b>aaaa</b>");//向标签的末尾追加html内容
//$("#div1").before("<b>aaaa</b>"); 向标签之前追加 html内容
//$("#div1").after("<b>aaaa</b>"); 向标签之后追加 html内容
// $("p").appendTo("#div1"); 将指定的标签 移动到指定的标签中
// $("#div1").remove(); 删除网页中的标签
// $("#div1").empty(); 清空标签中的内容
}
</script>
</head>
<body>
<p>段落</p>
<div id="div1">
<b>div1</b>
</div>
<div id="div2">
</div>
<input type="button" value="测试" onclick="test()" />
</body>
</html>
筛选
祖先
parent() //只获得直接上级标签
parents() //获得所有的父级标签，直到文档的根标签(html)
parents(“body”) //获得祖先中指定的父级标签 length=1
后代
children() //只获得所有直接子标签
children(“p”) //获得指定的直接子标签
find() //返回最后一个后代标签
find(“p”) //获得指定的后代标签
同胞
siblings() 返回被选标签的所有同胞标签
siblings(“p”) 同胞标签指定的标签
next() 返回被选标签的后一个相邻标签
nextAll() 返回被选标签的所有后面的同胞标签
nextAll(“p”)
prev() 返回被选标签的前一个相邻标签
prevAll() 返回被选标签的所有前面的同胞标签
preAll(“p”)
过滤
first() 返回被选标签的首个标签
last() 返回被选标签的最后一个标签
eq() 返回被选标签中带有指定索引号的标签
filter() 返回匹配的标签
not() 返回不匹配标准的所有标签
判断
is() 根据选择器、标签或 jQuery 对象来检测匹配标签集合，如果这些标签中至少有一个标签匹配给定的参数，则返回 true
**hasClass() **检查当前的标签是否含有某个特定的类，如果有，则返回true
jQuery事件
ready事件
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数
$(fucntion(){
在这里写你的代码…
})
绑定事件
$(function(){
$("#divOne").click(function(){
alert(“div被点击了”);
});
});
合成事件
hover()：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法，当鼠标移动到一个匹配的标签上面时，会触发指定的第一个函数。当鼠标移出这个标签时，会触发指定的第二个函数。
$(“选择器").hover( fn1,fn2);
其他事件
on() 方法绑定事件处理程序到当前选定的jQuery对象中的元素
one() 一次性事件
resize() 当浏览器窗口改变大小时触发
4586
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
