jquery
JavaScript的一个问题是十分的繁琐 如果真个页面全部由JavaScript来编写 那么效率实在是不怎么让人恭维
因此 jquery就出现了
JavaScript和jquery的区别
-
Javascript是一门编程语言，我们用它来编写客户端浏览器脚本。
-
jQuery是javascript的一个库，包含多个可重用的函数，用来辅助我们简化javascript开发
-
jQuery能做的javascipt都能做到，而javascript能做的事情，jQuery不一定能做到
注意：一般情况下，是库的文件，该库中都会抛出来构造函数或者对象，如果是构造函数，那么使用new关键字创建对象，如果是对象直接调用属性和方法
DOM文档加载的步骤
-
解析HTML结构。
-
加载外部脚本和样式表文件。
-
解析并执行脚本代码。
-
DOM树构建完成。
-
加载图片等外部文件。
-
页面加载完毕。
执行时间不同
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。
编写个数不同
window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个
$(document).ready()可以同时编写多个，并且都可以得到执行
简化写法不同
window.onload没有简化写法
$(document).ready(function(){})可以简写成$(function(){});
在使用jQuery的时候 一定要在开头写上入口函数
$(document).ready(function(){})或是$(function(){});
jquery选择器
// 基本选择器
// 1.id选择器
$('#brother').css('color','black');
// 2.标签选择器
$('a').css('color','yellow')
// 3.类选择器
$('.item').css('background','#FC4708')
// 4.通配符选择器
// console.log($('*').html())
console.log($('a').val())
层级选择器
// 后代选择器
console.log($('div p'))
$('div p').css('color','red')
// 子代选择器
$('div >p').css('background','green')
// 毗邻选择器 匹配 所有紧接在#brother元素后的下一个元素
$('#brother+ li').css('color','yellow')
// 兄弟选择器
// 匹配所有#brother之后的所有兄弟姐妹元素
$('#brother~li').css('background','#996633')
// :first 获取第一个元素
$('li:first').text('真的吗？')
// :last 获取最后一个元素
$('li:last').html('真的吗？')
//一个给定索引值的元素
console.log($('p:eq(3)').text())
基本过滤选择器
<ul>
<li>哈哈哈</li>
<li>嘿嘿嘿</li>
<li>天王盖地虎</li>
<li>小鸡炖蘑菇</li>
</ul>
//:first 获取第一个元素
$('li:first').text('真的吗？')
//:last 获取最后一个元素
$('li:last').html('我是最后一个元素？')
//:odd 匹配所有索引值为奇数的元素，从0开始计数
$('li:odd').css('color','green');
//:even 匹配所有索引值为偶数的元素，从0开始计数
$('li:even').css('color','red')
//:eq(index) 获取给定索引值的元素 从0开始计数
$('li:eq(1)').css('font-size','30px')
//:gt(index)匹配所有大于给定索引值的元素
$('li:gt(1)').css('font-size','40px')
//:lt(index) 匹配所有小于给定索引值的元素
$('li:lt(1)').css('font-size','40px')
//一个给定索引值的元素
console.log($('p:eq(3)').text())
属性选择器
<div id="box">
<h2 class="title">属性元素器</h2>
<p class="p1">我是一个段落</p>
<ul>
<li id="li1">分手应该体面</li>
<li class="what">分手应该体面</li>
<li class="what">分手应该体面</li>
<li class="heihei">分手应该体面</li>
</ul>
<form action="" method="post">
<input name="username" type='text' value="1" checked="checked"></input>
<input name="username1111" type='text' value="1"></input>
<input name="username2222" type='text' value="1"></input>
<input name="username3333" type='text' value="1"></input>
<button class="btn-default">按钮1</button>
<button class="btn-info">按钮1</button>
<button class="btn-success">按钮1</button>
<button class="btn-danger">按钮1</button>
</form>
</div>
//属性选择器
//标签名[属性名] 查找所有含有id属性的该标签名的元素
$("li[id]").css('color','red')
//[attr=value] 匹配给定的属性是某个特定值的元素
$('li[class=what]').css('font-size','30px')
//[attr!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素
$('li[class!=what]').css('color','darkgreen')
//匹配给定的属性是以某些值开始的元素
$('input[name^=username]').css('background','red')
//匹配给定的属性是以某些值结尾的元素
$('input[name$=222]').css('background','yellow')
//匹配给定的属性是以包含某些值的元素
$("button[class*='btn']").css('background','#0000FF')
筛选选择器
<div id="box">
<p class="p1">
<span>我是第一个span标签</span>
<span>我是第二个span标签</span>
<span>我是第三个span标签</span>
</p>
<button>按钮</button>
</div>
<ul>
<li class="list">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
//获取第n个元素 数值从0开始
$('span').eq(0).css('font-size','30px')
//first()获取第一个元素
$('span').first().css('background','red')
//last()获取最后一个元素
//.parent() 选择父亲元素
$('span').parent('.p1').css({width:'300px',height:'300px',background:'yellow'})
//.siblings()选择所有的兄弟元素
$('.list').siblings('li').css('color','red')
//.find()
//查找所有的后代元素
$('div').find('button').css('background','#313131')
操作表单域中的value值
HTML
<form action="">
<input type="radio" name="sex" value="112" />男
<input type="radio" name="sex" value="11" checked="" />女
<input type="radio" name="sex" value="11" />gay
<input type="checkbox" value="a" checked=""/>吃饭
<input type="checkbox" value="b" checked=""/>睡觉
<input type="checkbox" value="c" checked=""/>打豆豆
<select name="timespan" id="timespan" class="Wdate" >
<option value="1">8:00-8:30</option>
<option value="2">8:30-9:00</option>
<option value="3">9:00-9:30</option>
</select>
<input type="text" name="" id="" value="111" />
</form>
JS
$(function(){
//1.获取单选框被选中的value值
console.log($('input[type=radio]:checked').val())
//2.复选框被选中的value获取到第一个被选中的值
console.log($('input[type=checkbox]:checked').val())
//3.下拉列表被选中的值
var obj = $("#timespan option:selected");
var artime_val = obj.val();
console.log(artime_val)
var artime_text = obj.text();
console.log("val:"+artime_val+" text"+ artime_text );//val:3 text 9:00-9:30
//设置value 设置选中项
$('input[type=radio]').val(['112'])
$('input[type=checkbox]').val(['a','b'])
//设置下拉列表框的选中值，必须使用select
$('select').val(['3','2'])
//文本框
console.log($("input[type=text]").val())//获取文本框中的值
//设置值
$('input[type=text]').val('试试就试试')
})
//文本框的获取内容在实际运用中曾经出现无法获得，后面所采去的方法就是设置了change。捕获发生改变之后的值。
jQuery的文档操作
1、插入操作
一、父元素.append(子元素) 追加某元素 父元素中添加新的元素
var oli = document.createElement('li');
oli.innerHTML = '哈哈哈'
//jquery中的dom操作
//1.append(content)追加 往父元素中添加新的元素
//content:string | element | jquery元素
$('ul').append('<li>1233</li>')
$('ul').append(oli)
//如果直接的内容是当前页面中的某些元素，那么这些元素将从原位置上消失。简言之，就是一个移动操作
$('ul').append($('#app'))
二、子元素.appendTo(父元素) 追加到某元素 子元素添加到父元素
$('<li>天王盖地虎</li>').appendTo($('ul')).addClass('hu')
三、prepend（） 前置添加， 添加到父元素的第一个位置
$('ul').prepend('<li>我是第一个</li>')
四、prependTo 后置添加，第一个元素添加到父元素中
$('<a href="#">路飞学诚</a>').prependTo('ul')
五、父.after(子) 在匹配的元素之后插入内容 与 子.insertAfter(父)
$('ul').after('<h4>我是一个h3标题</h4>')
$('<h5>我是一个h2标题</h5>').insertAfter('ul')
六、父.before(子) 在匹配的元素之前插入内容 与 子.insertBefor(父)
$('ul').before('<h3>我是一个h3标题</h3>')
$('<h2>我是一个h2标题</h2>').insertBefore('ul')
2、复制操作
clone() 克隆匹配的DOM元素并且选中这些克隆的副本
$('button').click(function() {
// 1.clone()：克隆匹配的DOM元素并且选中这些克隆的副本。
// 2.clone(true)：元素以及其所有的事件处理并且选中这些克隆的副本(简言之，副本具有与真身一样的事件处理能力)
$(this).clone(true).insertAfter(this);
})
3、替换操作
一、replaceWith()：将所有匹配的元素替换成指定的HTML或DOM元素。
//将所有的h5标题替换为a标签
$('h5').replaceWith('<a href="#">hello world</a>')
//将所有h5标题标签替换成id为app的dom元素
$('h5').replaceWith($('#app'));
二、replaceAll():用匹配的元素替换掉所有 selector匹配到的元素
$('<br/><hr/><button>按钮</button>').replaceAll('h4')
4、删除操作
一、remove() 删除节点后，事件也会删除（简言之，删除了整个标签）
$('ul').remove();
二、detach() 删除节点后，事件会保留
var $btn = $('button').detach()
//此时按钮能追加到ul中
$('ul').append($btn)
三、empty(): 清空元素中的所有后代节点
//清空掉ul中的子元素，保留ul
$('ul').empty()
position
获取匹配元素相对父元素的偏移位置
offset
获取匹配元素在当前视口的相对偏移,返回的对象包含两个整型属性：top 和 left
$("p").offset()
$('div').offset().top
$("p").offset().left
scrollTop
获取匹配元素相对滚动条顶部的偏移 文档被卷起的像素值
scrollLeft
获取匹配元素相对滚动条左侧的偏移 文档被卷起的像素值
//获取匹配元素相对滚动条顶部的偏移 文档被卷起的像素值
$(document).scrollTop()
$(document).scrollLeft()
//监听文档滚动的jquery方法
$(document).scroll(function(){
console.log($(document).scrollTop())
console.log($(document).scrollLeft())
})
innerHeight
获取第一个匹配元素内部区域高度（包括补白、不包括边框）
$('#box').innerHeight()
innerWidth
获取第一个匹配元素内部区域宽度（包括补白、不包括边框）
$('#box').innerWeight()
outerHeight
获取第一个匹配元素外部高度（默认包括补白和边框）
$('#box').outerHeidth()
outerWeight
获取第一个匹配元素外部宽度（默认包括补白和边框）
$('#box').outerWeidth()
weight
取得匹配元素当前计算的宽度值
//获取值
$('p').width()
//设置值
$('p').width(200)
height
取得匹配元素当前计算的高度值
//获取值
$('p').height()
//设置值
$('p').Height(200）
JQuery的筛选方法
其中hasClass比较有意思
jquery的事件
事件的概念
HTML中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件、页面的滚动事件onscroll等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的，就需要了解一下“事件流”的概念
什么是事件流
事件流描述的是从页面中接收事件的顺序
1、DOM事件流
“DOM2级事件”规定的事件流包括三个阶段：
① 事件捕获阶段；
② 处于目标阶段；
③ 事件冒泡阶段
当我们点击这个btn的时候，看看页面都输出了什么：
在解释输出结果为什么是这样之前，还有几个知识点需要了解一下即可：
1、addEventListener
addEventListener 是DOM2 级事件新增的指定事件处理程序的操作，这个方法接收3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。
2、document、documentElement和document.body三者之间的关系：
document代表的是整个html页面；
document.documentElement代表的是<html>标签；
document.body代表的是<body>标签；
接着我们就来聊聊上面的例子中输出的结果为什么是这样：
在标准的“DOM2级事件”中规定，事件流首先是经过事件捕获阶段，接着是处于目标阶段，最后是事件冒泡阶段。这里可以画个图示意一下:
首先在事件捕获过程中，document对象首先接收到click事件，然后事件沿着DOM树依次向下，一直传播到事件的实际目标，就是id为btn的a标签。
接着在事件冒泡过程中，事件开始时由最具体的元素（a标签）接收，然后逐级向上传播到较为不具体的节点（document）。
需要注意的点：由于老版本的浏览器不支持事件捕获，因此在实际开发中需要使用事件冒泡，在由特殊需要时再使用事件捕获。
补充：
1、IE中的事件流只支持“事件冒泡”，但是版本到了IE9+以后，实现了“DOM2级事件”，也就是说IE9+以后也可以在捕获阶段对元素进行相应的操作。
2、在DOM事件流中，实际的目标在“捕获阶段”不会接收到事件。而是在“处于目标阶段”被触发，并在事件处理中被看成“冒泡阶段”的一部分。然后，“冒泡阶段”发生，事件又传播回文档。
jquery的常用事件
当有多个时间存在的时候 会存在不想要的时间也冒泡的情况 这个时候 我们就要阻止不想要的时间冒泡
在想要执行的事件加上ev.stopPropagation();
阻止默认事件
ev.preventDefault();
-------------------本内容总结自路飞学城python-book和小马老师
浙公网安备 33010602011771号