目录
[jquery dom操作](#jquery dom操作)
jquery对象：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script>
// 点击按钮将输入在输入框中的值弹框显示
window.onload = function(){
var input = document.querySelector('input');
var btn = document.querySelector('button');
btn.onclick = function(){
alert(input.value)
}
}
$(function(){
//成为jquery实例：$()
$('button:last').click(function(){
alert($('input').val())
})
})
</script>
</head>
<body>
<input type="text">
<button>确定(js)</button>
<button>确定(jquery)</button>
</body>
</html>浏览器运行结果如下：
jquery作为一般函数调用参数:
1.$() 匿名函数 入口函数区别
2.css选择器字符串 匹配元素
3.dom对象 jquery会把dom对象封装为jquery对象
4.html字符串 表示创建html中元素
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script>
/**
* jquery函数被当作一般函数调用 $(params)
* 1.函数内部参数可以是css选择器字符串 表示匹配元素
* $('div') $('.two') $('#three')
* 2.函数内部参数可以是dom对象 将他封装成jquery对象
* 3.函数内部参数可以是匿名函数 表示jquery入口函数
* 4.函数内部可以是html元素字符串 表示创建html元素
*/
$(function(){
$('button').click(function(){
console.log(this,$(this));
$(this).html('不想被网爆');
//创建h1标题并追加给body标签
$('<h1>sb</h1>').appendTo('body')
})
})
</script>
</head>
<body>
<button>网爆我</button>
</body>
</html>浏览器运行结果如下：
jquery事件机制
绑定事件：on(function(event){
event---jquery封装的事件对象 data
}) bind() one()一次性事件绑定
解绑事件：off() unbind()
事件类型：click() blur() focus() mouseenter() mousedown()
trigger 模拟事件
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script>
/**
* 1.给元素绑定事件 click(handler)
* 2.给元素绑定事件 on(事件类型，实际参数，handler(形式参数){})
*/
$(function () {
// //绑定事件
// $('button').on('click', [1, 2, 3, 4], function (event) {
// console.log(event, '事件对象', event.data);
// });
// //解绑事件 off解绑事件
// $('button').off('click');
// //绑定事件 bind方法绑定事件
// $('button').bind('click', 'terry', function (event) {
// console.log(event);
// });
// $('button').bind('mouseenter', function (event) {
// $(this).css({
// backgroundColor:'red'
// })
// });
// //unbind解绑事件
// $('button').unbind('click');
// //一次性解绑所有事件 unbind不加参数
// $('button').unbind();
// // $('button').on('click',function(){
// // $(this).html('被点击了')
// // });
// //事件代理 给父元素绑定事件 on(事件类型，选择器，实际参数，handler)
// $('body').on('click','button',function(){
// $(event.target).html('被点击了')
// })
// //一次性事件绑定 one 事件只执行一次
// $('button').one('click',{name:'larry'},function(event){
// console.log(event.data);
// })
// //模拟事件 trigger
// $('button').click(function(event,a,b,c){
// console.log('我被点击了',event,a,b,c);
// });
// $('button').trigger('click',[1,2,3]);
// //聚焦事件 focis
// $('input').focus(function () {
// $(this).css({
// backgroundColor: 'red'
// })
// })
// //失焦事件 blur
// $('input').blur(function () {
// $(this).css({
// backgroundColor: 'blue'
// })
// })
$('button').mouseenter(function(){
$(this).css({
backgroundColor:'red'
})
});
$('button').mouseleave(function(){
$(this).css({
backgroundColor:'blue'
})
});
$('button').dblclick(function(){
console.log('我被双击了');
});
})
</script>
</head>
<body>
<input type="text">
<button>点击我</button>
<button>点击我</button>
<button>点击我</button>
<button>点击我</button>
<button>点击我</button>
<button>点击我</button>
<button>点击我</button>
<button>点击我</button>
<button>点击我</button>
<button>点击我</button>
<button>点击我</button>
<button>点击我</button>
<button>点击我</button>
</body>
</html>浏览器运行结果如下：
jquery dom操作
addClass() 添加类名
removeClass() 移除类名
toggleClass() 切换类名 有类名则是移除 没有则是添加
clone() 深克隆和浅克隆 克隆事件和内容
attr()
removeAttr()
html() 元素的内容 包括文本和标签
text() 只获取元素的文本内容
val() 获取输入框值
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<style>
.active{
background-color: pink;
}
</style>
<script>
$(function(){
//在匹配到的元素后面增加内容 append
$('div').append('我是新增的内容');
$('div').append('<h1>一级标题</h1>');
//appendTo 将前面创建的元素添加给appendTo()中的目标元素
$('<p>段落标签</p>').appendTo('body');
$('div').after('<section>块级元素</section>');
$('div').before('<section>块级元素</section>');
$('button').click(function(){
alert('我被点击了')
});
//clone 克隆节点 true深克隆(内容事件都可克隆) false浅克隆(事件没有克隆)
$('button').clone(true).appendTo('body');
// //添加一个类名 addClass
// $('#one').addClass('active');
// //移除一个类名 removeClass
// $('#one').removeClass('two');
//切换类名
// $('div').click(function(){
// //toggleClass 切换类名 如果默认有类名则是移除，如果没有则是添加
// $(this).toggleClass('active');
// })
console.log($('body').text(),'元素文本内容');
console.log($('body').html(),'识别代码片段');
})
</script>
</head>
<body>
<button>点击我</button>
<div id="one" class="two" title="我是div的title">我是块级元素</div>
</body>
</html>浏览器运行结果如下：
