java web使用jquery,JAVA_Web_JQuery
简介:
jquery 全称 javaScript Query.是js的一个框架。本质上仍然是js。特点:支持各种主流的浏览器、使用特别简单、拥有便捷的插件扩展机制和丰富的插件。
一、JQuery内部封装原理介绍:匿名闭包。
下面这两行代码是jquery包下的已经封装的代码,因为window我们可以省略不写,因此我们可以直接使用 $ 符号。
// Expose jQuery to the global object
window.jQuery = window.$ = jQuery;
匿名自调用,即使用闭包,将函数要执行的数据一次性挂载到window对象下。其推导过程如下:
function fn1(){
console.log("函数");
};
// 调用函数
fn1();
// fn1时函数名,它包含函数的代码,函数的代码就是“function(){console.log("函数");}”,用括号包裹,替换fn1,得:
(function (){
console.log("函数");
})();
因此对上面函数形参传进去obj,下面的实参传进去window对象,即为下面的表示形式
(function(obj){
//var bjsxt={};
obj.test=function(){
alert("工厂");
}
alert("匿名自调用");
})(window)
因此实现了由局部变量到全局变量window的一个转变。注:因为window是一个全局变量,而且不能够被修改和重定义。
二、jquery基本选择器介绍:id,标签,类,组合
注意:id选择器要加#、标签选择器什么都不加、类选择器要加“ . ”、组合选择器就是直接写多个,中间用逗号隔开。
下面是一些子选择器,层级选择器,等具体哪个可以去查找对应的API
//测试子选择器
function testChild(){
var inps=$("#showdiv>input");
alert(inps.length);
}
//测试层级选择器
function testCj(){
var inp=$("input:first");
alert(inp.val());
}
function testCj2(){
var tds=$("td:not(td[width])");
alert(tds.html());
}
三、jquery操作元素属性
他封装了set/getattribute方法,这里面对应的是attr ,同样存在一个问题:不可以获取实时的input text框中的内容,这个时候要使用value 这里对应的是val 方法
function testField(){
//获取元素对象
var uname=$("#uname");
//获取
alert(uname.attr("type")+":"+uname.attr("value")+":"+uname.val());
}
function testField2(){
//获取元素对象
var uname=$("#uname");
uname.attr("type","button");
}
四、jquery操作元素内容
和js中的是一样的也是一个innerHTML 和一个innerText,只不过是名字不同。
jquery 操作元素内容学习:
获取元素对象
1、获取
对象名.html()//返回当前对象的所有内容,包括HTML标签。
对象名.text()//返回当前对象的文本内容,不包括HTML标签
2、修改
对象名.html("新的内容")//新的内容会将原有内容覆盖,HTML标签会被解析执行
对象名.text("新的内容")//新的内容会将原有内容覆盖,HTML标签不会被解析
五、jquery操作元素样式 css
js中的是直接对象.style.color=***;这里可以调用css()方法加上JSON来使用,
六、js操作文档结构
将指定内容添加到对象内部、外部。等等,可以看API手册
操作文档结构学习:
获取元素对象
1、内部插入
append("内容") 将指定的内容追加到对象的内部
appendTo(元素对象或者选择器) 将制定的元素对象追加到指定的对象内容
prepend() 将指定的内容追加到对象的内部的前面
prependTo() 将制定的元素对象追加到指定的对象内容前面
2、外部插入
after 将指定的内容追加到指定的元素后面
before 将指定的内容追加到指定的元素前面
insertAfter 把所有匹配的元素插入到另一个、指定的元素元素集合的后面
insertBefore 把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
3、包裹
4、替换
5、删除
empty()
七、事件机制的学习
特点:jquery可以对事件添加,并且同一个事件可以添加多种效果,而js只能添加一种,添加多种的话会覆盖。
注:页面载入事件:js中式onload在这里不是使用bind而是使用ready方法。。可以看下面代码!
//js动态添加事件
function testThing(){
//获取元素对象
var btn=document.getElementById("btn2");
//添加事件
btn.οnclick=function(){
alert("我是js方式");
}
}
//jquery
//测试bind绑定
function testBind(){
$("#btn2").bind("click",function(){alert("我是bind绑定单击事件")});
$("#btn2").bind("click",function(){alert("我是bind绑定单击事件2w2222")});
}
//测试unBind解绑
function testUnfBind(){
$("#btn3").unbind("click");
}
//测试one
function testOne(){
$("#btn3").one("click",function(){alert("我是one")});
}
//页面载入事件
//js方式
window.οnlοad=function(){
alert("我是js方式页面加载");
}
window.οnlοad=function(){
alert("我是js方式页面加载2222");
}
//jquery方式
$(document).ready(function(){
alert("我是jQuery");
})
$(document).ready(function(){
alert("我是jQuery22222");
})
八、动画效果:
本质就是使用jquery的 hide show属性来修改div的显示时间,同时加上css的display:none等属性
function test(){
$("#showdiv").show(3000);
$("#div01").hide(3000);
/*$("#showdiv").hide(3000);
$("#div01").show(3000);*/
$("div").toggle(3000);
$("#showdiv").slideDown(3000);
$("#div01").slideUp(2000);
$("#showdiv").fadeOut(3000);
}
总结
jquery就是对js的封装,方便我们调用,在了解了js之后学起来非常块,对于一个后端开发者来说,了解还是必须的。
在使用jquery实现一些动态效果的时候,可以灵活的运用标志位,比如鼠标点击事件,点击一次flag改变一次。可以用来达到某种动态效果的判断条件。
java web使用jquery,JAVA_Web_JQuery相关推荐
- jQuery框架+DWR框架实现的Java Web中的Ajax效果(异步请求,局部刷新)
一 简介和实现效果 这里用一个小例子来简单举例说明,做一个搜索引擎搜索提示效果,通过不断输入字符,然后在下方给出搜索提示.效果图如下: 通过上图可以看到,当输入一个"a"时,提示了 ...
- Java web实验购物网站(IDEA开发环境,JavaScript,JSP,Servlet,jQuery,Ajax,MySql等)——实现购物车
Java web实验购物网站 实验要求 实验开发工具及使用技术 准备工作 完整项目目录结构 实验结果展示 实验步骤 小结 项目完整代码及数据库.SQL文件 自学网站 2021.05.25补充 实验要求 ...
- java web开发初学_2018年学习Web开发的绝对初学者指南
java web开发初学 This post was originally published on Coder-Coder.com. 该帖子最初发布在Coder-Coder.com上 . If yo ...
- 小猿圈之学习java web需要有什么基础?
有很多人想学java,因为java虽然已经火了多年,但是其发展前景还是很不错的,有很大一部分人选择走java web方向,那么java web应该提前掌握哪些知识呢?小猿圈加加下面说一下. 首先找准自 ...
- Java Web 前端高性能优化(二)
2019独角兽企业重金招聘Python工程师标准>>> ######一.上文回顾 上回我们主要从图片的合并.压缩等方面介绍前端性能优化问题(详见Java Web 前端高性能优化(一) ...
- java web入门——概念理解、名词解释
引言:当你想入门java web后,一定会查阅到很多相关的名词:Servlet,HTML,Spring...等等之类的,但是对于他们之间的关系总是比较混乱的,这篇文章就是理清这些名词的关系. 什么是w ...
- java web 框架整合开发_SpringBoot(二)Web整合开发
本篇文章接着上篇内容继续为大家介绍spring boot的其它特性(有些未必是spring boot体系桟的功能,但是是spring特别推荐的一些开源技术本文也会介绍),对了这里只是一个大概的介绍,特 ...
- Java Web 高性能开发,前端的高性能
Java Web 高性能开发,第 2 部分: 前端的高性能 Web 发展的速度让许多人叹为观止,层出不穷的组件.技术,只需要合理的组合.恰当的设置,就可以让 Web 程序性能不断飞跃.Web 的思想是 ...
- java web应用开发_Java Web应用开发基础
模块1 Java Web应用开发概述 1.1 Web基础知识 1.1.1 Web应用及其开发 1.1.2 动态网页 1.1.3 B/S结构 1.1.4 JSP简介 1.2 创建第一个Web项目 1.2 ...
最新文章
- 如何成为一个Android高手
- Pydev 找不到新安装的 Python egg 解决方法
- Feed43自定义 RSS 订阅源
- 三招武林绝学带你玩转「强化学习」
- 关于box-shadow、border-radius不兼容ie8的解决办法
- ServiceStack学习之一准备工作
- 如何提高生产力(二)、软件的开发与采购
- python flask框架是什么_Python三大web框架分别是什么 哪个更好
- 项目中对axios的全局封装
- 令牌环访问控制的原理_通过Keycloak进行访问控制的级别,第1部分:令牌认证
- 创建数据库,库名为考生姓名拼音的缩写,例如考生姓名为张三
- python如何筛选数据_Python如何用filter函数筛选数据
- 一、基于workflow-core强势开发审批流【已成功流转50W笔单据】
- 【Nginx 源码学习】Nginx 的缓冲区
- 数据分析师的就业前景如何?
- excel插入行 uipath_UIPath入門系列三之操作Excel表格
- android 桌面背景异常,android 设置桌面背景
- 码农深夜骑车逆行被拦后爆发大哭,称压力好大!
- 曼尼托巴大学计算机科学专业怎么样,加拿大曼尼托巴大学优势专业有哪些
- GD32 mcu sram启动配置方法
热门文章
- cnpm不是内部或外部命令 cnpm: command not found 解决方案 cnpm
- 项目运行报'vue-cli-service' 不是内部或外部命令,也不是可运行的程序 或批处理文件“
- 使用FTP下载文件connect.retrieveFileStream(filename) 获取不到InputStream流,返回null的问题
- MyBatisPlus_查询篇_入门试炼_01
- mysql做文本挖掘_4graphlab简单文本挖掘
- cuda加速的头文件_如何从C ++头文件调用CUDA文件?
- 手机pdf文件转语音_没有电脑也能处理PDF文件,手机里的这个功能太强大!
- IOS – OpenGL ES 调节图像色度 GPUImageHueFilter
- C语言 memcpy_s 函数 - C语言零基础入门教程
- mysql为什么选innodb_为什么现在的MySQL都要使用innoDB引擎-Go语言中文社区