暑假的第一天学习：jQuery的初步认知和实例训练

最新推荐文章于 2024-08-07 21:56:36 发布

在下瓷杯

最新推荐文章于 2024-08-07 21:56:36 发布

阅读量239

点赞数 4

分类专栏：学习文章标签：学习 jquery 前端

本文链接：https://blog.csdn.net/weixin_44917161/article/details/140529254

版权

学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、jq的引入 <script src="./jq.min.js"></script>

二、jq页面的加载事件和js的区别

js的加载事件只会执行一个，会执行最后的一个；jq会全部执行

三、jq对象和js的互相转换

//dom对象---使用原生js获取的对象

var div = document.querySelector("div");

console.log(div);

// div.innerHTML = "js修改了div的值"

//jq对象---使用jq获取过了的对象

//jq的本质是一个数组

var $div = $("div"); //获取的对象都是伪数组，无论多少

$div.html("阿福") //jq修改div的值

console.log($div)

//转换名字前是否有 $ 都可以

var $mm = $(div) //把js的对象改为jq的对象

//二者之间可以相互转换

//jq对象-->jq对象

//格式

//$(dom对象)

//jq对象-->jq对象

//格式

//$对象[索引值]

var mm = $div[0];

mm.innerHTML = "阿福痛扁了成龙";

四、jq选择器

<ul>

<li>我是第5个li

<ul>

</ul>

</li>

</ul>

</div>

//重点

// $('li:first')：第一个元素
console.log($('li:first'));
// $('li:last')：最后一个元素
console.log($("li:last"));
// $('li:eq(2)')==》索引为2【查找指定索引的元素】从0开始
console.log($('li:eq(2)'));
// $('li:odd')==》索引为偶数
console.log($('li:odd'));
// $('li:even')==》索引为奇数
console.log($("li:even"));

// $('li').parent() //父级
console.log($('li').parent());
// $('ul').children('li');
// //子集【如果不加参数，获取所有的，如果添加指定的元素，按照指定的找】
console.log($('ul').children('ol'));
// $('ul').find('li') //后代
console.log($('ul').find('li'));
// $('li').siblings('li') //兄弟
console.log($('.aaa').siblings('li'));
// $('li'),nextAll(); //后面的
console.log($('li').nextAll());
// $('li').prevAll(); // 前面的
console.log($('li').prevAll());
// //判断是否具有某个类名
// $('div').hasClass('aaa')
console.log($('li').hasClass('aaa'));
// $('div').eq(index); //指定索引方法【eq推荐用方法】

五、jq改变样式与链式编程

111111111111

//获取按钮

var $btn = $('button');

//给按钮添加点击事件

//jq把所有的事件都进行封装，事件名去掉on

//隐式迭代：不需要循环，直接用(遍历内部dom元素的过程叫做隐式迭代)

