jQuery基础——HTML
2020-08-19 20:26
1141 查看
一、事件绑定
1.事件绑定
1）给标签的事件属性赋值（函数的调用） - this是window
2）节点.事件属性 = 函数 - this是事件源
3)节点.addEventLisenner(事件名称, 函数) - 事件名称要去掉on; this是事件源
可以给同一个标签的同一个事件绑定不同的驱动程序（一般在原来的功能已经实现了，需要在原功能的基础上添加新的公能的时候才考虑这个问题）
<button id="btn1" type="button">按钮1</button>
<button id="btn1" type="button">按钮1</button>
<button id="btn2" type="button">按钮2</button>
<script type="text/javascript">
btn1 = document.getElementById('btn1')
// 绑定事件
btn1.addEventListener('click', function(){
console.log(this)
alert('按钮1被点击')
})
// 方式绑定两个驱动程序
btn2 = document.getElementById('btn2')
// btn2.onclick = function(){
// alert('按钮2被点击')
// }
// btn2.onclick = function(){
// alert('按钮2再次被点击')
// }
btn2.addEventListener('click', function(){
alert('按钮2被点击')
})
btn2.addEventListener('click', function(){
alert('按钮2再次被点击')
})
</script>
二、事件类型
1.常用事件类型
1）onclick - 标签被点击事件(可以绑定在绝大多数的可见标签上)
2）onload - 页面加载完成对应的事件(一般绑定在window上)
3）onmouseover - 鼠标悬停在标签上对应的事件
4）onmouseout - 鼠标离开标签对应的事件
5）onkeydown - 按下按键对应的事件(可以绑定在表单相关标签上)
6）onchange - 值改变事件（）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// 2)onload - 页面加载完成
window.onload = function(){
// 这儿的代码会在标签都加载完成后执行
var p1 = document.getElementById('p1')
console.log(p1)
}
</script>
</head>
<body>
<p id="p1" >我是段落1</p>
<input type="" name="" id="input1" value="" />
<div id="div1" style="width: 100px; height: 100px; background-color: goldenrod;"></div>
<input type="button" name="" id="input2" value="确定" />
<select name="" id="select1">
<option value="">四川</option>
<option value="">重庆</option>
<option value="">北京</option>
</select>
<input type="radio" name="sex" id="boy-input" value="男" /><label for="boy-input">男</label>
<input type="radio" name="sex" id="girl-input" value="女" /><label for="girl-input">女</label>
<input type="checkbox" name="" id="lq" value="篮球" /><label for="lq">篮球</label>
<script type="text/javascript">
p1 = document.getElementById('p1')
input1 = document.getElementById('input1')
div1 = document.getElementById('div1')
input2 = document.getElementById('input2')
select1 = document.getElementById('select1')
// 3)onmouseover
p1.onmouseover = function(){
console.log('鼠标悬停')
}
// 4)onmouseout
p1.onmouseout = function(){
console.log('鼠标离开')
}
// 5)onkeydown
input1.onkeydown = function(){
console.log('input1: 键盘按下')
}
input2.onkeydown = function(){
console.log('input2:键盘按下')
}
select1.onkeydown = function(){
console.log('select1:键盘按下')
}
// 6)onchange
boyInput = document.getElementById('boy-input')
girlInput = document.getElementById('girl-input')
lqInput = document.getElementById('lq')
boyInput.onchange = function(){
console.log('性别：男')
}
girlInput.onchange = function(){
console.log('性别：女')
}
lqInput.onchange = function(){
console.log('篮球')
}
select1.onchange = function(){
console.log('地址发生改变')
}
</script>
</body>
</html>
三、事件对象
- 事件对象
事件驱动程序对应的函数在调用的时候，系统会自定传一个参数，这个参数就是当前事件的事件对象
1）鼠标事件：事件发生的时候鼠标的位置信息
clientX/clientY - 鼠标到浏览器内容最左边的距离和顶部的距离
offsetX/offsetY - 鼠标到事件源最左边的距离和顶部的距离
2)键盘事件：被按下的键
key - 按键对应的字符
keyCode - 按键对应的字符的编码值(小写字母返回的是对应的大写字母的编码)
3）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#div1{
margin-left: 100px;
}
</style>
</head>
<body>
<!-- 1.鼠标事件 -->
<div id="div1" style="width: 100px; height: 100px; background-color: salmon;"></div>
<script type="text/javascript">
div1 = document.getElementById('div1')
div1.onclick = mouseAction
// 参数event就是事件对象
function mouseAction(event){
// console.log(event)
var offsetY = event.offsetY
if(offsetY <= 50){
this.style.backgroundColor = 'red'
}else{
this.style.backgroundColor = 'green'
}
}
</script>
<!-- 2.键盘事件 -->
<input type="" name="" id="input1" value="" />
<script type="text/javascript">
document.getElementById('input1').onkeydown = function(event){
console.log(event)
}
</script>
<!-- 3.值改变事件 -->
<select name="city" id="city">
<option value="四川">四川</option>
<option value="重庆">重庆</option>
<option value="北京">北京</option>
<option value="河南">河南</option>
<option value ="河北">河北</option>
<option value ="湖北">湖北</option>
</select>
<script type="text/javascript">
document.getElementById('city').onchange = function(event){
// 获取被选中的城市
console.log(this.value)
}
</script>
</body>
</html>
四、事件捕获
1.事件传递
发生在子标签上的事件会传递父标签
2.事件捕获
阻止事件传递给父标签 (在父标签和子标签都对同一个事件进行绑定的时候才需要阻止)
事件对象.stopPropagation()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body div{
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div id="div1" style="width: 400px; height: 400px; background-color: red;">
<div id="div2" style="width: 250px; height: 250px; background-color: green;">
<div id="div3" style="width: 100px; height: 100px; background-color: blue;">
</div>
</div>
</div>
<script type="text/javascript">
document.getElementById('div3').onclick = function(event){
alert('div3')
// 事件捕获
event.stopPropagation()
}
document.getElementById('div2').onclick = function(event){
alert('div2')
event.stopPropagation()
}
document.getElementById('div1').onclick = function(event){
alert('div1')
}
</script>
</body>
</html>
五、认识jQuery
-
什么是jQuery
jQuery是使用js封装的一个库，本质就是一个js文件。
通过jQuery类的对象来提供功能，能够让DOM操作变得很简单. -
怎么使用jQuery - 导入jQuery对应的js文件
1)导入jQuery
本地：
远程：
2)怎么用
jQuery中：$就是jQuery类， $()就是jQuery对象
jQuery对象的本质就是像数组一样的容器对象，容器中的元素是标签对应的节点对象, 除了元素以外还有额外的属性和方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 1.导入jQuery -->
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<!-- <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" type="text/javascript" charset="utf-8"></script> -->
</head>
<body>
</body>
</html>
<script type="text/javascript">
// 1.数组对象
arr1 = [10, 20, 30, 40]
console.log(arr1)
console.log(arr1[0])
console.log(arr1.length)
arr1.sort(function(a,b){
return a-b
})
// 2.jQuery对象
console.log($())
</script>
六、jQuery的DOM操作
1.获取节点
$(css选择器) - 获取css选择器选中的标签
<h1>1.获取节点</h1>
<p id="p1">我是段落1</p>
<p class="c1">我是段落2</p>
<a href="" class="c1">我是超链接1</a>
<a href="" class="c2">我是超链接2</a>
<span class="c1">我是span1</span>
<img src="img/thumb-2.jpg" class="c2">
<div id="div1">
<p>我是段落<a href="">我是超链接3</a></p>
<a href="">我是超链接4</a>
</div>
<script type="text/javascript">
// 通过不同的选择器选中不同的标签
p1 = $('#p1')
console.log(p1)
c1 = $('.c1')
console.log(c1)
allA = $('a')
console.log(allA)
a4 = $('#div1>a')
console.log(a4)
// 注意：对jQuery对象进行的节点操作，会作用于jQuery对象中所有的节点
c1.css('background-color', 'red')
</script>
2.创建节点和添加
1）创建节点
$(html代码)
2) 添加节点
节点对象1.append(节点对象2) - 在节点1的最后添加节点2（节点1和节点2是父子关系）
节点对象1.prepend(节点对象2) - 在节点1的最前面添加节点2 （节点1和节点2是父子关系）
节点对象1.after(节点对象2) - 在节点1的后面插入节点2（节点1和节点2是兄弟关系）
节点对象1.before(节点对象2) - 在节点1的前面插入节点2（节点1和节点2是兄弟关系）
<h1>2.创建和添加节点</h1>
<div id="box1">
<p>我是段落5</p>
<h1>标题1</h1>
<hr>
<h1>标题2</h1>
</div>
<script type="text/javascript">
// 创建节点
a = $('<a href="https://www.baidu.com" style="color: red;">百度</a>')
sex = $('<input type="radio" value="男" id="boy"/><label for="boy">男</label>')
// 添加节点
$('#box1').append(a)
$('#box1').prepend(sex)
$('#box1>p').before($('<br><img src="img/a3.jpg"/>'))
$('#box1>p').after($('<img src="img/a1.jpg"/>'))
$('#box1>h1').after($('<p>我是段落</p>'))
</script>
3.删除
节点对象.remove()
<script type="text/javascript">
$('p').remove()
</script>
4.jQuery对象和js对象的转换
jQuery对象是容器对象，容器中元素就是标签对应的节点对象，本质就是js对象
1)jQuery对象转换成js对象: 取出jQuery容器中的元素
2)js对象转换jQuery对象：$(js对象)
<p id="p2" class="c3">我是最后一个段落</p>
<a href="" class="c3">我是最后一个超链接</a>
<script type="text/javascript">
qp2 = $('#p2')
console.log(qp2)
jp2 = qp2[0]
console.log(jp2)
jp2.innerText = '你好！'
$(jp2).before($('<img src="img/picture-3.jpg" />'))
</script>
<!-- =================5.事件绑定==================
节点对象.on(事件名,函数) - 函数中的this是事件源节点(this是js对象)
-->
<button type="button">按钮1</button>
<button type="button">按钮2</button>
<script type="text/javascript">
$('button').on('click', function(event){
console.log(this)
console.log($(this))
alert(this.innerText+'被点击')
})
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- web基础（HTML、JavaScript、JQuery、Bootstrap）(有些图片有空再引入）
- 05.WEB-HTML之JQuery基础学习总结(一)
- HTML之JQuery基础实现可编辑表格
- HTML/CSS/Js/Jquery/PHP网站0基础开发到大神系列【飞鸽学院】
- jQuery基础 - 如何处理HTML标签属性
- HTML基础（jQuery续）
- 5 HTML&JS等前端知识系列之jquery基础
- 【转】C#类似Jquery的html解析类HtmlAgilityPack基础类介绍及运用
- HTML基础（jQuery）
- # 7_09_Web基础知识（html、css、jquery、javascript）
- jQuery HTML相关的基础知识梳理
- 前端基础-JS中innerHTML、outerHTML、innerText 、outerText、value的区别与联系？jQuery中的text()、html()和val() ？
- 黄聪：C#类似Jquery的html解析类HtmlAgilityPack基础类介绍及运用
- Web基础 HTML CSS JS JQuery AJAX
- jQuery基础教程之DOM操作-HTML&文本&值的操作
- jquery基础，隐藏 HTML 文档中所有的 <p> 元素
- Html基础详解之（jquery）之二
- jquery基础研究学习【HTML】
- jQuery基础----11jQuery HTML-捕获
- Java_Web基础--JDBC/HTML/Servelet/Web/JSP/jQuery(你必须要懂得基础)