介绍
jquery就是一个封装大量js方法的 js库，兼容ie8以上浏览器
参考文档：
上线使用
<script src="jquery.min.js"></script>
开发使用
<script src="jquery.js"></script>
对象转换
jquery对象=>js
<div id="app"></div>
<script>
$("#app")//jquery对象，是一个类数组
//获取js对象
$("#app")[0];
$("#app").get(0);
</script>
js=>jquery对象
<script>
var oDiv = document.getElementById("app");
$(oDiv);//jquery对象
</script>
入口函数
//js操作
window.onload = function(){
//执行代码
}//需网页全部（包括图片)加载，且只执行一次
//jquery操作
$(document).ready(function(){
//代码
})//dom加载即可，可执行多次
//可简写,推荐使用
$(function(){
})
库冲突
jQuery.noConflict();//转移$的控制权
(function($){
$(function(){
$(".box").hide();
})
})(jQuery);
选择器
现在开发不怎么使用，了解常用的即可(id、class、标签)
重点掌握eq
dom操作
html操作
插入节点
删除节点
-
remove()
- 既删除节点，又删除绑定的
事件
- 既删除节点，又删除绑定的
-
detach()
- 删除节点，不删除事件
-
empty()
- 清空盒子
复制节点
clone()，参数选择true与false，参数为true完全克隆对象，包括事件
替换节点
- replaceWith()
- replaceAll()
包裹节点
-
wrap()
-
unwrap()
- 删除包裹的父节点
-
wrapInner()
属性操作
attr()
//设置属性
$('div').attr('id','box');
//多个
$('p').attr({
id:'box',
title:'title'
})
//获取属性值
console.log($('div').attr('id'));//box
removeAttr()
移除属性
类操作
addClass()
$('div').addClass('active');//单个
$('div').addClass('a' 'b' 'c')//多个，用空格分隔
removeClass()
hasClass()
可判断是否存在类，返回布尔值
toggleClass()
切换类
$('div').toggleClass('active');
值操作
html()
//获取
.html()
//设置
.html('<p>hello</p>')
text()
文本操作
val()
值操作
筛选操作
css操作
css()
console.log($('.box').css('color'));//获取
$('.box').css('color','red');//设置
$('.box').css('font-size','20');
$('.box').css('fontSize','20');//支持驼峰
//设置多值
$('.box').css({
color:'red',
fontSsize:'20'//此处必须用驼峰
});
offset()
获取当前窗口的相对偏移量
var offst = $('.box').offset();//obj {top:xx,left:xx}
-
scrollTop()
-
scrollLeft()
获取滚动条的相对偏移量
$(window).scroll(function(){
console.log($(this).scrollTop())
//滚动到某个位置显示滚动条
var scrollTop = $(this).scrollTop()
if(scrollTop > offset.top ){
//要显示导航条
$('.tab').show()
//动画效果
$('.tab').stop().fadeIn(400)
//等价于
//$('.tab').css('display','block');
}else{
$('.tab').hide();
$('.tab').stop().fadeOut(400)
}
})
width()&height()
//获取content 宽、高
$('.box').width()//Number
//设置,传参即可
innerWidth()&innerHeight()
//获取width+padding
outerWidth()&outerHeight()
//获取width+padding+border
事件
鼠标
click()
$('.box').click(function(){
alert($(this).text());
})
dbclick()
单击与双击事件冲突的解决
mousedown()
鼠标按下
mouseup()
鼠标抬起
mousemove()
鼠标移动
mouseover()
鼠标移入，穿过被选元素或者当前被选元素的子元素，不推荐使用
mouseout()
移出
mouseenter()
移入(仅限当前元素)，只穿过被选元素，项目中用的较多
可以做一个下拉菜单，注意使用动画时，先停止上一个动画stop()
$('.box').stop().slideDown(ms);
mouseleave()
移出
focus()
聚焦
<input type="text" class="text"/>
$('.text').focus();//获取焦点
需求：
//使用户无法使用输入框
$('input[type=text]').focus({
this.blur();
})
blur()
失焦
键盘
keydown()
键盘按下
空格：32
enter：13
esc：27
$(window).keydown(function(event){
console.log(event.keyCode)
//不同的按键做不同的事情
switch(event.keyCode){
case 32:
//执行操作
break;
default:
break;
}
}
})
表单
change()
元素值改变时触发
$('input[type = text]').change(
function(){
console.log('值变化了')
var val = $(this).val();
//正则校验
if(/^\d{4}$/.test(val)){
console.log('输入正确')
}else{
console.log('输入错误')
}
})
select()
submit()
$("form").submit(function(event){
//阻止默认行为
event.preventDefault();
})
事件冒泡
子元素绑定的事件会向上传递
//阻止冒泡
event.stopPropagation()
//也可用return false来阻止冒泡
事件代理(委托)
针对新创建的元素
$('ul').on("click","li",function(){
alert($(this).text())
})
合成事件
hover()
$('.box').hover(function(){
//触摸触发
$(this).css("color",'red')
},function(){
//离开触发
$(this).css('color',"green")
})
toggle()
$("#btn").click(function(){
$(".box").toggle()
})
动画
hide()&show()
fadeIn()&fadeOut()
slideDown()&slideUp()
fadeTo()
$('.box').fadeTo(400,0.3)
toggle()
fadeToggle()
slideToggle()
animate()
自定义动画
$('.box').animate({
width:300,
height:300,
fontSize:18,
//颜色需要jquery插件(jquery-color)
//background:'green'
},1000,function(){
//购物车飞车
})
Ajax
在不重载页面的情况下，与页面进行局部更新
$.ajax({
url:"",
method:'', //get/post
success:function(res){
console.log(res)//返回的是json数据
}
})
