<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title></head>
<body>
<div class="box1">hello</div>
</body>
<script src="jquery-3.6.0.js"></script>
<script>
/* jQuery操作网页元素的几个步骤
1. 使用选择器选中网页元素，返回一个指向被选中的元素的jQuery对象
（熟悉常用的选择器，可以结合CSS选择器来记）
2. 通过jQuery的对象的方法操作元素
(熟悉有哪些常用方法)
*/
var box1=$('.box1');
console.log(box1)
//jQuery对象暴露了2个方法
//1.html()插入或读取元素内部的html代码片段
// 2.text()插入或读取元素内部的text纯文本
//这两个方法都可以有参数或没有
//有参数是改元素的内容 没有参数是读元素的内容
console.log(box1.html())
console.log(box1.text())
box1.html('hello jQuery')
box1.text('hello world')
//区别text函数只能是纯文本 ，html可以插入代码片段
box1.html('<a href="http://www.baidu.com">百度</a>')//可以解析
box1.text('<a href="http://www.baidu.com">百度</a>')//纯文本
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title></head>
<body>
<!-- html(),text()这两个函数不能操作input元素，需要用val（）函数 有参数是改，无参数是读-->
<!-- 表单元素身上都有一个value属性，这属性用来接收用户输入的内容 -->
<!-- html(),text()有参数用的多 ，val（）无参数用的多 -->
<input type="text" class="username" value="张飞"/> <input type="radio" name="sex" value="男" id="M" checked/>
<label for="M">男</label>
<input type="radio" name="sex" value="女" id="W"/>
<label for="W">女</label>
<select class="job">
<option value="Java" selected>Java工程师</option>
<option value="Linux" >Linux工程师</option>
<option value="MySQL" >Mysql工程师</option>
<option value="Web" >Web工程师</option>
</select>
</body>
<script src="jquery-3.6.0.js"></script>
<script>
var username= $('.username')
console.log(username.val())
console.log(username.val("马超"))
//获取选中的单选按钮上的value
var sex=$('[name=sex]:checked').val()
console.log(sex)
var job=$('.job').val()
console.log(job)
</script>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03.事件监听</title>
<script src="jquery-3.6.0.js"></script>
</head>
<body οnkeyup="handleGlobleKeyUp()">
<button οnclick="handleClick()">单击事件</button>
<button οndblclick="handleDbClick()">双击事件</button>
<input type="text" οnblur="handleBlur()"
οnfοcus="handleFocus()" οnkeyup="handleKeyup()" οnkeydοwn="handleKeydown()"/>
<div style="width: 100px;height: 100px;background-color: orange"
οnmοuseleave="handleMouseLeave()" οnmοuseοver="handlieMouseMove()"></div>
</body>
<script>
function handleClick(){
console.log('俺被单机了')
}
function handleDbClick(){
console.log('俺被双机了')
}
function handleBlur(){
console.log('失去鼠标焦点了')
}
function handleFocus(){
console.log('得到鼠标焦点了')
}
function handleKeyup(){
console.log('键盘弹起')
}
function handleKeydown(){
console.log('键盘按下')
}
//当事件触发的时候，在回调函数的时候，会传回一个事件对象，可以通过event拿到事件对象
function handleGlobleKeyUp(){
if(event.keyCode===16){
console.log("回车确认")
} }
// function handleGlobleKeyDown(){
// console.log(event.keyCode)
// }
function handleMouseLeave(){
console.log("鼠标离开")
}
function handlieMouseMove(){
console.log(event.clientX,event.clientY)
}
</script>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.6.0.js"></script>
</head>
<body>
<button id="btn1">单击事件</button>
<button id="btn2">双击事件</button>
<input type="text" id="inp1"/>
</body>
<script>
// function handleClick(){
// console.log('我被单击了')
// }
// var btn1= $('#btn1')
// btn1.click(handleClick) $('#btn1').click(function (){
console.log('我被单击了了')
})
$('#btn2').dblclick(function (){
console.log('我被双击了了')
})
$('#inp1').blur(function (){
console.log('失去鼠标焦点')
})
$('#inp1').focus(function (){
console.log('得到鼠标焦点')
})
$('#inp1').keyup(function (){
console.log('弹起')
})
$('#inp1').keydown(function (){
console.log('按下')
})
</script>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05 使用0n/off 注册和删除事件</title>
<script src="../jquery-3.6.0.js"></script>
</head>
<body>
<button id="add">添加</button>
<button id="rm">删除事件</button>
</body>
<script>
// $('#add').on('click',function (){
// console.log('单击了添加按钮')
// })
// $('#rm').on('click',function (){
// $('#add').off('click')
// })
//on=bind off=unbind
$('#add').bind('click',function (){
console.log('单击了添加按钮')
})
$('#rm').bind('click',function (){
$('#add').unbind('click')
})
</script>
</html> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.6.0.js"></script>
</head>
<body>
<div id="box" style="width: 300px;height: 300px;background-color: yellow">
<button class="add">添加</button>
<button class="add">添加</button>
<button class="add">添加</button>
<button class="del">删除</button>
<button class="del">删除</button>
<button class="del">删除</button>
</div>
</body>
<script>
$('body').click(function (){
console.log('body被单击了')
})
$('#box').click(function (){
console.log('父div被单击了')
event.stopPropagation() //事件停止向上传播
})
$('.add').click(function (){
console.log('添加被单击了')
event.stopPropagation()
})
$('.del').click(function (){
console.log('删除被单击了')
event.stopPropagation()
})
</script>
</html>jQuery 选择器
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。
元素选择器
jQuery 元素选择器基于元素名选取元素。
在页面中选取所有 <p> 元素
$("p")
#id 选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
通过 id 选取元素语法如下：
$("#test")
.class 选择器
jQuery 类选择器可以通过指定的 class 查找元素。
语法如下：
$(".test")
jQuery 事件
jQuery 是为事件处理特别设计的。
什么是事件？
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
jQuery 事件方法语法
在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。
页面中指定一个点击事件：
$("p").click();
下一步是定义了点击后触发事件。您可以通过一个事件函数实现：
$("p").click(function(){ // 动作触发后执行的代码!! });
常用的 jQuery 事件方法
$(document).ready() 方法允许我们在文档完全加载完后执行函数。该事件方法在 jQuery 语法 章节中已经提到过。
click() 方法是当按钮点击事件被触发时会调用一个函数。
该函数在用户点击 HTML 元素时执行。
.
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
