jQuery
入口函数
——等待页面加载完毕后进行执行
$(document).ready(function () {})$(function () {})$：顶级对象，是jQuery的别称，相当于原生js中的window，对元素进行包装，使其成为jQuery对象，从而可以调用jQuery的方法
jQuery对象和dom对象的区别
jQuery---数组 dom---节点
jQuery只能用jQuery方法，不能使用原生js的方法
let btn = document.querySelector("button")
let btn2 = $("button")
console.log(btn)
console.log(btn2)
btn2.style.backgroundColor = "pink"
jQuery对象转换成dom对象
let btn = document.querySelector("button")
$("button")[0].style.backgroundColor = "pink"let btn = document.querySelector("button")
$("button")[0].style.backgroundColor = "pink"
$("button").get(0)dom对象转换成jQuery对象
$(dom对象)
jQuery选择器
$("选择器")
$("选择器").css("属性名","属性值")
隐式迭代
——遍历内部dom元素的过程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js">
</script>
</head>
<body>
<div>11111</div>
<div>11111</div>
<div>11111</div>
<div>11111</div>
<script>
$("div").css("color", "pink")
</script>
</body>
</html>筛选选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
<script>
console.log($("ul li:first"))
console.log($("ul li:last"))
console.log($("ul li:eq(2)")) //获取到的li元素中，索引下标为2的li
$("ul li:odd").css("backgroundColor", "pink")
$("ul li:even").css("backgroundColor", "red")
</script>
</body>
</html>筛选的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
</head>
<body>
<div class="father">
111
<div class="son">222</div>
<div class="son">3333
<div>ncjdcd</div>
</div>
<li>ncjdnjc</li>
</div>
<script>
// $(".son").parent()
// $(".father").children(".son")、、子代选择器
// $(".father").find("div").css("color", "red") //后代选择器
$("li").siblings("div").css("color", "red")
</script>
</body>
</html>点击变色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
<script>
$(function () {
$("button").click(function () {
$(this).css("backgroundColor", "pink")
$(this).siblings("button").css("backgroundColor", "")
})
});
</script>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<button>按钮6</button>
</body>
</html>
更改css样式
多个样式
$("div").css({ "color": "pink", "backgroundColor": "green" })类名添加
$("div").addClass("pink")移除
$("div").removeClass("pink")切换
$("div").toggleClass("pink")显示和隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
display: none;
}
</style>
<script>
$(function () {
$("button").eq(0).click(function () {
$("div").show(2000, function () {
console.log("显示按钮的点击事件执行结束了")
})//显示
})
$("button").eq(1).click(function () {
$("div").hide(2000)//隐藏
})
$("button").eq(2).click(function () {
$("div").toggle()//切换
})
})
</script>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div>
</div>
</body>
</html>滑动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
display: none;
}
</style>
</head>
<body>
<button>滑入</button>
<button>滑出</button>
<button>切换</button>
<div></div>
<script>
$(function () {
$("button").eq(0).click(function () {
$("div").slideDown(2000, function () {
console.log("显示按钮的点击事件执行结束了")
})//显示
})
$("button").eq(1).click(function () {
$("div").slideUp(2000)//隐藏
})
$("button").eq(2).click(function () {
$("div").slideToggle()//切换
})
})
</script>
</body>
</html>淡入淡出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
display: none;
}
</style>
</head>
<body>
<button>淡入</button>
<button>淡出</button>
<button>切换</button>
<div></div>
<script>
$(function () {
$("button").eq(0).click(function () {
$("div").stop().fadeIn(2000, function () {
console.log("显示按钮的点击事件执行结束了")
})//显示
})
$("button").eq(1).click(function () {
$("div").stop().fadeOut(2000)//隐藏
})
$("button").eq(2).click(function () {
$("div").stop().fadeToggle()//切换
})
})
</script>
</body>
</html>自定义动画
——animate(想要更改的样式属性,[speed],[easing],[fn])
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
position: absolute;
width: 300px;
height: 300px;
background-color: pink;
}
</style>
<script src="./jquery.min.js"></script>
</head>
<body>
<button>点击</button>
<div></div>
<script>
$(function () {
$("button").click(function () {
$("div").animate({
left: 150,
top: 500,
opacity: .4,
width: 10
}, 1500)
})
})
</script>
</body>
</html>操作属性
数据缓存
——data() 可以在指定的元素上存取数据，不回应系那个dom元素结构，一旦页面刷新了，数据立马丢失
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
</head>
<body>
<img src="https://t7.baidu.com/it/u=2168645659,3174029352&fm=193&f=GIF" alt="" title="" data-name="zhangsan">
<span>dd</span>
<script>
// prop("属性名") 元素默认属性
console.log($("img").prop("src"))
// prop("属性名","属性值")
$("img").prop("title", "我是jquery添加的")
console.log($("img").attr("data-name"))
$("img").attr("data-name", "wangmazi")
console.log($("img").attr("data-name"))
$("span").data("uname", "222")
console.log($("span").data("uname"))
</script>
</body>
</html>创建、添加、删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li {
list-style: none;
width: 300px;
height: 50px;
background-color: pink;
}
</style>
</head>
<body>
<ul>
<li>11111111</li>
<li>2222222</li>
<li>333333</li>
</ul>
<script src="./jquery.min.js"></script>
<script>
// 创建
let li = $("<div>我是新创建的li</div>")
// 添加 内部添加
// $("ul").append(li)
// $("ul").prepend(li)
// 外部添加
// $("ul").after(li)
$("ul").before(li)
// 删除
$("ul li:eq(1)").remove() //自己杀自己
// $("ul").empty() //删除匹配的元素里边的子节点的
console.log($("ul").html(""))
</script>
</body>
</html>事件对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <button>点击</button> -->
<form action="#">
<input type="text" name="aa" id="">
<button>提交</button>
</form>
<script src="./jquery.min.js"></script>
<script>
$("button").click(function (e) {
console.log(e)
e.stopPropagation()//阻止冒泡
e.preventDefault()
})
</script>
</body>
</html>拷贝
true：深拷贝---拷贝对象中的所有内容
默认浅拷贝：只拷贝第一层内容，如果拷贝对象中出现可变数据类型，那么只拷贝地址
多库并存
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../../12-21/代码/jquery.min.js"></script>
</head>
<body>
<div class="111" title="111">wwwww</div>
<script>
function $(ele) {
return document.querySelector(ele)
}
console.dir($)
// 用户自己更改$
let suibian = $.noConflict()
console.log(suibian("div").prop("title"))
</script>
</body>
</html>位置
offset——距离文档的位置
position——相对于带有定位的父亲的位置
jQuery插件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../201808011428/css/htmleaf-demo.css">
<link rel="stylesheet" href="../201808011428/css/main.css">
<link href="https://fonts.googleapis.com/css?family=Hind:400,600|Open+Sans:300,600" rel="stylesheet">
<link rel="stylesheet" href="../201808011428/dist/sortable.min.css">
<script src="../201808011428/dist/sortable.min.js"></script>
<!-- <script src="../../12-21/代码/jquery.min.js"></script> -->
<style>
body {
background-color: aliceblue;
}
</style>
</head>
<body>
<div class="htmleaf-container">
<main class="sortable">
<div class="container">
<div class="wrapper">
<div id="sortable" class="sjs-default">
<div data-sjsel="flatty">
<div class="card">
<img class="card__picture" src="./images/item-1.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">Example 1</h2>
<p class="card__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, eius,
asperiores. Incidunt sapiente est quae iure...
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Asperiores assumenda
ex et repudiandae debitis ipsum ea exercitationem illo earum facere fugit,
quaerat veritatis animi reiciendis nobis aperiam. Maiores, cupiditate quisquam!
Voluptatem hic nulla totam amet fugiat accusantium asperiores magni cupiditate
animi, laudantium voluptates rerum excepturi temporibus blanditiis veniam unde
</p>
</div>
</div>
</div>
<div data-sjsel="flatty">
<div class="card">
<img class="card__picture" src="./images/item-2.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">Example 2</h2>
<p class="card__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum vitae
necessitatibus, dolorem similique vero explicabo...
</p>
</div>
</div>
</div>
<div data-sjsel="funny">
<div class="card">
<img class="card__picture" src="./images/item-3.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">Example 3</h2>
<p class="card__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, placeat
voluptate, fuga tenetur eos ducimus animi porro...
</p>
</div>
</div>
</div>
<div data-sjsel="flatty">
<div class="card">
<img class="card__picture" src="./images/item-4.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">Example 4</h2>
<p class="card__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit doloremque
quisquam, obcaecati unde nam est quos...
</p>
</div>
</div>
</div>
<div data-sjsel="flatty">
<div class="card">
<img class="card__picture" src="./images/item-5.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">Example 5</h2>
<p class="card__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse corporis hic
minima nisi reprehenderit...
</p>
</div>
</div>
</div>
<div data-sjsel="funny">
<div class="card">
<img class="card__picture" src="./images/item-6.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">Example 6</h2>
<p class="card__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel voluptatibus, id,
deserunt inventore...
</p>
</div>
</div>
</div>
<div data-sjsel="flatty">
<div class="card">
<img class="card__picture" src="./images/item-7.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">Example 7</h2>
<p class="card__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum enim beatae vero
culpa, fuga, magni sunt dolores nam...
</p>
</div>
</div>
</div>
<div data-sjsel="flatty">
<div class="card">
<img class="card__picture" src="./images/item-8.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">Example 8</h2>
<p class="card__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae numquam,
blanditiis necessitatibus...
</p>
</div>
</div>
</div>
<div data-sjsel="funny">
<div class="card">
<img class="card__picture" src="./images/item-9.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">Example 9</h2>
<p class="card__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur adipisci
voluptatum laborum officiis...
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<script type="text/javascript">
document.querySelector('#sortable').sortablejs()
</script>
</body>
</html>
jQuery轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../lunbotu/css/htmleaf-demo.css">
<link rel="stylesheet" href="../lunbotu/css/normalize.css">
<link rel='stylesheet' href='http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'>
<link rel="stylesheet" href="../lunbotu/css/style.css">
</head>
<body>
<div class="htmleaf-container">
<div class="container">
<div class="card-stack">
<a class="buttons prev" href="#"><</a>
<ul class="card-list">
<li class="card" style="background: #c31432; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #240b36, #c31432); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #240b36, #c31432); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
">
<img src="../lunbotu/img/1.jpg" alt="Sun" class="card-list__image">
<h3 class="card-list__text">Watch your way toward success as you excel above your competitors.
</h3>
</li>
<li class="card" style="background: #00416A;
background: -webkit-linear-gradient(to right, #FFE000, #799F0C, #00416A);
background: linear-gradient(to right, #FFE000, #799F0C, #00416A);
">
<img src="../lunbotu/img/2.jpg" alt="Sun" class="card-list__image">
<h3 class="card-list__text">Relax and chill, we've got you covered :) </h3>
</li>
<li class="card" style="background: #1e3c72;
background: -webkit-linear-gradient(to right, #2a5298, #1e3c72);
background: linear-gradient(to right, #2a5298, #1e3c72);
">
<img src="../lunbotu/img/3.jpg" alt="Sun" class="card-list__image">
<h3 class="card-list__text"> Boost your social networking presence</h3>
</li>
<li class="card" style="background: #2C3E50;
background: -webkit-linear-gradient(to right, #FD746C, #2C3E50);
background: linear-gradient(to right, #FD746C, #2C3E50);
">
<img src="../lunbotu/img/4.jpg" alt="Sun" class="card-list__image">
<h3 class="card-list__text"> Be at the top of your competitors</h3>
</li>
<li class="card" style="background: #373B44;
background: -webkit-linear-gradient(to right, #4286f4, #373B44);
background: linear-gradient(to right, #4286f4, #373B44);
">
<img src="../lunbotu/img/5.jpg" alt="Sun" class="card-list__image">
<h3 class="card-list__text"> Create contents for your online courses</h3>
</li>
</ul>
<a class="buttons next" href="#">></a>
</div>
</div>
</div>
<script src="../lunbotu/js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script>
var $card = $('.card');
var lastCard = $(".card-list .card").length - 1;
$('.next').click(function () {
var prependList = function () {
if ($('.card').hasClass('activeNow')) {
var $slicedCard = $('.card').slice(lastCard).removeClass('transformThis activeNow');
$('ul').prepend($slicedCard);
}
}
$('li').last().removeClass('transformPrev').addClass('transformThis').prev().addClass('activeNow');
setTimeout(function () { prependList(); }, 150);
});
$('.prev').click(function () {
var appendToList = function () {
if ($('.card').hasClass('activeNow')) {
var $slicedCard = $('.card').slice(0, 1).addClass('transformPrev');
$('.card-list').append($slicedCard);
}
}
$('li').removeClass('transformPrev').last().addClass('activeNow').prevAll().removeClass('activeNow');
setTimeout(function () { appendToList(); }, 150);
});
</script>
</body>
</html>
交换两个数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// [3, 2, 32, 12, 33]
// let a = 22;
// let b = 33;
// [a, b] = [b, a];
// console.log(a);
// console.log(b);
// let [x, y, z] = [1, 2, 3];
// console.log(x, y, z);
// let arr2 = [1, 1, 2, 2, 3, 3];
// let set1 = new Set(arr2); //对于集合而言，内部元素不允许重复
// // console.log(set1);
// console.log(Array.from(set1));
let arr = [1, 2, 3, 4]
let a = arr.map(function (x, y, e) {
// console.log(x) //回调函数的第一个参数接的是值
// console.log(y) //第二个参数接索引下标
// console.log(e) //第三个参数是数组名
// x = x * x
// e[y] = x * x
})
console.log(a)
</script>
</body>
</html>
195
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