$btn.click(function() {

// //获取样式 jq对象.css("样式名称")

// //修改样式 jq对象.css("样式名称",样式值)

// $(this).css("width", 100)

// $(this).css("color", "#39c5bb")

// $(this).siblings().css({//排他思想 :当前元素设置样式，其余的兄弟清除样式

// "color": "",

// "width": ""

// })

//链式编程（一条线直接完事）

$(this).css({

"width": "100",

"color": "#39c5bb"

}).siblings().css({

"color": "",

"width": ""

})

$(this).siblings().parent().css({

color: "red",

width: 100

})

六、jq的类操作

$(function() { //添加类

// $("div").click(function() {

// $(this).addClass("box")

// })

//移除类

// $("div").click(function() {

// $(this).removeClass("box")

// })

//切换类

$("div").click(function() {

$(this).toggleClass("box")

})

//切换类不影响其他类

// $("div").click(function() {

// $(".box1").toggleClass("box")

// })

})

七、动画

<style>

div {

width: 200px;

height: 200px;

background-color: aqua;

margin-top: 20px;

display: none;

}

</style>

</head>

<body>

<button class="showbt">点击显示div</button>

<button class="hidbtn">点击隐藏div</button>

<button class="togbtn">点击切换div</button>

// $(".showbt").click(function() {

// $("div").show(1000) //show可以添加效果speed,[easing],[fn],1都可以不写 2 speed 代表速度，

// //有三个值，代表速度 slow/normal/fast,也可以直接写毫秒值

// //easing 1 swing摆动 2 linear 直线

// })

// $(".hidbtn").click(function() {

// $("div").hide(2000, function() {

// alert("隐藏好了")

// })

// $(".togbtn").click(function() {

// $("div").toggle(1000)

// })

//滑动

// $(".showbt").click(function() {

// $("div").slideDown(1000)

// })

// $(".hidbtn").click(function() {

// $("div").slideUp(2000, function() {

// alert("隐藏好了")

// })

// $(".togbtn").click(function() {

// $("div").slideToggle(1000)

// })

//淡入淡出

$(".showbt").click(function() {

$("div").fadeIn(1000)

})

$(".hidbtn").click(function() {

$("div").fadeOut(2000, function() {

alert("隐藏好了")

})

$(".togbtn").click(function() {

//透明度 fadeTo(speed,opacity) 两个参数都得写

$("div").fadeToggle(1000)

})

</script>

</body>

———————————————————————————————————————————

实例练习

一、鼠标移入显示

<style>

.nav {

list-style: none

}

a {

text-decoration: none;

}

.nav>li {

height: 41px;

text-align: center;

float: left;

width: 100px;

}

.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;

padding: 0;

width: 100%;

border-left: 1px solid #feecc5;

border-right: 1px solid #feecc5;

}

.nav ul li {

border-bottom: 1px solid #feecc5;

list-style: none

}

.nav ul li a:hover {

background-color: #fff5da;

}

</style>

</head>

<body>

<li>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</li>

<li>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</li>

<li>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</li>

<li>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</li>

</ul>

<br>

$(function() {

$(".nav>li").mouseover(function() {

$(this).children("ul").show();

})

$(".nav>li").mouseout(function() {

$(this).children("ul").hide();

})

二、鼠标点击显示内容

<style>

* {

margin: 0;

padding: 0;

}

li {

list-style-type: none;

}

.tab {

width: 978px;

margin: 100px auto;

}

.tab_list {

height: 39px;

border: 1px solid #ccc;

background-color: #f1f1f1;

}

.tab_list li {

float: left;

height: 39px;

line-height: 39px;

padding: 0 20px;

text-align: center;

cursor: pointer;

}

.tab_list .current {

background-color: #c81623;

color: #fff;

}

.item_info {

padding: 20px 0 0 20px;

}

.item {

display: none;

}

</style>

</head>

<body>

<ul>

<li>规格与包装</li>

</ul>

</div>

商品介绍模块内容

</div>

规格与包装模块内容

</div>

售后保障模块内容

</div>

商品评价（50000）模块内容

</div>

手机社区模块内容

</div>

// 1.点击上部的li，添加类，其余的兄弟移除类

// 2.点击的同时，得到相对应的li的索引号

// 3.让下部的内容和索引号相对应的item显示，其余的隐藏

$(function() {

$("li").click(function() {

$(this).addClass("current").siblings().removeClass("current")

$(".item").eq($(this).index()).show().siblings().hide()

})

// $("li").click(function() {

// $(this).css({

// "background": "#c81623",

// "color": "white"

// })

// $(this).siblings().css({

// "backgroundColor": "",

// color: ""

// })

// $(".item").eq($(this).index()).css(

// "display", "block"

// ).siblings().css(

// "display", "none"

// )

})

</script>

</body>

三、京剧高亮动画练习

<style>

.con {

/* border: 1px solid black; */

width: 606px;

overflow: hidden;

display: flex;

flex-wrap: wrap;

margin: 100px auto;

background-color: black;

}

.con-item {

/* float: left; */

width: 200px;

height: 200px;

border: 1px solid white;

background-color: yellowgreen;

cursor: pointer;

}

img {

height: 200px;

width: 200px;

}

</style>

</head>

<body>

</div>

$(function() {

$(".con-item").hover(function() {

console.log($(this))

$(this).stop().fadeTo(100, 1) //让鼠标在的图片高亮

$(this).siblings().stop().fadeTo(100, 0.8) //其他图片变暗

}, function() {

//鼠标滑出时，让所有图片变亮

$(this).stop().fadeTo(100, 1)

$(this).siblings().stop().fadeTo(100, 1)

})

</script>

</body>

四、王者荣耀手风琴动画练习

* {

margin: 0;

padding: 0;

}

img {

display: block;

}

ul {

list-style: none;

}

.king {

width: 852px;

margin: 100px auto;

background: url(images/bg.png) no-repeat;

overflow: hidden;

padding: 10px;

}

.king ul {

overflow: hidden;

}

.king li {

position: relative;

float: left;

width: 69px;

height: 69px;

margin-right: 10px;

}

.king li.current {

width: 224px;

}

.king li.current .big {

display: block;

}

.king li.current .small {

display: none;

}

.big {

width: 224px;

display: none;

}

.small {

position: absolute;

top: 0;

left: 0;

width: 69px;

height: 69px;

border-radius: 5px;

}

</style>

</head>

<body>

<ul>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

</ul>

</div>

//鼠标经过某个小1i 有两步操作:

//1.当前小li 宽度变为 224px, 同时里面的小图片淡出，大图片淡入

// 2.其余兄弟小1i宽度变为69px，小图片淡入，大图片淡出

$("li").mousemove(function() {

$(this).stop().animate({

width: 224

}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn()

$(this).siblings().stop().animate({

width: 69

}).find(".small").stop().fadeIn().

siblings(".big").stop().fadeOut()

})

</script>

</body>

在下瓷杯

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
暑假的第一天学习：jQuery的初步认知和实例训练

记录第一天的学习
复制链接

扫一扫

专栏目录