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="<option>--------请选择-----</option>";for(var i=0;i<arrs.length;i++){tem+="<option>"+arrs[i]+"</option>";//使用字符拼接，把全部的内容和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选择器里面的包括子标签在内的内容，<span>123</span>alert($("#tv").text())//返回纯文本123alert($("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="data:image/1.jpg" width="100%" style="display: none">//隐藏
<img src="data: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<tv_div.length;i++){alert(tv_div[i].innerHTML);}*//*获取A标签所有的元素（不包含孙子元素）*//* var   tv_div =  $("#tv_main>div");for(var  i=0;i<tv_div.length;i++){alert(tv_div[i].innerHTML);}*//*获取A标签的兄弟元素(紧挨着的第一个兄弟元素)*//* var   tv_div =  $("#tv_main+div");for(var  i=0;i<tv_div.length;i++){alert(tv_div[i].innerHTML);}*//* 获取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<tv_type.length;i++){alert(tv_type[i].value);}*/// var  tv_type =  $("[type=text]");/*获取type 的值中包含o的节点对象*/// var tv_type =$("[type*=o]");/*     var  tv_type =$("input[type=radio][id=tv_select]")for(var i=0;i<tv_type.length;i++){alert(tv_type[i].value);*//*}*//*获取禁用的value 值*/// var tv_type =$("input:disabled");/*获取选中的value值*//*  var  tv_type =$("input:checked");for(var i=0;i<tv_type.length;i++) {alert(tv_type[i].value);}*/}</script>

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>

javaWeb学习第四天------jQuery入门学习相关推荐

jQuery学习（四）— jQuery的ready事件和原生JS的load事件的区别
jQuery学习(四)- jQuery的ready事件和原生JS的load事件的区别 jQuery的ready事件和原生JS的load事件的区别: 页面中可以有多个ready事件,而load事件会出现 ...
c语言入门自学手机版,C语言入门学习app下载-C语言入门学习app最新版下载 V1.0.2-友情手机站...
C语言入门学习app是一款0基础自学软件,这里有着丰富C语音相关课程学习,大家在这里是可以便捷搜索查找,随时都是可以找到适合感兴趣课程学习,都是一些优质课程知识提供大家,学员在这里是可以高效学习,海恩 ...
c语言入门自学手机版,C语言入门学习软件下载-C语言入门学习手机版v1.0.2 - 起点软件园...
C语言入门学习是一款最新推出上线于安卓手机平台的专业编程学习软件,C语言入门学习app收录了海量入门视频课程,清晰易懂的详细讲解专为刚入门学习C语言的小白量身打造,不同章节都有相应的习题,根据习题成绩 ...
深度学习（六）caffe入门学习
caffe入门学习原文地址:http://blog.csdn.net/hjimce/article/details/48933813 作者:hjimce 本文主要讲解caffe的整个使用流程,适用于 ...
深度学习（十一）RNN入门学习
RNN入门学习原文地址:http://blog.csdn.net/hjimce/article/details/49095371 作者:hjimce 一.相关理论 RNN(Recurrent Neu ...
计算机软件大全学习,[计算机软件及应用]CAD入门学习大全.ppt
[计算机软件及应用]CAD入门学习大全 AutoCAD电子教案计算机基本知识回顾计算机系统由硬件Hardware和软件Software两个子系统组成. 计算机基本知识回顾计算机基本知识回顾计算 ...
JQuery入门学习教程
JQuery学习文章目录 JQuery学习 1.简介 2.入门 2.1 下载 2.2 使用 2.3 核心对象 3.选择器 3.1 基础选择器 3.2 层次选择器 3.2.1 后代选择器 3.2.2 ...
jQuery入门学习
jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax交互, ...
Jquery入门学习第三篇
1. 使用基本动画函数基本的动画函数主要分为show, hide和toggle三个. 都提供了无参数的版本, 表示不适用动画切换元素的显示状态: $("#divPop").sho ...
hibernate框架最新_2020年最新Java后端学习路线，送给正在入门学习Java的你！
这是我根据目前Java技术栈需求整理的最新学习路线,想要学好Java技术从事这方面的岗位工作,你需要掌握的技术知识点有这些: JavaSE,数据库,Jdbc,前端基础,Javaweb,Spring,M ...

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 操作样式

javaWeb学习第四天------jQuery入门学习相关推荐

最新文章

热门文章

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 操作样式

javaWeb学习第四天------jQuery入门学习相关推荐

最新文章

热门文章

层次选择器(父子或者是兄弟关系的)