javaWeb学习第四天------jQuery入门学习
今天的学习内容：
文章目录
- JavaScript事件的补充
-
- js中的事件：
-
- 键盘事件：
- 省级联动的实现：（onchange事件的应用）
- DOM和BOM
-
- DOM：文本对象模型
- BOM：浏览器对象模型
-
- BOM 与DOM 之间的关系
- jquery介绍和使用
-
- jquery是什么？
- jquery的使用：
- jquery 准备函数
- jquery 获取节点的三种方式
- JavaScript和jQuery的转换
- jquery 常用的方法
- jQuery事件
-
- jQuery事件和JavaScript事件的区别：
-
- 使用jq实现表单功能
- jquery 提供的常规的方法：
-
- 使用jq实现广告弹出效果
- jquery 的选择器
-
- 层次选择器(父子 或者是兄弟关系的)
- 过滤选择器
- 针对input标签的属性选择器
- jquery 操作样式
JavaScript事件的补充
js中的事件：
onchange 当输入框发生改变的时候
onmouseover 移动到某一个元素的时候触发
onmouseout 移出某一个元素的时候 (前提是在移入的状态下)
键盘事件：
onkeydown 表示按下的时候
onkeyup 松开的时候
onkeypres 表示按下挥着长按的时候都会触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘事件</title>
</head>
<body >
<h1>123456789</h1>
<!--onkeydown="alert('你点了我')"可以重复触发-->
<!--onkeyup="alert('键盘抬起了')" 可以重复触发-->
<!--onkeypress="alert('长按或按下触发')" 可以重复触发-->
</body>
</html>
省级联动的实现：（onchange事件的应用）
- 注意问题：代码中的this.value 表示获取当前select标签中选择的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省级联动</title>
</head>
<body>
<select onchange="show(this.value)"><!--this.value 当前对象select的option的value值-->
<option>-------请选择-----</option>
<option value="0">上海</option>
<option value="1">北京</option>
<option value="2">广州</option>
</select>
<select id="tv">
<option>--------请选择-----</option>
</select>
<script>
//使用onchangse实现省级联动
function show(index) {
//将获取到的value值传进来
var arr = new Array(3);//定义一个数组
arr[0] = ["1", "2", "3"];//将要联动显示的内容加进来
arr[1] = ["4", "5", "6"];
arr[2] = ["7", "8", "9"];
var tv=document.getElementById("tv");//获取联动显示的select标签
var arrs=arr[index];//把当前对象的value作为数组下标转进来，找到指定的联动内容
var tem="";
for(var i=0;i<arrs.length;i++){
tem+="+arrs[i]+"";//使用字符拼接，把全部的内容和option便签拼接到一个字符串里面
}
tv.innerHTML=tem;//使用innerHtml往第二个select里面注入内容
}
</script>
</body>
</html>
DOM和BOM
DOM：文本对象模型
- DOM是整个页面映射为一个多层节点结构的节点树，是把HTML标签节点 还有属性节点 文本节点封装成了一个对象，
HTML页面中的每个组成部分都是某种类型的节点。借助DOM提供的方法和属性，可以进行删除、添加、替换或修改任何节点。
DOM的三个重要的节点：（html在浏览器内存里都加载成一个DOM 树）
- 标签节点
- 文本节点(空格也是文本)
- 属性节点
DOM注意问题：
- 一个html 只能存在一个根标签,并且根标签没有父元素
- 标签可以存在兄弟元素，以及父元素
DOM节点图：
BOM：浏览器对象模型
- 浏览器页面初始化时，会在内存创建一个全局对象，用来描述当前窗口的属性和状态，这个全局对象被称为浏览器对象模型。
BOM 与DOM 之间的关系
- BOM 表示浏览器对象既window(窗口对象) DOM表示节点对象
- BOM 包含DOM 对象
jquery介绍和使用
jquery是什么？
- 就是对js的代码的底层的封装 ，实现同样的功能，使用简单的代码来实现
- jquery 做了很多css的适配
jquery的使用：
- 在项目中导入jquery文件
- 引入jquery文件(一般在头部)
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.8.3.js"></script>
</head>
-
jquery 版本： jquery-1.8.3.js（ 比较常用,稳定性比较好）其中jquery-1.8.3.min.js
代码都是一样的, min.js 属于压缩版(只是去除了空格与换行) 占的空间比较小(上线的项目==>打包的项目越小越好) -
jquery-1.8.3.js 标准版本适合学习,适合查看相关的源代码
jquery 准备函数
<head>
<script src="js/jquery-1.8.3.js"></script>
</head>
<body>
<script>
//第一种准备函数
$(function () {
//在这里写执行的代码
});
//第二种准备函数
$(document).ready(function () {
//在这里写执行的代码
})
//$==>表示的就是jquery
</script>
</body>
jquery 获取节点的三种方式
<body>
<input type="text" id="tv_text" class="tv_text_class">
<script>
//第一种准备函数
$(function () {
var jQobject=$("input");//通过便签选择器获取JQ节点对象
var jQobject2=$("#tv_text");//通过id选择器获取JQ节点对象
var jQobject3=$(".tv_text_class");//通过类选择器获取
});
</script>
</body>
注意事项:
1.选择器获取的时候 小括号才用"" ==> $("#tv_input")
2.变量的时候都不需要加""
注意错误提示： $ is not defined ==> 表示jquery文件没有引入
JavaScript和jQuery的转换
jquery 与js 中的属性与方法能不能相互调用
-
jquery ==> 转换成js 对象：(jquery 其实就是js 的一个数组)
$tv_input[0];//此时表示JavaScript对象
-
js ==> 转换成jquery 对象：
var tv_input= document.getElementById(“tv_input”);==>$(tv_input)；//不需要双引号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.8.3.js"> </script>
</head>
<body>
<input type="text" class="cla" id="id_cla" value="确定">
<script>
//jq的预加载方式一
$(function () {
//如果不导入jq包会报$符号为未定义
//jq三种选择器：
// alert($("input").val());
// alert($("#id_cla").val())
// alert($(".cla").val());
// jq不能使用js的定义的方法和属性，所以需要转化
// var tem=$("#id_cla");//jq节点对象转换为js节点对象
// alert(tem[0].value) ;//jq对象就是js对象的数组，这里只有一个input直接使用下标0代表这个js对象
var tv_id= document.getElementById("id_cla");//js获取节点对象
alert($(tv_id).val());//js节点对象转换为jq节点对象，注意不需要双引号，传进去的对象变量
})
//alert()方法是window对象的成员方法
</script>
</body>
</html>
jquery 常用的方法
-
val()==>获取input 标签的value值
$("#tv_input").val(“您好”); 给value赋值
-
html() ==> 获取标签的value 值
$("#tv_main").html(“您好,哈哈”) ==》 不会识别标签 也就是不能忽略便签于文本，会把标签和文本一起获取到 ==>这都是方法,不是属性()
-
text() 获取纯text文本，会忽略标签
<body> <div id="tv"><span>123</span></div> <input type="text" value="123"> <script> $(function () { alert($("#tv").html());//返回id选择器里面的包括子标签在内的内容，123 alert($("#tv").text())//返回纯文本123 alert($("input").val())//返回value的值 }) </script> </body>
jQuery事件
jQuery事件和JavaScript事件的区别：
- 没有前缀on
- 对同一个节点给不同事件，可以连着写
- 主要在html中命名不适用
常用事件：clik（）点击事件,blur（）,失去焦点事件，focus（）获取焦点等
使用jq实现表单功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.8.3.js"></script>
</head>
<body>
<p>请输入用户名：<input type="text" id="tv_id"><span id="tv_id_span"></span></p>
<p>请输入密码：<input type="password" id="tv_pass"><span id="tv_pass_span"></span></p>
<p>确认密码：<input type="password" id="tv_re_pass"><span id="tv_re_pass_span"></span></p>
<script>
//jq里 的方法可以连续点
$(function () {
$("#tv_id").blur(function () {
//回调函数
var tv_id=$("#tv_id").val();//通过val()获取值判断是否是空
if(tv_id==""||tv_id==null){
$("#tv_id_span").html("输入为空");
}
}).focus(function () {
$("#tv_id_span").html("");
});
//
$("#tv_re_pass").blur(function () {
//确认密码
var tv_re_pass=$("#tv_re_pass").val();
var tv_pass=$("#tv_pass").val();
if (tv_re_pass!=tv_pass){
$("#tv_re_pass_span").html("密码不一致");
}
}).focus(function () {
$("#tv_re_pass_span").html("");
});
});
</script>
</body>
</html>
jquery 提供的常规的方法：
| hide()隐藏 | show()显示 | toggle() 又显示又隐藏 |
|---|---|---|
| slideUp() 隐藏 | slideDown() 显示 | slideToggle() 又显示又隐藏 自带一个上下动画的效果 |
| fadeOut() 隐藏 | fadeIn() 显示 | fadeToggle() 又显示又隐藏; 自带一个淡入淡出的效果 |
<!--引入jquery 文件-->
<style>
div{
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<input type="button" id="tv_hide" value="隐藏">
<input type="button" id="tv_show" value="显示">
<input type="button" id="tv_show_hide" value="显示隐藏">
<div id="tv_div">
</div>
<!--jquery 提供一组方法-->
<script>
$("#tv_hide").click(function () {
$("#tv_div").fadeOut(2000);
//$("#tv_div").slideUp(2000);
/* $("#tv_div").hide(2000,function () {//在隐藏操作完成后执行
alert("您好")
});*/
});
$("#tv_show").click(function () {
$("#tv_div").fadeIn(2000);
//$("#tv_div").slideDown(2000);
/* $("#tv_div").show(2000,function () {
alert("哈哈哈哈")
});*/
});
$("#tv_show_hide").click(function () {
$("#tv_div").fadeToggle(2000);
// $("#tv_div").toggle(2000);
// $("#tv_div").slideToggle(2000);
});
</script>
使用jq实现广告弹出效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.8.3.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
div {
width: 500px;
height: 500px;
background: red;
}
</style>
</head>
<body>
<img id="tv_img" src="image/1.jpg" width="100%" style="display: none">//隐藏
<img src="image/2.jpg" width="100%">
<script>
$(document).ready(function () {
//准备函数，在界面加载完后执行 jq的预加载方式二
setTimeout("tv_show()", 2000);
});
function tv_show() {
$("#tv_img").show(2000, function () {
//回掉函数
setTimeout("tv_hide()", 2000);
});
}
function tv_hide() {
$("#tv_img").hide(2000);
}
</script>
<!--<input id="tv_hide" type="button" value="隐藏">
<input id="tv_show" type="button" value="显示">
<input id="tv_hide_show" type="button" value="既隐藏又显示">
<div id="tv_div">
</div>
<script>
$("#tv_hide").click(function () {
// $("#tv_div").hide(2000);//左上角移动隐藏
// $("#tv_div").slideUp(2000);//向上活动隐藏div
$("#tv_div").fadeOut(2000);//渐进式隐藏div
});
$("#tv_show").click(function () {
// $("#tv_div").show(2000);右下角移动显示div
// $("#tv_div").slideDown(2000);//向下活动展示div
$("#tv_div").fadeIn(2000);//渐进式显示div
});
$("#tv_hide_show").click(function () {
// $("#tv_div").toggle(2000);
// $("#tv_div").slideDown(2000);//隐藏时点击就是显示，显示时点击就是隐藏
$("#tv_div").fadeToggle(2000);
});
</script>-->
</body>
</html>
jquery 的选择器
层次选择器(父子 或者是兄弟关系的)
-
A B =>$(A B) ==>获取A 标签下所有的元素(包含孙子元素)
-
A>B =>$(A>B) ==>获取A标签所有的元素（不包含孙子元素）
-
A+B =>$(A+B)==>获取A标签的兄弟元素(紧挨着的第一个兄弟元素)
-
A~B =>$(A~B)==>获取A标签下所有的兄弟元素
<input type="button" value="确定" onclick="getElment()">
<div id="tv_main">
<div>0000</div>
<div>11111</div>
<div>222</div>
<div>3333</div>
<div>444</div>
<div>555</div>
<div>666</div>
<div>777</div>
<span>
<div>8888</div>
</span>
</div>
<div>9999</div>
<div>101010101</div>
<span>
<div>12121213131414</div>
</span>
<script>
function getElment() {
/*获取A 标签下所有的元素(包含孙子元素)*/
/*var tv_div = $("#tv_main div");
for(var i=0;i
/*获取A标签所有的元素（不包含孙子元素）*/
/* var tv_div = $("#tv_main>div");
for(var i=0;i
/*获取A标签的兄弟元素(紧挨着的第一个兄弟元素)*/
/* var tv_div = $("#tv_main+div");
for(var i=0;i
/* 获取A标签下所有的兄弟元素*/
var tv_div = $("#tv_main~div");
for(var i=0;i<tv_div.length;i++){
alert(tv_div[i].innerHTML);
}
}
</script>
过滤选择器
-
$(“div:even”) 表示所有偶数项的div 注意点:索引是从0 开始的
-
$(“div:odd”); 表示所有奇数项的div 注意点:索引是从0 开始的
-
$(“div:eq(4)”) 获取到索引为4 的div元素
-
$(“div:gt(4)”); 获取到索引大于 的div元素
-
$(“div:lt(4)”) 获取小于4 的div元素
-
$(“div:not(div:odd)”) 表示取相反的结果
<input type="button" onclick="show()" value="提交"> <div>00000</div> <div>111111</div> <div>222222</div> <div>33333</div> <div>444444</div> <div>555555</div> <div>666666</div> <div>777777</div> <div>888888</div> <!--获取所有偶数项的div--> <script> function show() { /* var nums = $("div:even");*/ // var nums = $("div:odd"); // var nums =$("div:eq(4)"); // var nums =$("div:gt(4)"); //var nums =$("div:lt(4)"); var nums =$("div:not(div:odd)") for(var i=0;i<nums.length;i++){ alert(nums[i].innerHTML); } } </script>
针对input标签的属性选择器
-
$("[type]"); 获取存在属性type所有的节点
-
$("[type=text]"); 获取所有属性type=text的节点对象
-
$("[type*=o]") 获取type 的值中包含o的节点对象
-
$(“input[type=radio][id=tv_select]”) 同时满足 type=radio id=tv_select 的input标签
-
$(“input:disabled”); 获取input 标签禁用的value值
-
$(“input:checked”); 获取到单选或者复选框选中的节点
-
$("#tv_main>option:selected"); 获取当前select下所选中的值
<body> <input type="button" value="确定" onclick="show()"> <input type="text" value="11111" disabled> <input type="text" value="222222"> <input type="radio" name=" sex" value="男"> 男 <input type="radio" id="tv_select" checked name=" sex" value="女"> 女 <select id="tv_main"> <option value="0" >0</option> <option value="1" selected>1</option> <option value="2">2</option> </select> <!--获取所有存在属性为type的value值--> <script> function show() { var tv_type = $("#tv_main>option:selected"); for(var i=0;i<tv_type.length;i++) { alert(tv_type[i].value); } // alert($("[type]").size()) /*var tv_type = $("[type]"); for(var i=0;i
jquery 操作样式
-
jquery 添加样式： 如：$("#tv_div").addClass(“getClass”);
注意问题：1. 必须要双引号 2.不需要加.
-
jquery删除样式：$("#tv_div").removeClass(“getClass”);
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.8.3.js"></script>
<style>
.getClass{
//操作的样式
width: 100px;
height: 100px;
background:red;
}
</style>
</head>
<body>
<input type="button" onclick="addClass()" value="添加样式">
<input type="button" onclick="deleteClass()" value="删除样式">
<div id="tv_div"></div>
<script>
function addClass() {
$("#tv_div").addClass("getClass");//添加样式
}
function deleteClass() {
$("#tv_div").removeClass("getClass");//移除样式
}
</script>
</body>