自学js04
jquery
jquery-2.1.0.js 不兼容IE8以下 ;jquery-1.1.0.js全部兼容 ，引用封装好的方法 。
1.新建js 选项里面选择jquery-2.1.0.js，或者jquery-1.1.0.js，
然后建html 调用jquery,<script type="text/javascript"src=“jquery-2.1.0.js”
2.百度jquery，点击下载后，弹框里面复制，
3.填写jquery的vpn； 百度后，修改src;
简化代码，不用自己写js底层
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script type="text/javascript"src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">
// jquery-2.1.0.js 不兼容IE8以下 ;jquery-1.1.0.js全部兼容 ，引用封装好的方法 。
// 1.新建js 选项里面选择jquery-2.1.0.js，或者jquery-1.1.0.js，
// 然后建html 调用jquery,<script type="text/javascript"src="jquery-2.1.0.js"
// 2.百度jquery，点击下载后，弹框里面复制，
// 3.填写jquery的vpn； 百度后，修改src; src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"
// 建议用第三种，因为可以用cdn有压缩的jquery 加载快
</script>
<style type="text/css">
p{
height: 100px;
width: 100px;
background: black;
margin-left: 30px;
float:left;
text-align: center;
line-height: 100px;
}
nav{
height: 100px;
width: 100px;
background: coral;
margin-left: 30px;
margin-top: 15px;
float:left;
text-align: center;
line-height: 100px;
}
#a11{
height: 300px;
width: 300px;
border: 1px solid black;
position: relative;
top: 200px;
}
#a12{
text-align: center;
line-height: 70px;
height: 70px;
width: 70px;
border-radius: 100%;
position: absolute;
}
</style>
</head>
<body>
<p>选择标签1</p>
<p id="a1">选择标签2</p>
<p class="a2">选择标签3</p>
<p>要呦呦切克闹</p>
<!--选择标签 应用展示的四个标签-->
<p id="a3">鼠标悬浮</p>
<!--鼠标悬浮和离开展示的标签-->
<p id="a4">鼠标点击</p>
<!--鼠标点击展示的标签-->
<nav id="a5">点击隐藏</nav>
<nav id="a6">实验模块a6</nav>
<nav id="a7">点击显示</nav>
<nav id="a8">浅入显示a6</nav>
<nav id="a9">浅出隐藏a6</nav>
<nav id="a10">显示和隐藏a6</nav>
<div id="a11">
<p id="a12">小球动画</p>
</div>
<script type="text/javascript">
// document.getElementsByTagName('p')[0].style.background = "red" 以前的修改背景色方法
// TagName标签名
$("p").css("background","#008000") //绿色
$("#a1").css("background","#0000FF") //蓝色
$(".a2").css("background","#00CED1") // 浅蓝色
// 利用jquery-2.1.0.js 里面的方法直接选中进行修改背景色
// 选择标签和以前cssde 的选择一样 #a1 .a2 p 等
$("p:contains('要呦呦切克闹')").css("background","#8B4513") //棕色
// 通过 p:contains('要呦呦切克闹') 选择包含内容的p标签 来选择标签,进行修改
$("#a3").mousemove(
function(){
$("#a3").css('background',"#8A2BE2") // 移入鼠标变紫
}
)
$("#a3").mouseleave(
function(){
$("#a3").css('background',"black") //鼠标离开变黑色
}
)
// 利用jquery 设定鼠标悬浮 和 离开的效果，方便一些，不用自己写js原码
// 比如以前的 <p onmousemove="foo()"></p> 然后书写 foo() 再去里面写document.getElementById("div1").style.background == "red"
$("#a4").click(
function(){
$("#a4").css("background","lavender") //点击变白色
}
)
// 利用jquery点击变色
// 比如以前的 <p onlick="foo()"></p> 然后书写 foo() 再去里面写document.getElementById("div1").style.background == "red"
$("#a5").click(
function(){
$("#a6").hide(1000)
}
// 点击#a5表签,隐藏#a6，hide(1000)隐藏的过程时间为1000毫秒，1秒钟
)
$("#a7").click(
function(){
$("#a6").show()
}
)
// 点击#a7表签,显示#a6，后面也可以加时间
$("#a9").click(
function(){
$("#a6").fadeOut(1000)
}
)
// 点击#a9表签,隐藏#a6，后面也可以加时间，颜色慢慢的隐藏
$("#a8").click(
function(){
$("#a6").fadeIn(1000)
}
// 点击#a8表签,显示#a6，后面也可以加时间，颜色慢慢的显示
)
$("#a10").click(
function(){
$("#a6").fadeToggle(1000)
}
)
// 点击#a10表签,隐藏#a6，后面也可以加时间，颜色慢慢的隐藏
// 再次点击#a10表签,显示#a6，颜色慢慢的显示
$('#a12').click(
function foo(){
$("#a12").animate(
// animate动画属性
{
left:"200px"
}
)
$("#a12").animate(
{
top:"200px"
}
)
$("#a12").animate(
{
left:"0px"
}
)
$("#a12").animate(
{
top:"0px"
}
)
// setInterval("foo()",2000) 这里就会发现他并没有执行,因为"foo()"在全局作用域下可执行,但在局部作用域下不能执行。 foo()为局部的，所以不能带引号和括号
// setInterval(foo(),2000) 这里就会发现,后面的时间并没有起作用,
setInterval(foo,2000)
}
)
</script>
<div class="contain" style="height: 300px;width: 200px;border: 1px solid red;margin-top: 200px;"></div>
<button id="btn1">点击追加子节点</button>
<button id="btn2">点击删除子节点</button>
<script type="text/javascript">
$("#btn1").click(
function(){
$(".contain").append("<div style='height: 20px;width: 200px;text-align: center;background: #87CEFA;'>点击添加</div>")
}
)
$("#btn2").click(
function(){
$(".contain").empty()
// remove()删除父级元素和字元素，empty() 方法从被选元素移除所有内容，包括所有文本和子节点。
// remove() 方法移除被选元素，包括所有的文本和子节点。该方法也会移除被选元素的数据和事件。
// detach() 方法移除被选元素，包括所有的文本和子节点。然后它会保留数据和事件。该方法会保留移除元素的副本，允许它们在以后被重新插入。
// children().last().remove() 删除第一个
// children().last().remove() 删除最后一个
// children() 方法返回返回被选元素的所有直接子元素。
// contents() 包含文本和注释节点在内的所有子节点
// DOM 元素集合的 jQuery 对象，.children() 方法允许我们检索 DOM 树中的这些元素，并用匹配元素构造新的 jQuery 对象。
// .find() 和 .children() 方法类似，不过后者只沿着 DOM 树向下遍历单一层级。
//请注意，与大多数 jQuery 方法一样，.children() 不返回文本节点；如果需要获得包含文本和注释节点在内的所有子节点，请使用 .contents()。
}
)
</script>
</body>
</html>
多选框值多选框原理
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js" >
</script>
</head>
<body>
<!--全选框-->
<span>科目</span>
<span>语文</span><input type="checkbox" name="lesson" id="chinese"/>
<span>数学</span><input type="checkbox" name="lesson" id="math"/>
<span>英语</span><input type="checkbox" name="lesson" id="english" checked=""/>
<span>全选</span><input type="checkbox" id="all_selected"/>
<script type="text/javascript">
$("#all_selected").click(function(){
if($("#all_selected").prop("checked") === true){
$(":checkbox").prop("checked",true)
// 所有为 checkbox的属性值改为checked="true" ; checked=""默认选中
}else{
$(":checkbox").prop("checked",false)
// 所有为 checkbox的属性值改为checked="true"; checked=""默认选中
}
})
</script>
</body>
</html>