jQuery的使用

jquery对象：

jquery作为一般函数调用参数:

jquery事件机制

jquery dom操作

jquery对象：

<!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中元素

<!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 模拟事件

<!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() 获取输入框值

<!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>

浏览器运行结果如下：