jquery就是由js编写的另一种快捷效果包,方便开发者的引用dom,便利的使用事件效果
1.首先利用node的npm初始化项目 npm i -y,然后安装插件jquery( npm i jquery)
或者你可以去官网下载(反正是一串代码包,在里面找出来jquery.min.js外链就能用)
2.引入下载好的jquery
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
3.开始使用
选择器
$('#div1')//jquery获取dom
$('ul,div')//并集选择器
$('ul>li')//jq子代选择器
$('#div1+ul')//选择jq紧邻的一个弟弟元素,,一个选择器,并且它作为第一个选择器的同辈
$('#div1~ul')//选择自身以后所有的弟弟元素
CSS
1.$('#div1').css('color','yellow')//单行css样式
2.$('#div1').css({//多行css样式
'color':'red',
'background':'lightblue',
"width":"100px"
})
事件
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){
alert('啦啦啦')
});
on
在选择元素上绑定一个或多个事件的事件处理函数。
$('button').on('click',function () {
$('div').fadeToggle()
})
off
在选择元素上移除一个或多个事件的事件处理函数。
$('button').off('click')
one
为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数。
$('ul').one('mousemove',function(){
console.log('ulmove')
})
hover
一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法
$('button').hover(function(){
$('div').css('color','yellow')},function(){
$('div').css('color','green')
}
)
change
当元素的值发生改变时,会发生 change 事件。
$("input[type='text']").change( function() {
$('div').css('color','red')
});
//当input的值发生改变时(也就是输入数据时),字体颜色改变
jquery鼠标事件
click
当点击元素时,会发生点击事件。
$("p").click(function () {
$('p').css('color','red')
});
dblclick
当双击元素时,会发生 dblclick 事件。
$("div").dblclick(function () {
$('div').css('color','#fac')
});
mousedown
当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。
mousedown 与 click 事件不同,mousedown 事件仅需要按键被按下,而不需要松开即可发生。
mouseenter
当鼠标指针穿过元素时,会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。
与 mouseover 事件不同,只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素,同样会触发 mouseover 事件。
mouseleave
当鼠标指针离开元素时,会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。
与 mouseout 事件不同,只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。
mousemove
当鼠标指针在指定的元素中移动时,就会发生 mousemove 事件。
mousemove事件处理函数会被传递一个变量——事件对象,其.clientX 和 .clientY 属性代表鼠标的坐标
mouseout
当鼠标指针从元素上移开时,发生 mouseout 事件。
注释:与 mouseleave 事件不同,不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。
mouseover
当鼠标指针位于元素上方时,会发生 mouseover 事件。
mouseup
当在元素上放松鼠标按钮时,会发生 mouseup 事件。
jquery窗口事件
blur
当元素失去焦点时触发 blur 事件。
$('input[type="text"]').blur(function () {
$('div').css('color','yellow')
})
focus
当元素获得焦点时,触发 focus 事件。
$("input[type=text]").focus(function(){
this.blur();
});//当获得焦点时,无法使用此文本框
focusin
当元素获得焦点时,触发 focusin 事件。
focusin事件跟focus事件区别在于,他可以在父元素上检测子元素获取焦点的情况。
$("input[type=text]").focusin(function(){
$("div").css('color','red')
});
focusout
当元素失去焦点时触发 focusout 事件。
focusout事件跟blur事件区别在于,他可以在父元素上检测子元素失去焦点的情况。
$("input[type=text]").focusout(function(){
$("div").css('color','yellow')
});
jquery键盘事件
keyDown
当键盘或按钮被按下时,发生 keydown 事件。
$(window).keydown(function(event){
switch(event.keyCode) {
case 27:
console.log('esc')
break;
case 13:
console.log('Enter')
break;
// 不同的按键可以做不同的事情
// 不同的浏览器的keycode不同
// 常用keyCode: 空格 32 Enter 13 ESC 27
}
});
keypress
当键盘或按钮被按下时,发生 keypress 事件。
keyUp
当按钮被松开时,发生 keyup 事件。它发生在当前获得焦点的元素上。
resize
当调整浏览器窗口的大小时,发生 resize 事件。
$(window).resize(function(){
alert("Stop it!");
});