当前位置：首页 > news >正文

网站观赏nba最新交易动态

news 2025/7/3 7:54:34

网站观赏,nba最新交易动态,怎么让自己做的网站别人可以访问,网站建设工程文章目录一、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显示隐藏…

文章目录

一、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"));})
</script>

jquery样式设置
$(“div”).css(‘属性’,值)

1.2隐式迭代⭐

遍历内部DOM元素（伪数组形式存储）的过程叫做隐式迭代
简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们在进行执行，简化我们的操作。

<script>// 获取4个divconsole.log($("div"));$("div").css("background","pink");$("ul li").css("color","red");
</script>

1.3jquery筛选选择器

在这里插入图片描述

<ul><li>1</li><li>2</li><li>3</li><li>4</li>
</ul>
<ol><li>a</li><li>b</li><li>c</li><li>d</li>
</ol>
<script>$(function (){$("ul li:first").css("color","red");$("ul li:eq(2)").css("color","red");$("ul li:odd").css("color","blue");})
</script>

1.4jQuery筛选方法（重点）

在这里插入图片描述

1.4.1新浪下拉菜单案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="jquery.min.js"></script><style>* {margin: 0;padding: 0;}li {list-style-type: none;}a {text-decoration: none;font-size: 14px;}.nav {margin: 100px;}.nav>li {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;}.nav>li>a: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 class="nav"><li><a href="#">微博</a><ul><li><a href="">私信</a></li><li><a href="">评论</a></li><li><a href="">@我</a></li></ul></li><li><a href="#">微博</a><ul><li><a href="">私信</a></li><li><a href="">评论</a></li><li><a href="">@我</a></li></ul></li><li><a href="#">微博</a><ul><li><a href="">私信</a></li><li><a href="">评论</a></li><li><a href="">@我</a></li></ul></li><li><a href="#">微博</a><ul><li><a href="">私信</a></li><li><a href="">评论</a></li><li><a href="">@我</a></li></ul></li>
</ul>
<script>$(function (){$(".nav>li").mouseover(function (){$(this).children('ul').show();})$(".nav>li").mouseleave(function (){$(this).children('ul').hide();})})
</script></body>
</html>

js版本

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;}li {list-style-type: none;}a {text-decoration: none;font-size: 14px;}.nav {margin: 100px;}.nav>li {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;}.nav>li>a: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 class="nav"><li><a href="#">微博</a><ul><li><a href="">私信</a></li><li><a href="">评论</a></li><li><a href="">@我</a></li></ul></li><li><a href="#">微博</a><ul><li><a href="">私信</a></li><li><a href="">评论</a></li><li><a href="">@我</a></li></ul></li><li><a href="#">微博</a><ul><li><a href="">私信</a></li><li><a href="">评论</a></li><li><a href="">@我</a></li></ul></li><li><a href="#">微博</a><ul><li><a href="">私信</a></li><li><a href="">评论</a></li><li><a href="">@我</a></li></ul></li></ul><script>// 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></html>

1.5jquery排他思想

  <script src="jquery.min.js"></script>
