不管前方的路有多苦，只要走的方向正确，不管多么崎岖不平，都比站在原地更接近幸福！
-- 本文章来自拉勾教育大前端课程
jQuery
- jQuery 是一个高效、精简并且功能丰富的javaScript工具库
- jQuery 对象不能使用原生JS对象的方法
$()方法
- 在jQuery中，只有一个全局变量$,这是jQuery的一大特点，避免全局变量污染
//利用jquery获取样式 console.log($("#box").css("width")); //更改样式属性 $(".box").css("width",200); // 事件简化 $(".box").click(function(){ $(this).css("background-color","skyblue") }) $(".box").animate({"width":500},1000);
jQ对象和原生对象的转换
- jQuery转原生：直接利用数组下标方式，得到jquery封装的原生对象
- 原生转jQuery:将原生对象用$()方法包裹即可
// jq对象转原生js对象 var $ps = $("p") $ps[0].innerHTML = "HELLO" //原生js对象转jq对象 var op = document.getElementsByTagName("p")[0] $(op).css("background-color","skeblue")
筛选选择器
- 过滤选择器，jq中新增的自己选择器
$("p:first").css ("color","pink") $("p:last").css("background-color","red") $("p:eq(5)").css("background-color","yellow")
jQuery常用方法
html 方法
- 相当于原生js中的innerHTML属性，用来获取或设置标签内部内容,若设置标签，标签会被渲染
//传递参数，更改文本 $(".box").html("新的标签") //不传递参数,获取文本 console.log($(".box").html()) //渲染标签 $(".box").html("新的标签<p>p标签</p>")
text()方法
- 相当于原生js的innerText属性，获取标签内部文字
val()方法
- 相当于原生js中的value属性，用来获取设置表单元素内容
attr()方法
- 全称attribute属性的意思，用来获取或者设置标签的属性值
<img src="images/cat.jpg" alt="cat" class="pic"> //获取属性值 console.log($(".pic").attr("src")) //更改属性值 $(".pic").attr("alt","dog")
removeAttr()
- 删除属性值的方法
prop()方法
- 针对特殊的表单元素设置的，属性名和属性值相同
- prop方法操作的是布尔值
$("input[type='checkbox']").prop("checked");
css()方法
- 调用某个css属性值，得到某个元素计算后样式，值为字符串格式
$(".box").css("width","+=100") //设置多条属性 $(".box").css({ "width": 200, "heigth": 300 })
addClass()添加类名
$(".btn").click(function(){
$(".box").addClass("demo")
})
removeClass()删除类名
$(".btn").click(function(){
$(".box").remiveClass("demo")
})
toggleClass()类名切换
//如果有该类名则删除该类名，如果没有该类名则切换该类名
$(".btn").click(function(){
$(".box").remiveClass("demo")
})
hasClass()检测类名是否存在
console.log($(".box").hasClass(".demo"))
事件类型
- mouseenter()方法：鼠标进入事件
- mouseleave()方法：鼠标离开事件
$("#box").mouseenter(function(){ $("#box").html("进入") }) $("#box").mouseleave(function(){ $("#box").html("出来") }) - 有事件冒泡mouseover()和mouseout()
- hover() 方法对mouseenter和mouseleave进行合并
节点关系
- $(this) 将this关键字传递给$()方法得到的就是指向自己的jQuery对象
- parent()父级 查找父级
- children() 子级 得到自己所有子级元素组成的对象
//点击事件 $("p").click(function(){ //this指向的就是当前点击的元素 $(this).css("background-color","red") //当前节点的父级元素 $(this).parent().css("background-color","yellow") }) //当前元素节点的子节点 $(".box").click(function(){ $(this).children().css("background-color","green") }) - siblings() 兄弟 得到除了自己以外的所有同级兄弟
//当前元素的兄弟集 $("p").click(function(){ $(this).siblings().css("background-color","green") }) - 链式调用
$("p").click(function(){ $(this).css("background-color","red") .siblings().css("background-color","gold") .parent().css("background-color","green") .siblings().css("background-color","blue") }) - find()后代查找的方法
- next() 下一个兄弟元素
- prev() 上一个兄弟元素
- nextAll() 后面所有兄弟
- prevAll() 前面所有兄弟
- parents() 查找包含body在内的祖先级
$("p").click(function(){ $(this).css("background-color","red") // 选中同级前面所有元素 .prevAll().css("background-color","yellow") //选中同级后面所有元素 $(this).nextAll().css("background-color","green") //选中所有父级元素包括body $(this).parents().css("background-color","skyblue") })
jQuery 排序和动画
eq()方法
- eq()方法在jQuery对象中通过下标获取某个对象，下标是jQuery对象中大的排序下标
index()方法
- index()得到的是它自己在HTML结构中的兄弟中的下标位置
each()遍历方法
- 参数是一个函数，对jQuery对象中的元素每一个执行函数内部操作，基本原理就是for循环
- each的函数内部也有一个this，指向的是进来遍历的每一次的元素
$(".box").each(function(){ $(this).children().eq(1).css("background-color","red") }) //通过each方法进行遍历的操作 $("p").each(function(i){ $(this).click(function(){ console.log(i); console.log($(this).index()) }) })
制作表格隔列变色
$("tr").each(function(){
$(this).children(":odd").css("background-color","skeyblue ")
})
入口函数
- 原生js的入口函数：window.onload
- 在一个页面上可以书写多个jQuery函数，按先后顺序加载
- jQuery中的入口函数：$(document).ready(function(){
//获取元素
})
jQuery切换效果的方法
显示和隐藏的方法
- hide() 元素隐藏，隐藏的前提必须是元素display:block;
- show() 元素显示，显示的前提必须是元素display:none;
- toggle() 在元素隐藏和显示之间进行切换
- 可以传递参数
- 单词格式：slow,normal,fast
- 数字格式的时间：单位是毫秒，在规定时间内会出现显示和隐藏的动画
//点击隐藏 $btn1.click(function(){ $pic.hide(); }) //点击显示 $btn2.click(function(){ $pic.show(); }) //点击切换 $btn3.click(function(){ $pic.toggle(); }) - slideDown() 滑动显示
- slideUp() 滑动隐藏
- slideToggle() 滑动切换
//点击隐藏 $btn1.click(function(){ $pic.slideUp(); }) //点击显示 $btn2.click(function(){ $pic.slideDown(); }) //点击切换 $btn3.click(function(){ $pic.slideToggle(); }) - fadeln() 淡入，透明度逐渐增大最终显示
- fadeOut() 淡出，透明度逐渐降低最终隐藏
- fadeToggle() 切换效果
- fadeTo() 淡入淡出到某个指定的透明度
//点击淡入 $btn1.click(function(){ $pic.fadeln(); }) //点击淡出 $btn2.click(function(){ $pic.fadeOut(); }) //点击切换 $btn3.click(function(){ $pic.fadeToggle(); }) //淡入到指定透明度 $btn4.click(function(){ $pic.fadeTo(500,0,5) })
animate()
- 作用：执行css属性集的自定义动画
- 语法：$(selector).animate(style,speed,easing,callback)
- 参数1： css的属性名和运动结束位置的属性值的集合
- 参数2：规定动画的速度，默认是normal，其他值：slow,normal.fast
- 参数3：规定在不同的动画中设置动画速度的easing函数，包括swing和linear
- 参数4: animate函数执行完后执行的函数
//只能改变所有有数值属性的内容 $("p").click(function(){ $(this).animate({"left": 500},2000,"swing",function(){ $(this).css("background","red") }) }) - 同一个元素身上，如果定义了多个动画，动画会排队等待执行
- 如果是不同的元素对象都有动画，不会出现排队机制
- 如果是其他非运动的代码，也不会等待运动完成
- 动画显示隐藏如果也设置给同一个元素也需要动画排队
动画延迟delay
- 将delay()设置在某个运动方法之前，表示后面的运动要在规定的时间之后执行，有延迟效果
$(".box").delay(2000).animate({"left": 500},during)
停止动画stop
- stop() 设置元素对象身上的排队的动画以何种方式进行停止
- 参数1 设置是否清空后面的动画排队，如果是true表示清空，如果是false表示不清空只停止当前的一个动画
- 参数2 s设置当前动画是否立即完成，如果是true表示立即完成，对象会立刻走到结束位置，如果false表示不完成当前动画，立即停止在当前位置
- 默认参数为false,false，更多时候设置为stop(true,false)
jQuery 节点操作
追加元素
- 向父元素后面追加
- 父元素jQuery.append(新创建的jQuery对象)
- 新创建的jQuey.appendTo("父元素选择器或者父元素对象")
- 向父元素前面追加
- 父元素jQuery.prepend(新创建的jQuery对象)
- 新创建的jQuey.prependTo("父元素选择器或者父元素对象")
$ul.append($lis); $li.appendTo($ul); $li.appendTO("ul"); - 向元素后面追加新的兄弟
- jQuery对象.after(新创建的jQuery)
- 新创建的jQuery.insertAfter("选择器或jQuery对象)
- 向元素前面追加新的兄弟
- jQuery对象.before(新创建的jQuery对象)
- 新创建的jQuery.insertBefore("选择器或jQuery对象")
删除和清空元素
- jQuery对象.remove();
- 清空方法：
- jQuery对象.empty() 清空内部所有元素及相关事件
- jQuery对象.html('') 仅清空内部元素不清理内存中元素事件
克隆元素
- jQuery对象.clone(布尔值) 返回克隆好的元素
- 参数：默认是false 表示仅克隆内容。true，克隆内容和事件
操作元素尺寸的方法
- width()和heigth() 操作的大小是内容部分
- 设置：jQuery对象.width(数字)
- 获取：jQUery对象.width()
- innerWidth()和innerHeight()操作的大小是内容部分 + padding
- 设置：jQuery对象.innerwidth(数字)设置的值只设置给内容部分
- 获取：jQUery对象.innerwidth()
- outerWidth() 和 outerHeight() 操作的大小是内容部分+padding+border
- 设置的值只设置给内容部分
操作元素位置的方法
- 获取元素距离文档的位置
- jQuery对象.offset() 返回一个对象，对象中包含了元素的位置
- offset() 方法获取的元素位置，永远参照文档，和定位没有关系
- 获取距离上级定位参考元素的位置
- jQuery对象.position() 获取元素位置参照的最近定位，和定位有关
操作卷去的页面间距
- 获取: jQuery对象.scrollTop()
- 设置: jQuery对象。scrollTop(数字)
//给文档设置滚动事件 $(document).scroll(function(){ //获取滚动条卷走的距离 console.log($(this).scrollTop()) }) //设置点击返回顶端 $(".box").click(function(){ $(document).scrollTop(0) })
简单方式注册事件
- jQuery对象.on("事件名",事件处理程序)
//使用on方法注册简单事件 $("input").on("click",function(){ //事件处理程序 }) - jQuery事件委托的实现
- jQuer对象.on('事件名','选择器',事件处理程序)
$("ul").on("click","li",function(){ //在事件委托过程中，事件函数内部this不是指向事件源而是指向触发事件的委托子元素 })
off移除事件
- 解绑简单事件 jQuery对象.off("click",事件处理程序名称)
- 解绑事件委托注册事件 jQuery对象.off("click","选择器,事件处理函数")
trigger触发事件
- jQuery对象.trigger("事件名")
var timer = setInterval(function(){ $(".right").trigger("click"); },1000)
网友评论