jQuery_Chapter02_20190912/ jQuery操作类样式.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery操作类样式</title>
<style>
.d{
border: 1px solid royalblue;
width: 500px;
margin: 0px auto;
text-align: center;
line-height: 32px;
}
.pink{
color: deeppink;
}
</style>
</head>
<body>
<h2>添加类样式</h2>
<div>
1.使用jQuery封装的循环遍历方法 each
<br />
2.使用jQuery封装的循环遍历方法 each
</div>
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<script>
$(function(){
//jQuery绑定单击事件
//事件绑定语法: $(选择器).事件名(function(){ });
/*$("h2").click(function(){
$("h2").css({"color":"green","font-size":"20px",
"width":"500px","margin":"0px auto"});
//添加类样式
$("div").addClass("d pink");
});*/
//h2鼠标移进事件
$("h2").mouseover(function(){
$("h2").css({"color":"green","font-size":"20px",
"width":"500px","margin":"0px auto"});
//添加类样式
$("div").addClass("d pink");
});
//h2鼠标移出事件
$("h2").mouseout(function(){
$("h2").css({"color":"green","font-size":"20px",
"width":"500px","margin":"0px auto"});
//移除类样式
$("div").removeClass("pink");
});
})
</script>
</body>
</html>
jQuery_Chapter02_20190912/ jQuery的节点操作_append.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery的节点操作_append</title>
</head>
<body>
<ul>
<li>放假第一天,干嘛?</li>
<li>放假第二天,干嘛?</li>
<li>放假第三天,干嘛?</li>
</ul>
<input type="button" id="btn" value="插入节点" />
</body>
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<script>
$(function(){
//button按钮的单击事件绑定
$("#btn").click(function(){
/*节点的内部插入*/
//创建一个新的li标签
var newLi = "<li>放假第n天,干嘛?</li>";
/*$("ul").html(newLi);*/
//插入节点
// $(A).append(B); 将B元素追加到A元素中,前提条件是A元素得存在
$("ul").append(newLi);
//$(A).appendTo(B); 将A元素追加到B元素中
//$(newLi).appendTo("ul");
$("ul").prepend(newLi);
/*节点外部插入*/
$("ul").after("<li>1111</li>");
});
});
</script>
</html>
jQuery_Chapter02_20190912/ jQuery的节点操作_删除_替换_克隆.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery的节点操作_删除_替换_克隆</title>
<style>
.red{
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<ul>
<li>放假第一天,干嘛?</li>
<li>放假第二天,干嘛?</li>
<li>放假第三天,干嘛?</li>
<li>放假第n天,干嘛?</li>
</ul>
</body>
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<script>
$(function(){
//给第一个li标签绑定删除单击事件_清空文本
$("li:first").click(function(){
/*$("li:first").empty(); */ //empty():清空文本,标签结构还存在
$(this).empty(); //此处this,代表的是li:first 元素
});
//给第二个li标签绑定删除单击事件_删除元素
//li:eq(index): 筛选过滤选择器,index下标从0开始
$("li:eq(1)").click(function(){
$(this).remove(); //remove():删除元素,标签结构也删除
});
//给第三个li标签绑定替换事件
$("li:eq(2)").click(function(){
var newReplace = "<li class='red'>没有假期,好好学习</li>";
//replaceAll 和 appendTo 一样的原理
//replaceWith 和 append 一样的原理
$(this).replaceWith(newReplace);
});
//给第四个li标签绑定克隆事件
$("li:eq(3)").click(function(){
//克隆的元素
/**
* 语法: $(选择器).clone(deep);
* deep : false/true; 默认false,只克隆当前元素,不克隆复制当前事件;
* true:克隆当前元素,也克隆复制当前事件;
*/
var cloneLi = $(this).clone(true);
//追加到ul标签下
$("ul").append(cloneLi);
});
})
</script>
</html>
jQuery_Chapter02_20190912/ 过滤选择器_可见性过滤.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>过滤选择器_可见性过滤</title>
</head>
<body>
<table>
<tr style="display:none"><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
<div></div>
</body>
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<script>
/*页面加载*/
$(function(){
//操作隐藏的数据
$("tr:hidden").css("display","block");
//操作显示的数据
//$("tr:visible").css("display","none");
});
</script>
</html>
jQuery_Chapter02_20190912/ 过滤选择器_基本过滤.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>过滤选择器_基本过滤</title>
</head>
<body>
<!--div#d>ul>li*5-->
<div id="d">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<script>
/*页面加载*/
$(function(){
$("ul li:first").css("background","pink");
/*隔行换色*/
$("ul :odd").css("border","1px solid green");
});
</script>
</html>
jQuery_Chapter02_20190912/ 过滤选择器_表单选择器_表单对象属性选择器.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>过滤选择器_表单选择器_表单对象属性选择器</title>
<style>
div{
width:500px;
height: 50px;
border: 2px solid black;
}
</style>
</head>
<body>
用户名: <input type="text" name="" value=""/>
<br />
<!--input[type='radio'name=''id='' value='']*2-->
性别:<input type="radio" name="sex" id="boy" value="男1"/>男
<input type="radio" name="sex" id="girl" value="女1" checked="checked"/>女
<br />
<!--input[type='checkbox' name='hobby' id='' value='']*3-->
爱好:<input type="checkbox" name="hobby" id="sing" value="唱唱"/>唱
<input type="checkbox" name="hobby" id="jump" value="跳跳"/>跳
<input type="checkbox" name="hobby" id="rap" value="raprap"/>rap
<br /><br />
<button onclick="btnRadio()">点击获取表单radio单选框的元素</button>
<br /><br />
<button onclick="btnCheckbox()">点击获取表单checkbox复选框的元素</button>
<br /><br />
<button onclick="btnChecked()">点击表单radio/checkbox(单选/复选)选中的的元素</button>
<!--div#*3-->
<h2>获取表单radio单选框的元素:</h2>
<div id="r"></div>
<h2>获取表单checkbox复选框的元素:</h2>
<div id="c"></div>
<h2>获取表单radio/checkbox(单选/复选)选中的的元素:</h2>
<div id="ch"></div>
</body>
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<script>
//定义js函数
function btnRadio(){
//获取表单的单选元素
// val()/val(参数) : 获取/设置value属性的值,是jQuery操作标签value属性的方法
var radios = $("input:radio"); //:radio 表单选择器
var str = ""; //定义js变量,用来存储获取的多个值上
//js的循环遍历方式
for(var i = 0; i<radios.length; i++){
str += $(radios[i]).val()+" ";
}
//console.log(str);
$("#r").html(str);
}
function btnCheckbox(){
var checkboxs = $(":checkbox"); //:checkbox 表单选择器
//定义js变量
var str = "";
//使用jQuery封装的循环遍历方法 each
// 语法: $(选择器).each(遍历的集合对象,function(i){ });
$.each(checkboxs,function(i){
str += $(checkboxs[i]).val()+" ";
});
$("#c").html(str);
}
function btnChecked(){
var checkeds = $(":checked"); //:checked 表单对象属性选择器
var str = "";
$.each(checkeds,function(i){
str += $(checkeds[i]).val()+" ";
});
$("#ch").html(str);
}
</script>
</html>