深圳做网站公司那家比较好,网站开发流程注意事项,如何查看百度指数,织梦 wordpress文章目录 一、jQuery选择器1.1jQuery基础选择器1.2隐式迭代⭐1.3jquery筛选选择器1.4jQuery筛选方法#xff08;重点#xff09;1.4.1新浪下拉菜单案例 1.5jquery排他思想1.6链式编程 二、jquery样式操作2.2设置类样式方法2.3类操作与className区别 三、jQuery效果3.1显示隐藏… 文章目录 一、jQuery选择器1.1jQuery基础选择器1.2隐式迭代⭐1.3jquery筛选选择器1.4jQuery筛选方法重点1.4.1新浪下拉菜单案例 1.5jquery排他思想1.6链式编程 二、jquery样式操作2.2设置类样式方法2.3类操作与className区别 三、jQuery效果3.1显示隐藏效果3.2滑动效果3.3事件切换3.4动画队列以及停止排队方法3.5淡入淡出效果3.5.1渐进方式调整到指定的不透明度3.5.2高亮图片案例❤️❤️❤️❤️ 3.6自定义动画1.语法2.参数 四、jQuery属性操作4.1设置或获取元素固有固定值4.2设置或获取元素自定义属性attr()4.3数据缓存data() 五、jQuery内容文本值六、jQuery元素操作6.1遍历元素6.2创建元素6.3添加元素 七、jQuery尺寸、位置操作7.1jQuery尺寸操作7.2jQuery位置7.2.1返回顶部案例 一、jQuery选择器
1.1jQuery基础选择器 $(“选择器” //里面选择器直接写css选择器即可 script$(function (){alert($(.nav));alert($(ul li));})
/scriptjquery样式设置 $(“div”).css(‘属性’,值)
1.2隐式迭代⭐
遍历内部DOM元素伪数组形式存储的过程叫做隐式迭代 简单理解给匹配到的所有元素进行循环遍历执行相应的方法而不用我们在进行执行简化我们的操作。
script// 获取4个divconsole.log($(div));$(div).css(background,pink);$(ul li).css(color,red);
/script1.3jquery筛选选择器 ulli1/lili2/lili3/lili4/li
/ul
ollia/lilib/lilic/lilid/li
/ol
script$(function (){$(ul li:first).css(color,red);$(ul li:eq(2)).css(color,red);$(ul li:odd).css(color,blue);})
/script1.4jQuery筛选方法重点 1.4.1新浪下拉菜单案例
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript srcjquery.min.js/scriptstyle* {margin: 0;padding: 0;}li {list-style-type: none;}a {text-decoration: none;font-size: 14px;}.nav {margin: 100px;}.navli {position: relative;float: left;width: 80px;height: 41px;text-align: center;}.nav li a {display: block;width: 100%;height: 100%;line-height: 41px;color: #333;}.navlia:hover {background-color: #eee;}.nav ul {display: none;position: absolute;top: 41px;left: 0;width: 100%;border-left: 1px solid #FECC5B;border-right: 1px solid #FECC5B;}.nav ul li {border-bottom: 1px solid #FECC5B;}.nav ul li a:hover {background-color: #FFF5DA;}/style
/head
body
ul classnavlia href#微博/aullia href私信/a/lilia href评论/a/lilia href我/a/li/ul/lilia href#微博/aullia href私信/a/lilia href评论/a/lilia href我/a/li/ul/lilia href#微博/aullia href私信/a/lilia href评论/a/lilia href我/a/li/ul/lilia href#微博/aullia href私信/a/lilia href评论/a/lilia href我/a/li/ul/li
/ul
script$(function (){$(.navli).mouseover(function (){$(this).children(ul).show();})$(.navli).mouseleave(function (){$(this).children(ul).hide();})})
/script/body
/htmljs版本
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestyle* {margin: 0;padding: 0;}li {list-style-type: none;}a {text-decoration: none;font-size: 14px;}.nav {margin: 100px;}.navli {position: relative;float: left;width: 80px;height: 41px;text-align: center;}.nav li a {display: block;width: 100%;height: 100%;line-height: 41px;color: #333;}.navlia:hover {background-color: #eee;}.nav ul {display: none;position: absolute;top: 41px;left: 0;width: 100%;border-left: 1px solid #FECC5B;border-right: 1px solid #FECC5B;}.nav ul li {border-bottom: 1px solid #FECC5B;}.nav ul li a:hover {background-color: #FFF5DA;}/style
/headbodyul classnavlia href#微博/aullia href私信/a/lilia href评论/a/lilia href我/a/li/ul/lilia href#微博/aullia href私信/a/lilia href评论/a/lilia href我/a/li/ul/lilia href#微博/aullia href私信/a/lilia href评论/a/lilia href我/a/li/ul/lilia href#微博/aullia href私信/a/lilia href评论/a/lilia href我/a/li/ul/li/ulscript// 1. 获取元素var nav document.querySelector(.nav);var lis nav.children; // 得到4个小li// 2.循环注册事件for (var i 0; i lis.length; i) {lis[i].onmouseover function() {this.children[1].style.display block;}lis[i].onmouseout function() {this.children[1].style.display none;}}/script
/body/html1.5jquery排他思想 script srcjquery.min.js/script
/head
body
buttona hrefhttps://www.baidu.com/?tn88093251_33_hao_pgA/a
/button
buttonB/button
buttonC/button
buttonD/button
buttonE/button
buttonF/button
script$(function (){$(button).click(function (){$(this).css(background,pink);//其他兄弟不包括本身$(this).siblings(button).css(background,);});})
/script1.6链式编程
链式编程是为了节省代码看起来更优雅 $(this).css(color,red).siblings().css(color,);二、jquery样式操作
可以使用css方法来简单修改元素样式也可以操作类修改多个样式 1.参数只写属性名则是返回属性值 javascript $(this).css(color); 2.参数是属性名属性值逗号分隔是设置一组样式属性必须加引号值如果是数字可以不用跟单位和引号 javascript $(this).css(color,red); 3.参数可以是对象形式方便设置多组样式属性名和属性值用冒号隔开属性可以不加引号 $(div).css({width:200,height:200,backgroundColor:red})2.2设置类样式方法
作用等同于之前的classList,可以操作类样式数以操作类里面的参数不要加点 1.添加类 $(this).addClass(“current”); 2.删除类 $(this).addClass(“current”); 3.切换类 $(“div”).click(function (){ $(this).toggleClass(“current”); stylediv{width: 150px;height: 150px;background-color: pink;margin: 100px auto;transition:all 0.5s ;}.current{background-color: red;transform: rotate(360deg);}/style
/head
body
div/div
script// $(div).click(function (){// // $(this).addClass(current); // 添加类//// });// // 删除类// $(div).click(function (){// $(this).removeClass(current); // 添加类//// });$(div).click(function (){$(this).toggleClass(current); // });
/script2.3类操作与className区别
原生js种className会覆盖元素原先里面的类名。 jquery里面类操作只是对指定类进行操作不影响原来的类名
三、jQuery效果
jQuery给我们封装了很多动画效果最为常见的如下
3.1显示隐藏效果
显示语法规范 show([speed,[easing],[fn]) 2.显示参数 1参数都可以省略无动画直接显示 2speed:三种预定速度之一的字符串“slow”“narmal”,“fast”或表示动画时长的毫秒数值 3easing:切换效果默认是swing,可以参数linear 4fn:回调函数在动画执行完执行的函数
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestylediv {width: 150px;height: 300px;background-color: pink;}/stylescript srcjquery.min.js/script
/headbody
button显示/button
button隐藏/button
button切换/button
div/div
script$(function() {$(button).eq(0).click(function() {$(div).show(1000, function() {alert(1);});})$(button).eq(1).click(function() {$(div).hide(1000, function() {alert(1);});})$(button).eq(2).click(function() {$(div).toggle(1000);})// 一般情况下我们都不加参数直接显示隐藏就可以了});
/script
/body/html3.2滑动效果
1.滑动切换效果语法规范 slideToggle([speed,[[easing],[fn]]) 2.滑动切换效果参数 1参数都可以省略 2speed:三种预定速度之一的字符串“slow”“narmal”,“fast”或表示动画时长的毫秒数值 3easing:切换效果默认是swing,可以参数linear 4fn:回调函数在动画执行完执行的函数
3.3事件切换 hower([over,]out) (1)over鼠标移到元素上要触发的函数相当于mouseenter (2)out:鼠标移出元素要触发的函数相当于mouseleave) 注意 事件切换就是鼠标经过和离开的符合写法 如果只写一个函数经过离开都会调用
3.4动画队列以及停止排队方法
1.动画或效果队列 动画或者效果一旦触发就会执行如果多次触发就造成多个动画或者效果排队执行 2.停止排队 stop() 1stop()方法用于停止动画 2注意stop()写到动画或者效果的前面相当于停止结束上一次的动画
script$(function() {// 鼠标经过// $(.navli).mouseover(function() {// // $(this) jQuery 当前元素 this不要加引号// // show() 显示元素 hide() 隐藏元素// $(this).children(ul).slideDown(200);// });// // 鼠标离开// $(.navli).mouseout(function() {// $(this).children(ul).slideUp(200);// });// 1. 事件切换 hover 就是鼠标经过和离开的复合写法// $(.navli).hover(function() {// $(this).children(ul).slideDown(200);// }, function() {// $(this).children(ul).slideUp(200);// });// 2. 事件切换 hover 如果只写一个函数那么鼠标经过和鼠标离开都会触发这个函数$(.navli).hover(function() {// stop 方法必须写到动画的前面$(this).children(ul).stop().slideToggle();});})
/script3.5淡入淡出效果
1.淡入效果语法规范 fadeIn([speed],[easing],[fn]) 2.淡入淡出切换效果参数 1speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如1000)
2easing:(Optional) 用来指定切换效果默认是swing可用参数linear
3fn:在动画完成时执行的函数每个元素执行一次。
3.5.1渐进方式调整到指定的不透明度
1语法规范 fadeTo([[speed],opacity,[easing],[fn]]) 2效果参数 speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如1000)
opacity:一个0至1之间表示透明度的数字。
easing:(Optional) 用来指定切换效果默认是swing可用参数linear
fn:在动画完成时执行的函数每个元素执行一次。
3.5.2高亮图片案例❤️❤️❤️❤️ !DOCTYPE html
htmlhead langenmeta charsetUTF-8title/titlestyle * {margin: 0;padding: 0;}ul {list-style: none;}body {background: #000;}.wrap {margin: 100px auto 0;width: 630px;height: 394px;padding: 10px 0 0 10px;background: #000;overflow: hidden;border: 1px solid #fff;}.wrap li {float: left;margin: 0 10px 10px 0;}.wrap img {display: block;border: 0;width: 200px;height: 186px;}/stylescript srcjquery.min.js/scriptscript$(function() {//鼠标进入的时候,其他的li标签透明度0.5$(.wrap li).hover(function() {$(this).siblings().stop().fadeTo(400, 0.5);}, function() {// 鼠标离开其他li 透明度改为 1$(this).siblings().stop().fadeTo(400, 1);})});/script
/headbodydiv classwrapullia href#img srcimage/1.jpg alt //a/lilia href#img srcimage/3.jpg alt //a/lilia href#img srcimage/5.jpg alt //a/lilia href#img srcimage/2.jpg alt //a/lilia href#img srcimage/4.jpg alt //a/lilia href#img srcimage/6.jpg alt //a/li/ul/div
/body/html3.6自定义动画
1.语法 animate(params,[speed],[easing],[fn]) 2.参数
1params:一组包含作为动画属性和终值的样式属性和及其值的集合必须写
2speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如1000)
3easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供linear 和 “swing”.
4fn:在动画完成时执行的函数每个元素执行一次。
button动起来/button
div/div
script$(function (){$(button).click(function (){$(div).animate({left: 500,top: 300,opacity: .5},500);})})
/script四、jQuery属性操作
4.1设置或获取元素固有固定值
所以元素固有属性就是元素本身自带的属性 a元素里面自带的href 1.获取属性值 prop(“属性”) 2.设置属性语法 prop(“属性”,“属性值”) 4.2设置或获取元素自定义属性attr()
用户自己给元素添加的属性我们称之为自定义属性比如给div添加index “1” 1.获取属性语法 attr(“属性”) //类似于原生getArributed() 2.设置属性语法 attr(“属性”“属性值”) // 类似原生setAttributed()
4.3数据缓存data()
data()方法可以在指定的元素上存取数据并不会修改DOM元素结构一旦页面刷新之前存放的数据都将被移除。 1.附加数据语法 data(“name”,“value”) //向被选元素附加数据 2.获取数据语法 data(“name”) //向被选元素获取数据 script$(function (){// element.prop(属性名) 获取属性值console.log($(a).prop(href));$(a).prop(title,we are ok);$(input).change(function (){console.log($(this).prop(checked));})// console.log($(div).prop(index));// // 元素的自定义属性 我们通过attr()console.log($(div).attr(index));})
/script同时还可以读取HTML5自定义属性data-index,得到是数字型
五、jQuery内容文本值
主要这对元素的内容还有表单的值 1.普通元素内容hrml() 相当于原生innerHTML html() //获取元素的内容 html(“内容”) //设置元素的内容 2.普通元素文本内容text(0 相当于innerText
bodydivspan我是内容/span/div
input typetext value请输入内容
script// 1.获取设置元素内容console.log($(div).html());// 2.获取设置元素文本内容console.log($(div).text());$(div).text(123);// 3.设置就获取表单值console.log($(input).val());$(input).val(123);
/script六、jQuery元素操作
主要是遍历创建添加删除元素操作
6.1遍历元素
jQuery隐式迭代是对同一类元素做了同样的操作如果想要费同一类元素做不同操作就要用遍历 语法1 1.each()方法遍历匹配的每个元素主要用DOM处理each每一个 2.里面的回调函数有2个参数index是每个元素的索引号domEle是每个DOM元素对象不是jQuery对象 语法2 1.$.each()方法可以遍历任何对象主要是数据处理比如数组对象 2.里面的函数有两个参数index是每个元素的索引号element遍历内容
bodydivspan我是内容/span/div
input typetext value请输入内容
script// 1.获取设置元素内容console.log($(div).html());// 2.获取设置元素文本内容console.log($(div).text());$(div).text(123);// 3.设置就获取表单值console.log($(input).val());$(input).val(123);
/script6.2创建元素
语法
$(li /li);6.3添加元素
1.内部添加** element.append(“内容”) 把内容放入元素最后面类似原生appendChild 2.外部添加 element.after(“内容”) //把内容放入目标元素容器 element.before(“内容”) //把内容放入目标元素前面 1内部添加元素生成之后它们是父子关系 2外部添加元素生成之后它们是兄弟关系 6.4删除元素 element.remove() //删除匹配的元素本身) element.empty( //删除匹配的元素集合所有的子节点 element.html() //情况匹配的元素内容 $(ul).remove(); //可以删除匹配的元素 自杀
$(ul).empty(); //可以删除匹配的元素 里面的子节点 孩子
$(ul).html(); //可以删除匹配的元素 里面的子节点 孩子七、jQuery尺寸、位置操作
7.1jQuery尺寸操作 stylediv{width: 200px;height: 200px;background-color: pink;padding: 10px;border: 15px solid red;margin: 20px;}/style
/head
bodydiv/divscript$(function (){// 1.width() /height() 获取设置元素width 和height大小console.log($(div).width());// $(div).width(300);// 2.innerWidth()/innerHeight() 获取设置元素width 和 height padding 大小console.log($(div).innerWidth());// 3.outerWidth() /outerHeight() 设置元素width和height padding border大小console.log($(div).outerWidth());// 4.outerwidth(true) 设置widthpadding border marginconsole.log($(div).outerWidth(true));})/script以上参数为空则是获取相应值返回的是数字型如果参数为数字则是修改相应值参数可以不必写单位
7.2jQuery位置
位置主要有三个offset() position(),scrollTop()/scrollLeft()
1.offset()设置或获取元素偏移
1offset()方法设置或返回被选元素相对于文档的偏移坐标跟父级没有关系。 2该方法有2个属性left,top,offset.top()用于获取距离文档顶部的距离offset().left()用来获取距离文档左侧的距离。 3可以设置元素的偏移量offset({top: 10,left: 30});
div classfatherdiv classson/div/div
script
$(function (){// 1.获取设置距离文档的位置偏移 offestconsole.log($(.son).offset());console.log($(.son).offset().top);console.log($(.son).position());
})
/script2.position()方法获取元素偏移 1position()方法用于返回被选元素相对于带有定位的父级偏移坐标如果父级都没有定位则以文档为准。
3.scrollTop()/scrollLeft()设置或获取元素被卷去的头部和左侧
1scrollTop()方法设置或返回被选元素被卷去的头部。
7.2.1返回顶部案例 stylebody {height: 2000px;}.back {position: fixed;width: 50px;height: 50px;background-color: pink;right: 30px;bottom: 100px;display: none;}.container {width: 900px;height: 500px;background-color: skyblue;margin: 400px auto;}/stylescript srcjquery.min.js/script
/head
bodydiv classback返回顶部/divdiv classcontainer/div
script$(function (){var boxTop $(.container).offset().top;$(window).scroll(function (){console.log($(document).scrollTop());if($(document).scrollTop() boxTop){$(.back).fadeIn();}else{$(.back).fadeOut();}});$(.back).click(function (){$(body,html).stop().animate({scrollTop: 0})//html body元素做动画})})
/script
