jquery基础-编程知识

1、jQuery的下载

官网地址：jQuery

版本：

·1x：兼容IE678等低版本浏览器，官网不再更新

·2x：不兼容IE678等低版本浏览器，官网不再更新

·3x：不兼容IE678等低版本浏览器，是官方主要更新维护的版本

各个版本的下载：jQuery CDN

基本使

 <script src="jquery.min.js"></script><style>div {width: 200px;height: 200px;background-color: pink;}</style></head><body><script>// $('div').hide();// 1. 等着页面DOM加载完毕再去执行js 代码// $(document).ready(function() {//     $('div').hide();// })// 2.  等着页面DOM加载完毕再去执行js 代码$(function() {$('div').hide();})</script><div></div></body>

jquery顶级对象

  <script src="jquery.min.js"></script><style>div {width: 200px;height: 200px;background-color: pink;}</style></head><body><div></div><script>// 1. $ 是jQuery的别称（另外的名字）// $(function() {//     alert(11)// });jQuery(function() {// alert(11)// $('div').hide();jQuery('div').hide();});// 2. $同时也是jQuery的 顶级对象</script></body>

3.jQuery 对象和dom对象

<style>

div {

width: 100px;

height: 100px;

background-color: pink;

}

</style>

</head>

<body>

// 1. DOM 对象：用原生js获取过来的对象就是DOM对象

var myDiv = document.querySelector('div'); // myDiv 是DOM对象

var mySpan = document.querySelector('span'); // mySpan 是DOM对象

console.dir(myDiv);

// 2. jQuery对象：用jquery方式获取过来的对象是jQuery对象。本质：通过$把DOM元素进行了包装

$('div'); // $('div')是一个jQuery 对象

$('span'); // $('span')是一个jQuery 对象

console.dir($('div'));

// 3. jQuery 对象只能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 属性和方法

// myDiv.style.display = 'none';

// myDiv.hide(); myDiv是一个dom对象不能使用 jquery里面的hide方法

// $('div').style.display = 'none'; 这个$('div')是一个jQuery对象不能使用原生js 的属性和方法

</script>

</body>

dom和jquery互相转换

<body>

// 1. DOM对象转换为 jQuery对象

// (1) 我们直接获取视频，得到就是jQuery对象

// $('video');

// (2) 我们已经使用原生js 获取过来 DOM对象

var myvideo = document.querySelector('video');

// $(myvideo).play(); jquery里面没有play 这个方法

// 2. jQuery对象转换为DOM对象

// myvideo.play();

// 方法1

$('video')[0].play()

// 方法2

$('video').get(0).play()

</script>

</body>

jquery基本和层级选择器

<body>

<div>我是div</div>

<div class="nav">我是nav div</div>

<ol>

</ol>

<ul>

</ul>

$(function() {

console.log($(".nav"));

console.log($("ul li"));

})

</script>

</body>

隐式迭代

<body>

<ul>

<li>相同的操作</li>

</ul>

// 1. 获取四个div元素

console.log($("div"));

// 2. 给四个div设置背景颜色为粉色 jquery对象不能使用style

$("div").css("background", "pink");

// 3. 隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法

$("ul li").css("color", "red");

</script>

</body>

6.筛选选择器

<body>

<ul>

<li>多个里面筛选几个</li>

</ul>

<ol>

<li>多个里面筛选几个</li>

</ol>

$(function() {

$("ul li:first").css("color", "red");

$("ul li:eq(2)").css("color", "blue");

$("ol li:odd").css("color", "skyblue");

$("ol li:even").css("color", "pink");

})

</script>

</body>

7.筛选方法

<body>

</div>

<div>我是兄弟

</div>

// 注意一下都是方法带括号

$(function() {

// 1. 父 parent() 返回的是最近一级的父级元素亲爸爸

console.log($(".son").parent());

// 2. 子

// (1) 亲儿子 children() 类似子代选择器 ul>li

// $(".nav").children("p").css("color", "red");

// (2) 可以选里面所有的孩子包括儿子和孙子 find() 类似于后代选择器

$(".nav").find("p").css("color", "red");

// 3. 兄弟节点

$(".nav").siblings().css("color", "red")

});

</script>

</body>

<body>

<ol>

</ol>

<ul>

</ul>

<div class="current">俺有current</div>