</head>
<body>
<button><a href="https://www.baidu.com/?tn=88093251_33_hao_pg">A</a>
</button>
<button>B</button>
<button>C</button>
<button>D</button>
<button>E</button>
<button>F</button>
<script>$(function (){$("button").click(function (){$(this).css("background","pink");//其他兄弟，不包括本身$(this).siblings("button").css("background","");});})
</script>

在这里插入图片描述

1.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”);

  <style>div{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"); //  });
</script>

2.3类操作与className区别

原生js种className会覆盖元素原先里面的类名。
jquery里面类操作只是对指定类进行操作，不影响原来的类名

三、jQuery效果

jQuery给我们封装了很多动画效果，最为常见的如下：
在这里插入图片描述

3.1显示隐藏效果

显示语法规范

show([speed,[easing],[fn])

2.显示参数
（1）参数都可以省略，无动画直接显示
（2）speed:三种预定速度之一的字符串（“slow”，“narmal”,“fast”）或表示动画时长的毫秒数值
（3）easing:切换效果，默认是"swing",可以参数"linear"
（4）fn:回调函数，在动画执行完执行的函数

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {width: 150px;height: 300px;background-color: pink;}</style><script src="jquery.min.js"></script>
</head><body>
<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></html>

3.2滑动效果

1.滑动切换效果语法规范

slideToggle([speed,[[easing],[fn]])

2.滑动切换效果参数
（1）参数都可以省略
（2）speed:三种预定速度之一的字符串（“slow”，“narmal”,“fast”）或表示动画时长的毫秒数值
（3）easing:切换效果，默认是"swing",可以参数"linear"
（4）fn:回调函数，在动画执行完执行的函数

3.3事件切换

hower([over,]out)

(1)over鼠标移到元素上要触发的函数（相当于mouseenter）
(2)out:鼠标移出元素要触发的函数（相当于mouseleave)
注意：
事件切换就是鼠标经过和离开的符合写法
如果只写一个函数，经过离开都会调用

3.4动画队列以及停止排队方法

1.动画或效果队列
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行
2.停止排队

stop()

（1）stop()方法用于停止动画
（2）注意：stop()写到动画或者效果的前面，相当于停止结束上一次的动画

<script>$(function() {// 鼠标经过// $(".nav>li").mouseover(function() {//     // $(this) jQuery 当前元素  this不要加引号//     // show() 显示元素  hide() 隐藏元素//     $(this).children("ul").slideDown(200);// });// // 鼠标离开// $(".nav>li").mouseout(function() {//     $(this).children("ul").slideUp(200);// });// 1. 事件切换 hover 就是鼠标经过和离开的复合写法// $(".nav>li").hover(function() {//     $(this).children("ul").slideDown(200);// }, function() {//     $(this).children("ul").slideUp(200);// });// 2. 事件切换 hover  如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数$(".nav>li").hover(function() {// stop 方法必须写到动画的前面$(this).children("ul").stop().slideToggle();});})
</script>

3.5淡入淡出效果

1.淡入效果语法规范

fadeIn([speed],[easing],[fn])

2.淡入淡出切换效果参数
（1）speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

（2）easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

（3）fn:在动画完成时执行的函数，每个元素执行一次。

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>
<html><head lang="en"><meta charset="UTF-8"><title></title><style >* {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;}</style><script src="jquery.min.js"></script><script>$(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>
</head><body><div class="wrap"><ul><li><a href="#"><img src="image/1.jpg" alt="" /></a></li><li><a href="#"><img src="image/3.jpg" alt="" /></a></li><li><a href="#"><img src="image/5.jpg" alt="" /></a></li><li><a href="#"><img src="image/2.jpg" alt="" /></a></li><li><a href="#"><img src="image/4.jpg" alt="" /></a></li><li><a href="#"><img src="image/6.jpg" alt="" /></a></li></ul></div>
</body></html>

3.6自定义动画

1.语法

animate(params,[speed],[easing],[fn])

2.参数

（1）params:一组包含作为动画属性和终值的样式属性和及其值的集合，必须写

（2）speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

（3）easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 “swing”.

（4）fn:在动画完成时执行的函数，每个元素执行一次。

<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

<body><div><span>我是内容</span></div>
<input type="text" 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遍历内容

<body><div><span>我是内容</span></div>
<input type="text" value="请输入内容">
<script>// 1.获取设置元素内容console.log($("div").html());// 2.获取设置元素文本内容console.log($("div").text());$("div").text("123");// 3.设置就获取表单值console.log($("input").val());$("input").val("123");
</script>

6.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尺寸操作

在这里插入图片描述

 <style>div{width: 200px;height: 200px;background-color: pink;padding: 10px;border: 15px solid red;margin: 20px;}</style>
</head>
<body><div></div><script>$(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) 设置width+padding + border + marginconsole.log($("div").outerWidth(true));})</script>

以上参数为空，则是获取相应值，返回的是数字型
如果参数为数字，则是修改相应值
参数可以不必写单位

7.2jQuery位置

位置主要有三个：offset() position(),scrollTop()/scrollLeft()

1.offset()设置或获取元素偏移

（1）offset()方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。
（2）该方法有2个属性left,top,offset.top()用于获取距离文档顶部的距离，offset().left()用来获取距离文档左侧的距离。
（3）可以设置元素的偏移量：offset({top: 10,left: 30});

<div class="father"><div class="son"></div></div>
<script>
$(function (){// 1.获取设置距离文档的位置（偏移） offestconsole.log($(".son").offset());console.log($(".son").offset().top);console.log($(".son").position());
})
</script>

2.position()方法获取元素偏移
（1）position()方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。

3.scrollTop()/scrollLeft()设置或获取元素被卷去的头部和左侧

（1）scrollTop()方法设置或返回被选元素被卷去的头部。

7.2.1返回顶部案例

  <style>body {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;}</style><script src="jquery.min.js"></script>
</head>
<body><div class="back">返回顶部</div><div class="container"></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>