07_JQuery(前端框架)
2019-09-29 本文已影响0人
渐进逾
jquery介绍
是一个js框架，简化js的编写。jquery宗旨：write less do more。
jquery的插件丰富，所谓插件就是利用jquery技术写一个独立效果.
使用实现步骤
下载jquery，官网www.jquery.com
jQuery以后企业开发中使用生产版本。生产版本(xxx.min.js),体积小，传输快。
js与jq的区别
jquery与js的区别1-js与jq(jquery)的加载事件
1.js的加载完成事件要求每个页面只能有一个，多个的话下面的会覆盖上面的
2.jq的加载完成事件可以有多个，都会运行【推荐使用】
jquery与js的区别2-对象获取与注册事件不同
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js和jq区别</title>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
</head>
<body>
<input type="button" id="b1" value="我是JS对象">
<input type="button" id="b2" value="我是JQ对象">
</body>
<script type="text/javascript">
/*
* 目标1:js与jq获取对象的区别
* js获取对象的语法：document.getElementXXXX(), 简称使用document系列方法获取
* jq获取对象的语法：$("选择器"), 简称使用$和选择器获取
* 目标2：js与jq对象注册事件方式的区别
* js对象注册事件语法： js对象.onclick=function(){...}
* jq对象注册事件语法： jq对象.click(function(){...})
* */
//使用js对象注册点击事件并弹出按钮的value属性值
var jsObj = document.getElementById("b1");
jsObj.onclick = function () {
//获取value值并弹出
alert(jsObj.value); //value属性是js对象的成员
};
//使用jq对象注册点击事件并弹出按钮的value属性值
var jqObj = $("#b2");
jqObj.click(function () {
//获取value值并弹出,this是当前事件源按钮的对象
alert(this.value); //this是js对象，js对象就有value属性
});
</script>
jquery与js的区别3-jq与js对象之间转换
以后会使用jq对象操作DOM，经常将js对象转换为jq对象，之后再操作DOM。
js转换为jq：
jQuery框架对jq对象提供丰富的api方法，简化js的操作。
转换语法：
- js对象转换jq对象语法【重要】
$(js对象) = jq对象
- jq对象转换为js对象语法【了解】
jq对象[0] 或者 jq对象.get(0)
jq对象理解为类似于一个js数组，通过下标的方式获取里面的元素就是js对象
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js和jq区别</title>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
</head>
<body>
<input type="button" id="b1" value="我是JS对象">
<input type="button" id="b2" value="我是JQ对象">
</body>
<script type="text/javascript">
//使用js对象注册点击事件并弹出按钮的value属性值
var jsObj = document.getElementById("b1");
jsObj.onclick = function () {
//获取value值并弹出
//JS--》JQ对象【重要】 jq对象获取value的语法：jq对象.val();
alert($(jsObj).val());
};
//使用jq对象注册点击事件并弹出按钮的value属性值
var jqObj = $("#b2");
jqObj.click(function () {
//获取value值并弹出,this是当前事件源按钮的对象
//JQ--》JS对象
alert(jqObj[0].value);
});
</script>
jQuery选择器1-基本选择器
image.png
代码实现：
<script type="text/javascript">
// 1) 改变 id 为one的元素的背景色为红色
$("#b1").click(function () {
//js操作背景色方式1：js对象.style.backgroundColor="red";
//js操作背景色方式2：js对象.style="background-color:red";
//jq操作背景色方式1：jq对象.css("backgroundColor","red");
//jq操作背景色方式2：jq对象.css("background-color","red");
$("#one").css("background-color","red");
});
// 2) 改变元素名为 <div> 的所有元素的背景色为 红色。
$("#b2").click(function () {
$("div").css("background-color","red");
});
// 3) 改变 class 为 mini 的所有元素的背景色为 红色
$("#b3").click(function () {
$(".mini").css("background-color","red");
});
</script>
jQuery的选择器2-层级选择器
image.png
代码实现：
<script type="text/javascript">
//1) 改变 <body> 内所有 <div> 的背景色为红色
$("#b1").click(function () {
$("body div").css("background-color","red");
});
//2) 改变 <body> 内子 <div> 的背景色为 红色
$("#b2").click(function () {
$("body>div").css("background-color","red");
});
//3) 改变 id为two的下一个div兄弟元素的背景色为红色
$("#b3").click(function () {
$("#two+div").css("background-color","red");
});
</script>
jQuery的选择器3-属性选择器
image.png
实现代码：
<script type="text/javascript">
//1) 含有属性title 的div元素背景色为红色
$("#b1").click(function () {
$("div[title]").css("background-color","red");
});
//2) 属性title值等于test的div元素背景色为红色
$("#b2").click(function () {
$("div[title=test]").css("background-color","red");
});
//3) 属性title值不等于test的div元素(没有title属性的也将被选中)背景色为红色
$("#b3").click(function () {
$("div[title!=test]").css("background-color","red");
});
//4) 选取有属性id的div元素，然后在结果中选取属性title值等于“test”的 div 元素背景色为红色
$("#b4").click(function () {
$("div[id][title=test]").css("background-color","red");
});
</script>
jQuery的选择器4-基本过滤选择器
image.png
实现代码：
<script type="text/javascript">
//1) 改变第一行的背景色为浅灰色 light+color == 浅颜色； dark+颜色=深颜色
$("#b1").click(function () {
$("tr:first").css("background-color","lightgray");
});
//2) 改变最后一行的背景色为lightgreen浅绿色
$("#b2").click(function () {
$("tr:last").css("background-color","lightgreen");
});
//3) 改变除第1行和最后1行的其它行背景色为lightyellow浅黄色
$("#b3").click(function () {
$("tr:not(:first):not(:last)").css("background-color","lightyellow");
});
//4) 改变索引值为偶数的行背景色为lightpink浅粉色，下标从0开始
$("#b4").click(function () {
$("tr:not(:first):not(:last):even").css("background-color","lightpink");
});
//5) 改变索引值为奇数的行背景色为aquamarine深蓝色
$("#b5").click(function () {
$("tr:not(:first):not(:last):odd").css("background-color","aquamarine");
});
//6) 改变索引值大于 3 的tr元素的背景色为oldlace浅米色
$("#b6").click(function () {
$("tr:gt(3)").css("background-color","oldlace");
});
//7) 改变索引值等于 3 的tr元素的背景色为antiquewhite古董白
$("#b7").click(function () {
$("tr:eq(3)").css("background-color","antiquewhite");
});
//8) 改变索引值为小于 3 的tr元素背景色为yellowgreen黄绿色
$("#b8").click(function () {
$("tr:lt(3)").css("background-color","yellowgreen");
});
</script>
jQuery的选择器5-表单属性过滤选择器
image.png
案例：隔行换色
<script src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
//目标：页面加载后偶数行为粉红色，奇数行为黄色
$("tr:gt(1):even").css("background-color","pink");
$("tr:gt(1):odd").css("background-color","yellow");
});
</script>
jQuery的DOM操作1-html代码-文本-值
语法：
image.png
jQuery的DOM操作2-属性操作
语法：
image.png
jQuery的DOM操作3-样式操作
class的操作：
image.png
jQuery的DOM操作4-元素节点创建-插入-移动
语法：
image.png
jQuery的DOM操作5-元素的删除
语法：
image.png
实现代码：
<script src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
//1.给每个表情（li内部的img）注册点击事件
$("li img").click(function () {
//2.将当前点击的表情对象添加到请发言.word标签内部最后子元素位置
//this，就是事件源触发的一个对象，这是js对象
//$(".word").append($(this)); //这样写会发生点一个丢一个,将原对象移走了
//疑问：怎么解决原位置不动，目标位置出现表情？答：可以对原对象进行克隆出一个一模一样的对象，移动到目标位置
//克隆：复制出一个一模一样的对象，数据一样，对象的内存地址不一样， 语法： jq对象.clone();
$(".word").append($(this).clone());
});
});
</script>
######### jquery循环遍历
目标
循环遍历方式：
/*
* 循环遍历方式：
* 1.js传统循环方式
* 格式：for(var i=0;i<length;i++){...}
* 2.js新标准es6的for-of循环【推荐，以后再vue框架中使用】
* 格式：for(var item of jq对象/数组){...}
* 说明：item是数组的每个元素对象
* js遵守ECMASCRIPT规范，es6目前是最新规范，2015年出来
* 3.jquery对象的each方法方式【推荐，web阶段使用】
* 格式：jq对象.each(function(index,element){...});
* 参数: function 是遍历的函数，每一次循环运行一次
* 参数：index, 循环的索引，从0开始
* 参数：element, 循环的每个元素对象，是一个js对象
* 4.jquery全局each方法方式
* 格式：$.each(jq对象,function(index,element){...})
* */
jquery事件1—事件介绍与常用事件
image.png
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
//得到焦点改变背景色pink
$("#t1").focus(function () {
$(this).css("background-color","pink");
});
//失去焦点改变背景色
$("#t1").blur(function () {
$(this).css("background-color","yellow");
});
//松开键，把英文改成大写
//keyup键盘弹起事件
$("#t1").keyup(function () {
//字符串转换为大写的语法：string.toUpperCase();
//1.获取输入的值
var value = $(this).val();
//2.转换为大写
value = value.toUpperCase();
//3.设置回文本框的value属性值
$(this).val(value);
});
//jquery注册事件的链式写法
//得到焦点改变背景色pink
$("#t1").focus(function () {
$(this).css("background-color","pink");
}).blur(function () {
$(this).css("background-color","yellow");
}).keyup(function () {
//字符串转换为大写的语法：string.toUpperCase();
//1.获取输入的值
var value = $(this).val();
//2.转换为大写
value = value.toUpperCase();
//3.设置回文本框的value属性值
$(this).val(value);
});
})
</script>
</head>
<body>
用户名：
<input type="text" id="t1" value="" />
</body>
</html>
事件绑定与解绑
image.png
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件动态绑定</title>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
</head>
<body>
<input type="button" value="按钮1" id="b1">
<input type="button" value="按钮2" id="b2">
<hr>
<input type="button" value="解绑事件" id="unbind">
</body>
<script type="text/javascript">
//给按钮1使用事件名方式注册点击事件，弹出“按钮1”
$("#b1").click(function () {
alert($(this).val());
});
//使用on注册事件方式给b2注册点击事件，弹出“按钮2”
$("#b2").on("click",function () {
alert($(this).val());
});
//给unbind注册点击事件实现给b2解绑事件
$("#unbind").click(function () {
$("#b2").off();//解绑所有事件
/*
* 注意：off只能解绑动态注册的事件，就是使用js或jq代码注册事件
* off无法解绑html标签通过属性绑定的事件
* 例子：<input type="button" value="按钮2" id="b2" onclick="demo();"> off是不能解绑
* 解决方案： $("#b2").removeAttr("onclick");
* */
});
</script>
</html>
案例：给动态创建的元素绑定事件
案例需求：
- 有一个城市的有序列表，每个 li 有点击事件，点击以后弹出城市的名字
- 在下面的文本框中输入新的城市，点按钮添加到 li 列表中，会发现新加的城市没有点击事件。
-
使用上面的动态绑定的方法，可以让新加的城市支持点击事件。
image.png
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加城市列表</title>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
</head>
<body>
<ol id="city">
<li>广州</li>
<li>上海</li>
<li>北京</li>
</ol>
城市名：<input type="text" id="t1" placeholder="请输入城市名">
<input type="button" id="b1" value="添加城市列表">
<script type="text/javascript">
//给每个li添加点击事件，弹出自己的文本内容
/*$("li").click(function () {
alert($(this).text());
});*/
//注意：这个点击事件只适合页面上已有的元素绑定事件，而动态新增的元素是没有事件
//使用on给已有和动态新增的元素绑定事件
$("#city").on("click","li",function () {
alert($(this).text());
});
//点击按钮事件，动态添加li
$("#b1").click(function () {
//1.获取输入的城市名字
var city = $("#t1").val();
//2.将新收入的城市名字加入到城市列表
$("#city").append("<li>"+city+"</li>");
});
</script>
</body>
</html>
