JQuery
本质就是一个js库 封装了各种各样的方法
引入
<script src=路径></script
版本问题
.min.js是压缩文件 常用于生产环境
.js 未压缩文件 用于开发环境
入口函数
等文档doucument加载完毕才会执行入口函数内的函数 确认可以找到对象
建议写上JQuery入口函数 让代码更灵活 (如果不写的话 js代码只能放在下方)
js入口函数会等全部文档执行完毕才执行(包括图片)
jq入口函数不会等图片加载完就会执行
<script src="../script/jquery-1.12.4.js"></script>
<script>
window.onload=function(){
console.log('js入口函数');
}
$(document).ready(function(){
console.log('jq入口函数')
});
$(function(){
console.log('另一种JQ入口函数');
})
//先执行JQ入口函数 并且都执行 说明JQ两个入口函数不会覆盖
JQuery对象与DOM对象的区别
<script src="../script/jquery-1.12.4.js"></script>
<script>
var cloth = document.getElementById('cloth');//不会为了寻找对象而增加id
cloth.style.backgroundColor="pink";//dom对象.style.css属性 可以或得设置 样式
var $li = $('li');//JQ变量出于习惯会加上$ 便于区分
console.log($li); //JQ.FN.INIT(4)说明JQ对象是一个伪数组
$li.text('改变');//所有的li都改变
</script>
JS对象无法调用JQ对象的方法
JQ对象就是JS对象的一个集合 是一种伪数组 调用JQ方法不用遍历 有一种隐式迭代机制
JQ对象代用JS方法的本质是从伪数组中取出JS对象
$li[0].setAttribute(name,vakue);利用下标的方式
$li.get(0)get方法也可以返回js 对象
JS对象使用JQ方法就是将JS对象转换成JQ对象
$(cloth).text();利用$符号就可以转换
下面这个例子主要是演示一下两个对象
$(function(){
//获得所有的li对象
var $li = $('.ul>li');
for(var i=0;$li.length;i++){
if(i%2==0){
$li[i].style.backgroundColor="pink";
}else{
$li[i].style.backgroundColor="red";
}
}
});
基本选择器(重点)
所谓选择器就是返回JQ对象的方法
1 标签选择器 $('标签名') $('li');返回所有 li 标签的对象
2 id选择器 $('.#d') $('#four')返回id 为four 的标签对象 关键符号 #
3 类选择器 $('.classname') $('.green')返回所有green 类的对象
4并集选择器 $(s1,s2) $('#four','.green')返回所有id为four 以及 green类的对象
5交集选择器 $(s1s2); $('li.green')返回li标签中class为green 的对象
6 子类选择器 $(S1>S2) $('#four>p')返回id 为four下面的第一层所有p标签
7后代选择器 $(s1 s2) $('#four p")返回 id 为four下面的所有p标签对象 所有层
8过滤选择器 $(li:even)：even起一个过滤作用 所有li标签中id 为偶数的标签对象
$('li:odd")下边为单数
$(li:first')第一个
eq(下标)第 下标 个也可以当作方法在后面被调用 $(ul>li:eq(2)) $(ul>li).eq(2)
gt(下标)大于
lt(下标)小于
9方法选择器
children();所有儿子 可传入选择器进一步过滤
siblings()所有除本身的JQ对象可传入选择器进一步过滤
$li = $('#li3').siblings();排他十分好用
find ()子代
$li = $('.ul').find('li')
next()下一个兄弟
$li = $('#li1').next();
parent 父亲
$li = $('#li1').parent();
index 参数为选择器 返回下标
$li = $('li').index('#li1');
下拉菜单案例
$(function(){
var $li = $(".wrap>ul>li");
$li.mouseenter(function(){
$(this).children('ul').show();
});
$li.mouseleave(function(){
$(this).children('ul').hide();
});
});
鼠标经过事件 mouseenter(function(){}); mouseover(function(){});
鼠标离开事件mouseleave(function(){});mouseout(function(){})
enter leave 与 over out的区别在于 进过子元素是否触发
一般使用 mouseennter mouseleave
$(this) this 代表当前操作的dom对象
操作css
修改单个样式 css(name,value)
修改多个样式 $css({ name:value,name,value});
获取样式 $css(‘name’)
css样式 backgroundColor fontColor fontSize opacity亮度(0-1)
$(function(){
var $li = $("ul>li");
//$li.css('background','pink');
$li.css({
background : 'pink',
fontColor : 'red',
fontSize : 7
});
var cssvalue = $li.css('background');
console.log(cssvalue);
});
操作class类
增夹类addclass();参数为值
删除类 removeclass()参数为值
切换类 toggleClass()参数为值 当前的类不是值这个类时 切换到这个类 是这个类 切换到其他
操作属性
attr(name.value)标签调用 传入属性的名字和值
attr({})设置多个属性
$(function(){
var $li = $('#li1');
$li.attr({name : 'aa',
value : 'bb',
cc:'dd'
})
});
可以设置一些系统中没有的属性
也可以操作class属性但是不建议 class有自己的方法
当操作 checked selected disabled这三个比较特殊的方法时应该使用
prop方法 使用方法与attr相同 主要原因是attr操作这几个属性会返回undifened
JQ动画
显示 show()
当不传入参数时 直接显示内容 是最常用的
也可以传入一个毫秒数 表示动画的持续时间 也可以用"fast" normal slow代替 分别代表 200 400 600毫秒
第二个参数可以传入一个方法 表示当显示完成后执行的方法
隐藏 hide（)
可以不传参数 表示直隐藏
可以传入毫秒值
可以传入一个方法 隐藏完毕后执行
滑入 slideDown()
不传参数 默认normal 400ms
可以传入毫秒 动画持续时间
可以传入方法 动画执行完毕后执行
滑出 slideup
用法与滑入相同
切换状态slidetoggle()如果是滑入状态就滑出 如果是滑出状态就滑入
浅入 fidein()
浅出fideout)
用法与slideup slidedown 用法一样
自定义动画
animate(type,speed,效果,function(){})
type 动画的样式 例如{left:800} {width:800}
speed 动画执行时间
执行效果 ‘swing’速度先快后慢 linear 匀速 默认’swing’
function（{} 动画执行完毕后执行的函数
stop()
JQuery会把要执行的动画全部放在一个执行队列中 好处是全部都会执行 坏处是有时候结束动作都已经完成了还在执行动画
stip(）的功能就是结束当前动画 一般在鼠标离开事件中就会stop()
<atudio src= controls=controls/>音频标签
controls=controls代表控制音频播放的控制器
play()主动播放
<video src controls=controls autoplay loop width height></video?>
controls 控制播放的控制台
autoplay 自动播放
loop 循环播放
width height 宽高
操作节点
append()相当于appendChild()
appendTo()更常用 子类调用 父类作为参数
prepend()不同于append从末尾插入 prepend从开头插入
prependTo()
after()插入一个兄弟元素 在调用者后面
before插入一个兄弟元素 在调用者前面 相当于insertNode()
清空一个元素的内容
Html('');
empty()更推荐使用empty方法
删除节点
remove()相当于removeChild()
复制元素
clone()相当于cloneChild()
操作value属性
$(function(){
var $li = $('input');
$li.val('22');
});
操作value属性虽然可以使用attr方法但是更推荐使用专门用户value的方法
val()没有参数时代表查询 返回的时该标签的value值
有参数时代表的是设置value值
多用于input标签
操作文本
html()相当于innetHtml属性
text()相当于innerText属性
无参时返回当前文本值
有参时 代表设置当前文本值
innerHtml与innerText的区别主要在于html包含标签 如果需要对文本使用标签可以使用html();
操作宽高
width()有参设置 无参获取
height()有参设置 无参获取
事件机制
事件 例如鼠标点击事件 click 鼠标经过事件 mouseenter鼠标离开事件
简单注册.click(function(){})
委托事件 .dilgate();
父类调用 第一个参数为由谁执行 第二个参数为事件 第三个参数为方法
还有一种既可以简单注册 又可以委托注册的方法
on()
第一个参数事件 click mouseenter mouseleave等
第二个参数为选择器 当传入第二个参数时 代表委托注册
第二个参数没有参数时代表简单注册
第三个参数为function
事件解绑 off()参数为时间 没有参数时代表解除该对象所有事件 有参数时解绑指定事件
主动触发事件tigger()没有参数代表触发该标签所有事件 有参代表触发指定事件
阻止冒泡
return false；
阻止浏览器默认行为
return false;
each遍历
JQ提供了一种新的遍历方法
$li each(function(index ,element)
{}
);
index代表下标 element 代表标签
符号冲突解决方案
JQuery.noconflicat();//释放控制权
然后用JQuery代替$符号
JQuery插件
JQuery有着丰富的插件 使用这些插件能够为JQuery提供一些额外的功能
例如:引入JQuery.color.js插件之后 使用
animate({backgroundColor:"green"},3000)可以达到颜色渐变
引入JQuery.lazyload.js可以实现图片懒加载
加载所有图片会消耗大量内存带宽
懒加载机制就是加载当前需要使用到的图片
<img data-original="on.gif"/>把src换成data-original 然后调用lazyload()方法
一般会给所有的图片一个类 整个类都实现懒加载
1220
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
