<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>加载事件</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//1.$(document).ready(function)
/*$(document).ready(function () {
alert("hello");
});
//2.$().ready(function)
$().ready(function () {
alert("qiuzhiwen");
});
//3.$(function)--（推荐使用）对第一种的封装，运行速度没有第一种速度快
$(function () {
alert("hhhhh");
});*/
/**
* 总结：
* jQuery加载事件与传统加载事件的区别：
* 1.设置个数：在同一个请求里边，jQuery加载的事件可以设置多个，
* 而传统方式只能设置一个传统方式加载事件是给onload事件属性赋值，多次赋值，后者会覆盖前者
* jQuery方式加载事件是吧每个加载事件都存入一个数组里并成为数组的元素，
* 执行的时候就遍历该数组执行每个元素即可，因此其可以设置多个加载事件
* 2.执行时机不一样
* 传统方式加载事件是全部内容在浏览器显示完毕再给执行加载事件
* jQuery加载事件，只要全部内容在内存里边对应的dom树结构绘制完毕就给执行，
* 有可能对应的内容在浏览器里边还没有显示
* 3.jQuery加载事件的原理--对DOMContentLoaded的封装
*/
//jQuery加载事件的原理--对DOMContentLoaded的封装
/*document.addEventListener('DOMContentLoaded',function () {
alert("hello");
});*/
//4.简单事件操作
$(function () {
//鼠标移入事件
$('div').mouseover(function () {
$('div').css('color','pink');
});
//鼠标移除事件
$('div').mouseout(function () {
$('div').css('color','blue');
});
});
//通过按钮来触发
function f1 () {
$('div').mouseover();
}
//5.父子节点追加
function f2 () {
//主动追加--append()后置追加
//$('#shu').append('<li>马超</li>');//追加新节点
//$('#wu').append($('#wu li:eq(1)'));//追加已有节点--物理位置移动
//主动追加--prepend()前置追加
//$('#wu').prepend('<li>诸葛亮</li>');//追加新节点
//被动追加--appenTo()后置
$('<li>魏延</li>').appendTo($('#shu'));
$('<li>黄忠</li>').prependTo($('#shu'));
}
//6.兄弟节点追加
function f3 () {
//主动--后置追加
//$('#yu').after('<li>黄忠</li>');
//主动--前置追加
//$('#yu').before('<li>马超</li>');
//被动--后置追加
//$('<li>刘备</li>').insertAfter($('#quan'));
//被动--前置追加
$('<li>刘备</li>').insertBefore($('#quan'));
}
//7.节点替换
function f4 () {
//主动替换
//$('<li>刘备</li>').replaceAll($('#quan'));//新节点替换
//被动替换
$('#yu').replaceWith($('#quan'));//物理位置移动
}
//8.节点删除
function f5 () {
//$('#wu').empty();//清空对应的子节点
$('#quan').remove();//删除指定节点
}
//9.复制节点
$(document).ready(function () {
$('#shu li').mouseover(function () {
$(this).css('background-color','pink');
});
$('#shu li').mouseout(function () {
$(this).css('background-color','');
});
})
function f6 () {
//var yu=$('#yu').clone(false);//只复制节点，没有事件
var yu=$('#yu').clone(true);//复制节点，同时将事件也复制过来
$('#wu').append(yu);
}
//10.属性选择器
function f7 () {
//节点必须有【】指定属性
//$("[size]").css('color','pink');
//【name=value】
//$("[size=30]").css('background-color','lightblue');
//[value^=q]--value值以q开始
//$("[value^=q]").css('color','red');
//[value$=u]--value值以u结束
//$("[value$=u]").css('color','blue');
//[name!=username]--name属性不等于username
//$("[name!=username]").css('font-size','30px');
//$("[size][size!=10]").css('font-size','30px');
$("input[size][value^=q][name]").css('color','blue');
//[class*=an]--节点必须含有class属性，其值必须含有an
//$("[class*=an]").css('font-size','30px');
}
</script>
<style type="text/css">
div{color: red;font-size: 20px;}
</style>
</head>
<body>
<h1>jQuery加载事件</h1>
<img src="img/1.jpg" alt="美女"/>
<div>I study javascript!</div>
<input type="button" value="触发" οnclick="f1()"/>
<h1>节点追加</h1>
<ul id="shu">
<li>刘备</li>
<li>张飞</li>
<li id="yu">关羽</li>
</ul>
<ul id="wu">
<li id="quan">孙权</li>
<li>周瑜</li>
<li>黄盖</li>
</ul>
<input type="button" value="父子节点追加" οnclick="f2()"/>
<input type="button" value="兄弟节点追加" οnclick="f3()"/>
<input type="button" value="节点替换" οnclick="f4()"/>
<input type="button" value="节点删除" οnclick="f5()"/>
<input type="button" value="复制节点" οnclick="f6()"/>
<h1>属性选择器</h1>
<input type="text" size="10" class="orange" name="username" value="qiu"/><br/><br/>
<input type="text" size="30" name="userpwd" value="zhi"/><br/><br/>
<input type="button" value="触发" οnclick="f7()"/>
</body>
</html>
