jQuery学习笔记1
jQuery
jQuery强大在它的选择器
概念
一个简洁的JavaScript框架，简化JS开发。
它封装JavaScript常用的功能代码，提供简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
使用
前提：有jQuery的js文件，导入jquery-3.3.1.min.js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="div1">文字1...</div>
<div id="div2">文字2...</div>
<script>
<!--使用jQuery获取元素对象-->
var div1 = $("#div1");
alert(div1.html());
var div2 = $("#div2");
alert(div2.html());
</script>
</body>
</html>
JQuery对象和JS对象区别与转换
- 使用
$("")获取的对象都是jQuery对象。- 使用
$("")获取的对象如果是数组，那么数组中装的每个对象都是js对象。- 使用
document.getElementByXXX()获取的对象都是js对象。- jQuery对象只能使用jQuery中的方法，js对象就只能使用js中的方法。
- js对象转成jQuery对象：
$(js对象)- jQuery对象转成js对象：
jQuery对象.get(0)- 一般情况下都是将 js转成jQuery 来使用
事件绑定
单击事件 click
jQuery中事件名称都是和js一样，只是少了on?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
//js
var b1 = document.getElementById("b1");
b1.onclick=function (ev) {
alert("b1");
};
//jQuery
var $b2 = $("#b2");
$b2.click(function () {
alert("b2");
});
});
</script>
</head>
<body>
<input type="button" id="b1" value="按钮1">
<input type="button" id="b2" value="按钮2">
</body>
</html>
双击事件 dblclick
双击左右移动?
$("#leftName > option").dblclick(function () {
$("#rightName").append(this);
});
jQuery on(events,[selector],[data],fn)
在选择元素上绑定一个或多个事件的事件处理函数
?解决双击左右移动-原来不在的点击不了
$("#leftName").on("dblclick", "option", function () {
$("#rightName").append(this);
});
?解决发言口QQ表情的移除，this指当前双击的img
//<p>包含请发言 和 <img>标签
$("p").on("dblclick","img",function () {
this.remove();
});
入口函数
完整写法
$(document).ready(function () {
});
简写
$().ready(function () {
});
最简写，最推荐
$(function () {
});
window.onload 和 $(function) 区别
window.onload只能定义一次,如果定义多次，后边的会将前边的覆盖掉$(function)可以定义多次的
运行时机: $ (function)会比window.onload 先执行
window.onload是在整个页面所有资源加载完毕后才会执行$(function)是在HTML页面加载进内存形成dom树之后就会执行
样式控制：css方法
$("#div1").css("background-color","red");
?选这个吧
$("#div1").css("backgroundColor","pink");
相关案例
QQ表情选择
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.min.js"></script>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
.emoji{margin:50px;}
ul{overflow: hidden;}
li{float: left;width: 48px;height: 48px;cursor: pointer;}
.emoji img{ cursor: pointer; }
</style>
<script>
$(function () {
$("ul img").click(function () {
$(".word").append($(this).clone());
});
//<p>包含请发言 和 <img>标签
$("p").on("dblclick","img",function () {
this.remove();
});
})
</script>
</head>
<body>
<div class="emoji">
<ul>
<li><img src="img/01.gif" height="22" width="22" alt="" /></li>
<li><img src="img/02.gif" height="22" width="22" alt="" /></li>
<li><img src="img/03.gif" height="22" width="22" alt="" /></li>
<li><img src="img/04.gif" height="22" width="22" alt="" /></li>
<li><img src="img/05.gif" height="22" width="22" alt="" /></li>
<li><img src="img/06.gif" height="22" width="22" alt="" /></li>
<li><img src="img/07.gif" height="22" width="22" alt="" /></li>
<li><img src="img/08.gif" height="22" width="22" alt="" /></li>
<li><img src="img/09.gif" height="22" width="22" alt="" /></li>
<li><img src="img/10.gif" height="22" width="22" alt="" /></li>
<li><img src="img/11.gif" height="22" width="22" alt="" /></li>
<li><img src="img/12.gif" height="22" width="22" alt="" /></li>
</ul>
<p class="word">
<strong>请发言：</strong>
<img src="img/12.gif" height="22" width="22" alt="" />
</p>
</div>
</body>
</html>
左右移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双击左右移动</title>
<script src="js/jquery-3.3.1.min.js"></script>
<style>
#leftName , #btn,#rightName{
float: left;
width: 100px;
height: 300px;
}
#toRight,#toLeft{
margin-top:100px ;
margin-left:30px;
width: 50px;
}
.border{
height: 500px;
padding: 100px;
}
</style>
<script>
$(function () {
$("#toRight").click(function () {
$("#rightName").append($("#leftName > option:selected"));
});
$("#toLeft").click(function () {
$("#leftName").append($("#rightName > option:selected"));
});
// $("#leftName > option").dblclick(function () {
// $("#rightName").append(this);
// });
// $("#rightName > option").dblclick(function () {
// $("#leftName").append(this);
// });
//解决：原来不在的点击不了
$("#leftName").on("dblclick", "option", function () {
$("#rightName").append(this);
});
$("#rightName").on("dblclick", "option", function () {
$("#leftName").append(this);
});
});
</script>
</head>
<body>
<div class="border">
<select id="leftName" multiple="multiple">
<option>张三</option>
<option>李四</option>
<option>王五</option>
<option>赵六</option>
</select>
<div id="btn">
<input type="button" id="toRight" value="-->"><br>
<input type="button" id="toLeft" value="<--">
</div>
<select id="rightName" multiple="multiple">
<option>钱七</option>
</select>
</div>
</body>
</html>
来源：CSDN
作者：林仔的努力日记(。・∀・)ノ
链接：https://blog.csdn.net/weixin_43521297/article/details/85103297