【WEB小工具】jQuery函数
- jQuery-API帮助文档:Click here
- jQuery简介
jQuery是JavaScript框架,jQuery也是JavaScript代码。使用jQuery要比直接使用JavaScript方便很多。
要使用jQuery,首先需要在jsp页面中导入jQuery。jQuery就是一个js文件而已。
导入jQuery有三种方法:
<!-- 导入c标签库 -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!-- 1. --> <script type="text/javascript" src="<c:url value='/jquery-1.5.1.js'/>"></script><!-- 标签,需导入c标签库 -->
<!-- 2. --> <script type="text/javascript" src="/项目名/jquery-1.5.1.js"></script>
<!-- 3. --> <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-1.5.1.js"></script>
- jQuery核心函数
$()
注意其不同于${}
顺便记一下${}的用法吧:
这是一个EL表达式取值的方法
例如:
比如有A页面请求B页面,在A页面中有一句这样的代码
String name = "测试";
request.setAttribute("name",name); 那么B页面中将这样可以去到name中的数据
${name}
这个输出的值是 测试 当然不一定要放在request中可以去到,同样放在page session一样也可以去到。
但取值是有优先级的 page->request->session等
- 事件之文档加载完毕
在JavaScript中<body onload="xxx()">的意义是:在文档加载完毕后会执行xxx()函数。在jQuery中也存在相同的功能,即:$(function(){..}); 给$()这个参数赋值,参数为一个匿名函数,这个匿名函数会在文档加载完毕时执行。
<script type="text/javascript">
$(function(){
alert('我叫郑斌');
});
</script>
- 选择器
在JavaScript中获取元素可以使用document.getElementByld()等函数,但在jQuery中提供了更为方便的方法。
<script type="text/javascript">
$(function(){
//document.getElementById("id")//返回一个DOM对象,但 DOM的功能少
var hey = $("#Hanxue");//返回一个jQuery对象 '#'表示元素选择器 '.'表示类选择器
alert(hey.text());//打印出该元素的文本内容
alert(hey.html());//打印该元素HTML内容
var ni = $("div");//元素选择器,查找所有的div元素,它返回的是一个jQuery对象,但jQuery中包含多个DOM对象。
alert(ni.text()); $(".myClass").text("88");//类选择器
});
</script>
</head>
<body>
This is my JSP page. <br>
<!-- 供 元素选择器 -->
<div id="Zhengbin"><p>zhengzhou</p></div>
<div id="Hanxue"><p>kunming</p></div>
<!-- 供 类选择器 -->
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
</body>
- 属性
jQuery元素对属性的操作方法:
- attr(name) 读取指定属性的值
- attr(name,value) 设置指定属性的值
- removeAttr(name) 删除指定属性
- 类
jQuery元素对类的操作方法:
- addClass(name) 给元素添加指定类
- removeClass(name) 给元素删除指定类
【WEB小工具】jQuery函数的更多相关文章
- 【WEB小工具】EncodingFilter—设置全局编码
1.我们知道,如果是POST请求,我们需要调用request.setCharacterEncoding("utf-8") 方法来设计编码. public void doGet(Ht ...
- 【WEB小工具】BaseServlet—一个Servlet处理多个请求
package cn.itcast.test.web.servlet; import java.io.IOException; import java.io.PrintWriter; import j ...
- marked插件在线实时解析markdown的web小工具
访问地址: https://mdrush.herokuapp.com/ github项目: https://github.com/qcer/MDRush 实现简介: 1.动态数据绑定 借助Vuejs, ...
- 用友yonsuite产品二开之简单的yonsql查询小工具
和以往的用友产品不同,yonsuite产品开发了低代码平台,满足客户的个性化开发需求.嗯~,一句话不知当讲不当讲,那就讲:所谓低代码平台就是开发不想用实施不会用系列.让我一个开发感受到了憋屈.
- web报表工具FineReport常用函数的用法总结(日期和时间函数)
web报表工具FineReport常用函数的用法总结(日期和时间函数) 说明:凡函数中以日期作为参数因子的,其中日期的形式都必须是yy/mm/dd.而且必须用英文环境下双引号(" " ...
- 【移动端debug-6】如何做一个App里的web调试小工具
原文链接:如何做一个App里的web调试小工具 我们知道现在hybrid app非常流行,在这样的app里,h5页面是应用非常广泛的.相对于以往在pc端开发的网页,放在app里的网页由于无法直接使用桌 ...
- web报表工具FineReport经常使用函数的使用方法总结(日期和时间函数)
web报表工具FineReport经常使用函数的使用方法总结(日期和时间函数) 说明:凡函数中以日期作为參数因子的,当中日期的形式都必须是yy/mm/dd.并且必须用英文环境下双引號(" & ...
- mac版微信web开发者工具(小程序开发工具)无法显示二维码 解决方案
微信小程序概念的提出,绝对可以算得上中国IT界惊天动地的一件大事,这可能意味着一场新的开发热潮即将到来, 我也怀着激动的心情准备全身心投入其中,不过截止目前,在官方网站上下载的最新版本都无法使用,打开 ...
- 微信web开发者工具同时打开两个小程序项目
在写小程序时,想要一边参考别人的Demo一边做,但是微信web开发者工具无法同时开两个实例,怎么办? 单个软件实例来回切换打开的项目太麻烦,一种办法是同时下载[微信web开发者工具]和[微信web开发 ...
随机推荐
- NGINX的奇淫技巧 —— 3. 不同域名输出不同伺服器标识
NGINX的奇淫技巧 —— 3. 不同域名输出不同伺服器标识 ARGUS 1月13日 发布 推荐 0 推荐 收藏 6 收藏,707 浏览 大家或许会有这种奇葩的需求...要是同一台主机上, 需要针对不 ...
- rabbitMQ安装及部署
1.安装 rpm -ivh erlang-18.3-1.el6.x86_64.rpm, 下载地址:http://www.rabbitmq.com/releases/erlang/ rpm --impo ...
- POJ 3579
Median Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 3528 Accepted: 1001 Descriptio ...
- hdu1102
http://acm.hdu.edu.cn/showproblem.php?pid=1102 最小生成树(模板题) 3 0 990 692 990 0 179 692 179 0 1 1 2 一共3个 ...
- PKUSC 模拟赛 day2 下午总结
终于考完了,下午身体状况很不好,看来要锻炼身体了,不然以后ACM没准比赛到一半我就挂掉了 下午差点AK,有一道很简单的题我看错题面了所以没有A掉 第一题显然是非常丝薄的题目 我们很容易通过DP来O(n ...
- cojs 简单的最近公共祖先 解题报告
我曾经自己想过每考试一次就从考试题中找找idea来出题 这次又找到了一个,先不管原来的考试题是什么 考试题中其中的一部分就是今天的这道题目啦 当时考场上自己比较傻,没有注意到有用的性质,套用了之前黑白 ...
- lintcode: 爬楼梯
题目: 爬楼梯 假设你正在爬楼梯,需要n步你才能到达顶部.但每次你只能爬一步或者两步,你能有多少种不同的方法爬到楼顶部? 样例 比如n=3,中不同的方法 返回 3 解题: 动态规划题目,同时还是有顺序 ...
- C语言命名规则
一.程序风格: 1.严格采用阶梯层次组织程序代码: 各层次缩进的分格采用VC的缺省风格,即每层次缩进为4格,括号位于下一行. 要求相匹配的大括号在同一列,对 ...
- Android:储存方式之SharePreferences
使用SharedPreferences保存数据,其实质是采用了xml文件存放数据, 存储位置:/data/data/<package name>/shared_prefs 写入: publ ...
- Java文件解压之TGZ解压
package com.alibaba.intl.batch.dependency; import java.io.File; import java.io.FileInputStream; impo ...