jQuery之属性操作、文档操作、阻止冒泡、事件委托、响应式页面@media
属性操作
jquery的属性操作模块分为四个部分：html属性操作，dom属性操作，类样式操作和值操作
-
html属性操作：是对html文档中的属性进行读取，设置和移除操作。比如attr()、removeAttr() -
DOM属性操作：对DOM元素的属性进行读取，设置和移除操作。比如prop()、removeProp() -
类样式操作：是指对DOM属性className进行添加，移除操作。比如addClass()、removeClass()、toggleClass() -
值操作：是对DOM属性value进行读取和设置操作。比如html()、text()、val()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="box">
</div>
<script src="jquery-3.3.1.js"></script>
<script>
// js:getAttribute() setAttribute()
// jQ:attr()可以设置多个属性建议不要设置class属性容易覆盖，用addClass removeClass toggleClass
// removeAttr()移除属性
// 对js对象属性进行操作，设置和移除操作prop()、removeProp()
$(function () {
// $('.box').html('<a href="http://www.baidu.com">百度两下</a>');
$('.box').html('<a id="anchor"></a>');
$('#anchor').attr('href','http://www.baidu.com').text('百度两下');
})
</script>
</body>
</html>
文档操作
文档操作主要包括四大块：插入操作 克隆操作 修改操作 删除操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="box">
11
</div>
<span>22</span>
<ul>33</ul>
<button>44</button>
<h2>22</h2>
<h5>55</h5>
<script src="jquery-3.3.1.js"></script>
<script>
$(function () {
// 11111111111111插入操作
// 1.往父元素插入 子元素可以为：stirng | element（js对象） | jquery元素
$('.box').append('<a>11</a>');
$('.box').append('哈哈');
$('.box').append($('span'));
// 2.子元素追加到父元素 stirng 、element(js对象) 、 jquery元素
$('<p></p>').appendTo($('div'));
// 3.添加到父元素的第一个位置
$('ul').prepend('<li>第一个儿子</li>');
// 4.添加到父元素的第一个位置
$('<p></p>').prependTo('ul');
// 5.在匹配的元素之后插入
$('ul').after('<h4>我是一个h3标题</h4>');
$('<h5>我是一个h5标题</h5>').insertAfter('ul');
$('ul').before('<h3>我是一个h3标题</h3>');
$('<h2>我是一个h2标题</h2>').insertBefore('ul');
//22222222222222克隆操作
$('button').click(function () {
// 1.clone()：克隆匹配的DOM元素
// 2.clone(true)：元素以及其所有的事件处理并且选中这些克隆的副本(简言之，副本具有与真身一样的事件处理能力)
$(this).clone(true).insertAfter(this);
});
//33333333333333修改操作
//将所有的h5标题替换为a标签
$('h5').replaceWith('<a href="#">hello world</a>');
//将所有h5标题标签替换成id为app的dom元素
$('h5').replaceWith($('#app'));
$('<h5>55</h5>').replaceAll('h2');
//44444444444444删除操作
$('ul').remove();
//清空掉ul中的子元素，保留ul
$('ul').empty();
})
</script>
</body>
</html>
阻止冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.fu{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 200px;
background-color: red;
display: none;
}
a{
text-decoration: none;
}
ul li{
float: left;
width: 100px;
height: 20px;
margin: 0 auto;
}
ul{
list-style: none;
}
.up{
color: blue;
cursor: pointer;
}
</style>
</head>
<body style="height: 2000px">
<a href="javascript:void(0)" id="changeFu">换肤</a>
<div class="fu">
<ul>
<li>
<a href="javascript:void(0)">女神来临</a>
</li>
<li>
<a href="javascript:void(0)">明星</a>
</li>
<span class="up">收起</span>
</ul>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
$(function () {
$('#changeFu').click(function (event) {
//阻止当前标签默认的行为
event.preventDefault();
//阻止冒泡
event.stopPropagation();
$('.fu').slideDown(1000);
// event.stopPropagation();+ event.preventDefault(); =return false
});
$('body, .up').click(function (event) {
$('.fu').slideUp(1000);
});
$('.fu ul li a').click(function (event) {
event.stopPropagation();
$(this).css('color', 'yellow').parent('li').siblings('li').find('a').css('color', 'blue');
});
$('.fu').click(function () {
return false;
})
})
</script>
</body>
</html>
事件委托
利用冒泡的原理，把事件加到父级上，触发执行效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>潘帅</li>
</ul>
<button id="btn">按钮</button>
<button id="btn1">按钮1</button>
<input type="text">
<script src="jquery-3.3.1.js"></script>
<script>
$(function () {
// 事件委托
// 如果未来出现有添加元素的可能性 优先考虑使用事件委托来处理
$('ul').on('click', 'li', function () {
alert(111);
});
$('ul').append('<li>和苏</li>');
// hover合成事件模仿mouseenter/leave只穿过父级元素被调用 mouseover/out父/子级元素都被调用
$('#btn').hover(function () {
console.log('进入');
}, function () {
console.log('离开');
});
//单双击事件
var timer = null;
$('#btn1').click(function () {
clearTimeout(timer);
timer = setTimeout(function () {
console.log('单机');
}, 300);
// 单双击冲突 时间大概300ms左右 阻止两次单机问题
});
$('#btn1').dblclick(function () {
clearTimeout(timer);
console.log('双机');
});
// 聚焦事件 失去焦点
// $('input[type=text]').focus();
// $('input[type=text]').blur();
// 按键向上向下弹起事件
$('input[type=text]').keydown(function () {
console.log(1);
});
$('input[type=text]').keyup(function () {
console.log(1);
});
// 表单控件事件
// change事件 input标签内容发生变化就触发这个事件
// select事件 选中的时候触发这个事件
// submit事件 form表单默认submit事件
});
</script>
</body>
</html>
@media的简单的使用
准备工作1：设置Meta标签
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
参数：
width = device-width：宽度等于当前设备的宽度
initial-scale：初始的缩放比例（默认设置为1.0，即代表不缩放）
user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）
准备工作2：加载兼容文件JS
<!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
@media screen and (min-width: 1170px) {
body {
background-color:red;
}
}
@media screen and (min-width:768px) and (max-width:992px) {
body {
background-color:yellow;
}
}
</style>
</head>
<body>
</body>
</html>
浙公网安备 33010602011771号