1.jquery的DOM文档操作
1.1兄弟之间插入
$('p').after('<h3>alex</h3>');
$('<h3>女神</h3>').insertAfter('p');
$('p').replaceWith('结婚了');
$('<h5>哈哈哈</h5>').replaceAll('h3');
- 初始化的时候,有初始化 渲染开销 对于 文档 DOM 如果是频繁性的切换 建议使用 display:block|none addClass
- 少量的切换 建议使用 创建元素 删除元素 性能消耗 创建->销毁
###1.2父.append(子) 子元素 可以是 string js对象 jquery对象
追加到父元素中的第一个元素
js
$(子).appendTo(父)
prepend() 方法在被选元素的开头(仍位于内部)插入指定内容
$('.box').prepend('<h5>哈哈哈2</h5>')
删除节点 事件保留
$('button').detach();
detach() 方法移除被选元素,包括所有的文本和子节点。然后它会保留数据和事件。
该方法会保留移除元素的副本,允许它们在以后被重新插入。
提示:如需移除元素及它的数据和事件,请使用 remove() 方法代替。
提示:如只需从被选元素移除内容,请使用 empty() 方法。
2.事件对象
DOM事件流(event flow )存在三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。
- 事件捕获(event capturing):通俗的理解就是,当鼠标点击或者触发dom事件时,浏览器会从根节点开始由外到内进行事件传播,即点击了子元素,如果父元素通过事件捕获方式注册了对应的事件的话,会先触发父元素绑定的事件。
- 事件冒泡(dubbed bubbling):与事件捕获恰恰相反,事件冒泡顺序是由内到外进行事件传播,直到根节点。
- 无论是事件捕获还是事件冒泡,它们都有一个共同的行为,就是事件传播,它就像一跟引线,只有通过引线才能将绑在引线上的鞭炮(事件监听器)引爆,试想一下,如果引线不导火了,那鞭炮就只有一响了!!!
//a form event.preventDefault();阻止默认事件
event.preventDefault();
//阻止冒泡
event.stopPropagation();
3.换肤
<a href="javascript:void(0)">单击此处什么也不会发生</a>
z-index:属性设置元素的堆叠顺序。z-index对应的值比另一个大的话,大的值对应的图在上面。
4.jquery的位置信息
- innerWidth innerHeight 内部宽和高 不包含border
- outerHeight outerWidth 外部宽和高 包含border
$('.box').innerHeight()
$('.box').outerWidth()
5.滚动固定导航栏
$(document).scroll(function () {
//获取黄色的盒子到顶部的距离
var top = $('.content').offset().top;
var docScrollTop = $(document).scrollTop()
if (docScrollTop > top){
$('.fix_header').show();
}else {
$('.fix_header').hide();
}
});
6.事件委托
<body>
<ul>
<li>alex1</li>
<li>alex2</li>
<li>alex3</li>
</ul>
<script src="jquery-3.3.1.js"></script>
<script>
$(function () {
$('ul li').click(function () {
alert($(this).text());
})
//事件委托
$('ul').on('click','li',function () {
alert($(this).text())
})
});
</script>
</body>
数组遍历使用forEach
var arr = ['alex','etaibai','nv'];
arr.forEach(function (el,index) {
console.log(el,index);
});
jquery伪数组遍历,使用each
$('li').each(function (index,el) {
console.log(el);
console.log(index);
})
7.json的使用
//后端响应回来的数据 json字符串
var a={"name":"tom","sex":"男","age":"24"}; //json
var b='{"name":"Mike","sex":"女","age":"29"}'; //jsonStr
console.log(JSON.parse(b)); #变成json对象
console.log(JSON.stringify(a)); #变成json字符串
1.Less是css高级语言
gulp webpack上线