<div>俺木有current</div>

// 注意一下都是方法带括号

$(function() {

// 1. 兄弟元素siblings 除了自身元素之外的所有亲兄弟

$("ol .item").siblings("li").css("color", "red");

// 2. 第n个元素

var index = 2;

// (1) 我们可以利用选择器的方式选择

// $("ul li:eq(2)").css("color", "blue");

// $("ul li:eq("+index+")").css("color", "blue");

// (2) 我们可以利用选择方法的方式选择更推荐这种写法

// $("ul li").eq(2).css("color", "blue");

// $("ul li").eq(index).css("color", "blue");

// 3. 判断是否有某个类名

console.log($("div:first").hasClass("current"));

console.log($("div:last").hasClass("current"));

});

</script>

</body>

8.新浪下拉菜单

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

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

$(function() {

// 鼠标经过

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

// $(this) jQuery 当前元素 this不要加引号

// show() 显示元素 hide() 隐藏元素

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

});

// 鼠标离开

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

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

})

</script>

</body>

9.排他思想

<body>

$(function() {

// 1. 隐式迭代给所有的按钮都绑定了点击事件

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

// 2. 当前的元素变化背景颜色

$(this).css("background", "pink");

// 3. 其余的兄弟去掉背景颜色隐式迭代

$(this).siblings("button").css("background", "");

});

})

</script>

</body>

10.淘宝精品服饰案例

* {

margin: 0;

padding: 0;

font-size: 12px;

}

ul {

list-style: none;

}

a {

text-decoration: none;

}

.wrapper {

width: 250px;

height: 248px;

margin: 100px auto 0;

border: 1px solid pink;

border-right: 0;

overflow: hidden;

}

#left,

#content {

float: left;

}

#left li {

background: url(images/lili.jpg) repeat-x;

}

#left li a {

display: block;

width: 48px;

height: 27px;

border-bottom: 1px solid pink;

line-height: 27px;

text-align: center;

color: black;

}

#left li a:hover {

background-image: url(images/abg.gif);

}

#content {

border-left: 1px solid pink;

border-right: 1px solid pink;

}

</style>

$(function() {

// 1. 鼠标经过左侧的小li

$("#left li").mouseover(function() {

// 2. 得到当前小li 的索引号

var index = $(this).index();

console.log(index);

// 3. 让我们右侧的盒子相应索引号的图片显示出来就好了

// $("#content div").eq(index).show();

// 4. 让其余的图片（就是其他的兄弟）隐藏起来

// $("#content div").eq(index).siblings().hide();

// 链式编程

$("#content div").eq(index).show().siblings().hide();

})

</script>

</head>

<body>

</ul>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

</body>

11.链式编程

<body>

woshi body 的文字

$(function() {

// 1. 隐式迭代给所有的按钮都绑定了点击事件

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

// 2. 让当前元素颜色变为红色

// $(this).css("color", "red");

// 3. 让其余的姐妹元素不变色

// $(this).siblings().css("color", "");

// 链式编程

// $(this).css("color", "red").siblings().css("color", "");

// 我的颜色为红色, 我的兄弟的颜色为空

// $(this).siblings().css('color', 'red');

// 我的兄弟变为红色 ,我本身不变颜色

$(this).siblings().parent().css('color', 'blue');

// 最后是给我的兄弟的爸爸 body 变化颜色

});

})

</script>

</body>

12.css方法

<style>

div {

width: 200px;

height: 200px;

background-color: pink;

}

</style>

</head>

<body>

// 操作样式之css方法

$(function() {

console.log($("div").css("width"));

// $("div").css("width", "300px");

// $("div").css("width", 300);

// $("div").css(height, "300px"); 属性名一定要加引号

$("div").css({

width: 400,

height: 400,

backgroundColor: "red"

// 如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引号

})

13.类操作

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

$(function() {

// 1. 添加类 addClass()

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

// // $(this).addClass("current");

// });

// 2. 删除类 removeClass()

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

// $(this).removeClass("current");

// });

// 3. 切换类 toggleClass(),有这个类就删除，没有就加上

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

$(this).toggleClass("current");

});

})

</script>

</body>

14.tab栏切换

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

