jQuery-day02
//demo1DOM操作及操作样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.big{
font-size:30px;
}
.important{color:red;}
</style>
<script src="../js/jquery-3.4.1.min.js"></script>
<script>
//页面加载后调用这个函数.
//其作用等价于
//window.onload = function(){}
$(function(){
//1.读写节点
//1.1读写内容(双标签有内容)
//1)html() == innerHTML
console.log($("p:eq(0)").html());
$("p:eq(0)").html("jQuery对<u>DOM操作</u>提供了支持");
//2)text() == innerText
//用法同上
console.log($("p:eq(0)").text());
//1.2读写值(表单空间有值)
//val() == value
console.log($(":button:first").val());
$(":button:first").val("BBB");
//1.3读写属性
//attr() == get/setAttribute()
console.log($("img:first").attr("src"));
$("img:first").attr("src","../images/IMG_20191112_235308.JPG");
//2.增删节点
//2.1创建节点
var $li1 = $("<li>杭州</li>");
var $li2 = $("<li>苏州</li>");
console.log($li1);
//2.2增加节点
//parent.append(obj)
//parent.prepend(obj)
//brother.after(obj)
//brother.before(obj)
$("ul").prepend($li1);
$("#gz").after($li2);
//2.3删除节点
//obj.remove()删除节点
//obj.remove(selector)只删除满足selector的节点
//obj.empty() 清理节点 $("p").empty() == $("p").html("")
$("li:last").remove();
//3.遍历节点:查找某节点的亲戚.
//有些时候我们调用别人的方法得到
//一个节点,对其进行一些操作,然后
//又要对此节点的亲戚进行操作.此时
//无法调用选择器,只能调用这样的方法.
//假设我调用了别人的方法得到了广州
var $gz = $("#gz");
//要获取广州的亲戚做进一步处理
console.log($gz.parent());//children()
console.log($gz.prev());//弟弟next()
console.log($gz.siblings());//所有兄弟
//假设我调用了别人的方法得到了ul
var $ul = $("ul");
//要获取列表的孩子做进一步处理
var $s = $ul.find("li:gt(2)");//下标大于2
console.log($s);
//4.样式操作
//$("p:first").addClass("big")
//增加一个样式(*)
$("p").eq(0).addClass("big").addClass("important");
//删除一个样式(*)
$("p:first").removeClass("big");
//删除所有样式 removeClass()
//判断元素是否包含某样式
console.log($("p:first").hasClass("big"));
});
//切换样式
function bbb(){
$("p:first").toggleClass("big");
}
</script>
</head>
<body>
<p>jQuery对<b>DOM操作</b>提供了支持</p>
<p>
<input type="button" value="AAA"/>
</p>
<p>
<img alt="" src="../images/IMG_20191113_114502.JPG" style="width:218px;height:218px;">
</p>
<ul>
<li>北京</li>
<li>上海</li>
<li id="gz">广州</li>
<li>深圳</li>
<li>天津</li>
</ul>
<p><input type="button" value="dadada" onclick="bbb();"/></p>
</body>
</html>
//demo2后绑定事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//$(function(){})类似于
//window.onload=function(){}
//onload若写多次则后者会覆盖前者,
//写多了没有用,只有一个会生效.
//$(function(){})若写多次都有效,可以写多次.
$(function(){
//给按钮1后绑定单击事件
$(":button:eq(0)").click(function(e){
console.log("111");
//此事件对象被jQuery做了封装.
//因为事件对象是浏览器创建的,
//不同浏览器创建的事件对象有区别,
//开发时要兼顾这个区别,很麻烦.
//jQuery就是想解决这个麻烦,将
//他们的区别进行统一,提供统一的方法.
//取消冒泡:e.stopPropagation()
//获取事件源:e.target
console.log(e);
console.log(e.target);
});
});
$(function(){
$("img").css("width","218");
$("img").css("height","218");
//后绑定hover事件，该事件是jQuery
// 特有事件,必须使用jQuery后绑定.
$("img").hover(
function(){
console.log(1);
$(this).width(280).height(280);
},//悬停时
function(){
console.log(2);
$(this).width(218).height(218);
}//离开时
);
});
$(function(e){
//给按钮2绑定后单击事件
$(":button:eq(1)").click(function(){
//让图片在显示与隐藏之间切换
$("img").toggle();
});
});
</script>
</head>
<body>
<p>
<input type="button" value="按钮1" />
<input type="button" value="按钮2" />
</p>
<p>
<img alt="" src="../images/IMG_20191113_114502.JPG">
</p>
</body>
</html>
//demo3动态打分案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-3.4.1.min.js"></script>
<script>
$(function(){
//给按钮后绑定单击事件
$(":button").click(function(){
//启动定时器
var n =0;
var id = setInterval(function(){
//获取下一个要处理的框
var $text = $(":text").eq(n);
//模拟光标切入事件
$text.trigger("focus");
//生成随机的分数, 写入框内
var s = parseInt(Math.random()*100);
$text.val(s);
//都处理完就停止定时器
if(n==$(":text").length-1){
clearInterval(id);
}
n++;
},2000);
});
});
</script>
</head>
<body>
<p>
<input type="button" value="打分"/>
</p>
<p>
lzq:<input type="text"/>
</p>
<p>
hy:<input type="text"/>
</p>
<p>
zz:<input type="text"/>
</p>
<p>
mxq:<input type="text"/>
</p>
</body>
</html>
浙公网安备 33010602011771号