$(function() {

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

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

// 链式编程操作

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

// 2.点击的同时，得到当前li 的索引号

var index = $(this).index();

console.log(index);

// 3.让下部里面相应索引号的item显示，其余的item隐藏

$(".tab_con .item").eq(index).show().siblings().hide();

});

})

</script>

</body>

15.效果

1.显示语法规范

show（[speed，[easing]，[fn]]）

（1）参数都可以省略，无动画直接显示。

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

（3）easing:（Optional）用来指定切换效果，默认是“swing”，可用参数‘"linear"。

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

15.1 上下滑动

<style>

div {

width: 150px;

height: 300px;

background-color: pink;

display: none;

}

</style>

</head>

<body>

$(function() {

$("button").eq(0).click(function() {

// 下滑动 slideDown()

$("div").slideDown();

})

$("button").eq(1).click(function() {

// 上滑动 slideUp()

$("div").slideUp(500);

})

$("button").eq(2).click(function() {

// 滑动切换 slideToggle()

$("div").slideToggle(100);

});

</script>

</body>

15.2简洁版下拉菜单

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

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

$(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>

</body>

15.3 淡入淡出

<style>

div {

width: 150px;

height: 300px;

background-color: pink;

display: none;

}

</style>

</head>

<body>

<button>淡入淡出切换</button>

<button>修改透明度</button>

$(function() {

$("button").eq(0).click(function() {

// 淡入 fadeIn()

$("div").fadeIn(1000);

})

$("button").eq(1).click(function() {

// 淡出 fadeOut()

$("div").fadeOut(1000);

})

$("button").eq(2).click(function() {

// 淡入淡出切换 fadeToggle()

$("div").fadeToggle(1000);

});

$("button").eq(3).click(function() {

// 修改透明度 fadeTo() 这个速度和透明度要必须写

$("div").fadeTo(1000, 0.5);

});

</script>

</body>

15.4 animate

<style>

div {

position: absolute;

width: 200px;

height: 200px;

background-color: pink;

}

</style>

</head>

<body>

$(function() {

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

$("div").animate({

left: 500,

top: 300,

opacity: .4,

width: 500

}, 500);

})

</script>

</body>

15.5 手风琴案例

<title>手风琴案例</title>

* {

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>

$(function() {

// 鼠标经过某个小li 有两步操作：

$(".king li").mouseenter(function() {

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

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

width: 224

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

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

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

width: 69

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

})

});

</script>

<ul>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

</ul>

</div>

</body>

15.5属性操作

<body>

<div index="1" data-index="2">我是div</div>

$(function() {

//1. element.prop("属性名") 获取元素固有的属性值

console.log($("a").prop("href"));

$("a").prop("title", "我们都挺好");

$("input").change(function() {

console.log($(this).prop("checked"));

});

// console.log($("div").prop("index"));

// 2. 元素的自定义属性我们通过 attr()

console.log($("div").attr("index"));

$("div").attr("index", 4);

console.log($("div").attr("data-index"));

// 3. 数据缓存 data() 这个里面的数据是存放在元素的内存里面

$("span").data("uname", "andy");

console.log($("span").data("uname"));

// 这个方法获取data-index h5自定义属性第一个不用写data- 而且返回的是数字型

console.log($("div").data("index"));

})

</script>

</body>

有时间再排版更新

jquery基础

1、jQuery的下载

3.jQuery 对象和dom对象

6.筛选选择器

7.筛选方法

8.新浪下拉菜单

9.排他思想

10.淘宝精品服饰案例

11.链式编程

12.css方法

13.类操作

14.tab栏切换

15.效果

15.1 上下滑动

15.2简洁版下拉菜单

15.3 淡入淡出

15.4 animate

15.5 手风琴案例

15.5属性操作

相关文章

nmcli绑定bond双网卡（active-backup模式）

力扣--76. 最小覆盖子串

js【详解】Promise

[虚拟机保护逆向] [HGAME 2023 week4]vm

【LangChain学习之旅】—（12）代理（上）：ReAct框架，推理与行动的协同

python编程从入门到实践答案二

2024年【电工（初级）】考试内容及电工（初级）考试报名

MySQL中常用的操作语句已汇总

基于深度学习YOLOv8+Pyqt5的抽烟吸烟检测识别系统（源码+跑通说明文件）

算法中的数学知识

HTML 学习笔记(一)开始

flink 总结