前端页面除了模板语言freemarker之外还有页面的脚本语言：JavaScript…
jQuery是JavaScript的一个框架，将JavaScript的使用方便了很多
对于任何浏览器而言，都是内置JavaScript引擎的
1
在.ftl文件中定义标签的范围
<script type="text/javascript">
alert("你好");
</script>
1 定义javascript
2 alert弹出框输出
如何使用jQuery
1 引包，不同于其他第三方插件要引入jar包，jQuery是不用引jar包的，只需下载jquery.js文件到项目的资源路径，将该路径添加到.jtl文件中即可
例：在资源文件下的static/lib/jquery文件中一定有一个jquery-3.1.1.min.js文件，这样就算引入了jQuery，路径的根目录默认是static文件，因为在配置文件中static是不被拦截的目录（默认不被拦截）
<script type="text/javascript" src="/lib/jquery/jquery-3.1.1.min.js" charset="UTG-8"></script>
jQuery中如何初始化，初始化方法没有方法名
$(function () {
//这个没有方法名的方法就是初始化方法
//本方法进入页面初始化执行，只要进入页面或者被引用都会被执行
})
jQuery中选择器
jQuery获取
选择器就是定位到某个元素
获取值：就是使用id选择器获取值 获取值用.val()
//引入jQuery文件
<script type="text/javascript" src="/lib/jquery/jquery-3.1.1.min.js"></script>
//在text/javascript标签外定义input输入框，给该输入框默认值LittleElephant，该输入框的id是userName，其他地方要定位这个input输入框用该id定位
姓名<input type="text" value="LittleElephant" id="userName">
//定义标签范围
<script type="text/javascript">
//在标签范围中定义初始化方法，在初始化方法中用id获取input标签的值，获取值用.val()方法获取，将该获取的值赋值给变量name
$(function () {
var name=$("#userName").val();
//console.info是打印日志，在浏览器的f12日志控制台可以看到打印的日志结果
console.info(name)
})
</script>
获取文本用.text()
文本是指在两个标签之间的，就是body；值是在value上的
<script type="text/javascript" src="/lib/jquery/jquery-3.1.1.min.js"></script>
//div设置文本，写在标签之间的就是文本信息，还是用id选择器
<div id="divText">
文本信息，用text获取
</div>
<script type="text/javascript">
$(function () {
//初始化方法中获取文本，用.text()
var text=$("#divText").text();
console.info(text)
})
</script>
jQuery设置值
<script type="text/javascript" src="/lib/jquery/jquery-3.1.1.min.js"></script>
//input标签只设置了id
姓名<input id="userName">
//span标签只设置了id
<span id="spanText"></span>
<script type="text/javascript">
$(function () {
//用input标签的id给标签设置值
var name=$("#userName").val("LittleElephant");
//用文本span标签给该文本设置值
var text=$("#spanText").text("文本类型的span的值");
console.info(name)
console.info(text)
})
</script>
jQuery里的隐藏和显示
浏览器两个按钮，点击隐藏，看到我了吗不展示；点击显示，显示看到我了吗
<script type="text/javascript" src="/lib/jquery/jquery-3.1.1.min.js"></script>
<div id="hideAndShow">
<span>
看到我了吗？
</span>
</div>
<input type="button" value="隐藏"onclick="hide()">
<input type="button" value="显示" onclick="show()">
<script type="text/javascript">
$(function () {
})
//一般方法，非初始化方法，方法不用美元符和括号
function hide() {
//使用id调用隐藏方法
$("#hideAndShow").hide();
}
function show() {
//使用id调用显示方法
$("#hideAndShow").show();
}
</script>
jQuery里追加元素append
<script type="text/javascript" src="/lib/jquery/jquery-3.1.1.min.js"></script>
//定义一个div标签没有设置value
<div id="divAppend">
</div>
//定义一个下拉框select标签没有设置value
<select id="selectAppend" style="width: 300px">
</select>
<input type="button" value="喜欢的乐器" onclick="appendMethod()">
<script type="text/javascript">
$(function () {
})
function appendMethod() {
//用append方法，根据id给文本标签追加值，追加的是标签
$("#divAppend").append("<h1>喜欢的乐器排行</h1>");
//用append方法，根据id给select标签追加值，追加的是下拉选项
$("#selectAppend").append("<option value=\"Guitar\">Guitar</option>" +
"<option value=\"Piano\">Piano</option>" +
"<option value=\"Violin\">Violin</option>");
}
</script>
jQuery删除元素
<script type="text/javascript" src="/lib/jquery/jquery-3.1.1.min.js"></script>
<div id="removeDiv">
要被连标签一起删除的文本
</div>
<div id="emptyDiv">
被清空的标签
<span>
被清空的子标签
</span>
</div>
<input type="button" value="删除(连标签一起删除)慎用" onclick="remove()">
<input type="button" value="清空(连子标签一起清空)" onclick="empty()">
<script type="text/javascript">
$(function () {
})
function remove() {
$("#removeDiv").remove();
}
function empty() {
$("#emptyDiv").empty();
}
</script>
jQuery里判断一个是否是空值用undefined
if(typeof (name)=="undefined")
JavaScript中的对象、数组定义、添加属性、下标值
var user={}; 相当于Java里的 new User=new User();
user.name="xx"; 创建一个name属性并且赋值
var array=[]; 创建了一个名为array的数组，JavaScript中没有list，只有数组
array[0]="10"; 给数组下标为0赋值
例：
<script type="text/javascript" src="/lib/jquery/jquery-3.1.1.min.js"></script>
<input type="button" value="jquery对象数组" onclick="objectArray()">
<script type="text/javascript">
$(function () {
})
function objectArray() {
var user={}
user.name="LittleElephant";
user.age=10;
var array=[]
array[0]="xx";
array[1]="yy";
array[2]="ss";
console.info(user);
console.info(array);
}
</script>
jQuery中的序列化
对象、数组转json字符串JSON.stringify json
字符串转对象、数组 JSON.parse
<script type="text/javascript" src="/lib/jquery/jquery-3.1.1.min.js"></script>
<input type="button" value="jquery对象数组转与json字符串互转" onclick="jsonObjectArray()">
<script type="text/javascript">
$(function () {
})
function jsonObjectArray() {
var user={}
user.name="LittleElephant";
user.age=10;
//将对象转字符串JSON.stringify
var userString=JSON.stringify(user);
console.info(userString);
//将字符串转对象JSON.parse
var userObject=JSON.parse(userString);
console.info(userObject);
var array=[]
array[0]="xx";
array[1]="yy";
array[2]="ss";
//将数组转字符串JSON.stringify
var arrayString=JSON.stringify(array);
console.info(arrayString);
//将字符串转数组JSON.parse
var arrayArray=JSON.parse(arrayString);
console.info(arrayArray);
}
</script>
jQuery中遍历标签元素
第一种遍历each（对于元素的遍历），记住3点
1 标签选择器不用加#
2 回调方法第一个参数是下标，第二个参数是值，这两个名字自己起不限制名字
3 用值遍历，不是用下标遍历，固定写法，没有为什么
//引包
<script type="text/javascript" src="/lib/jquery/jquery-3.1.1.min.js"></script>
//span标签，加入文本内容
<span>span第一行</span>
<span>span第二行</span>
<span>span第三行</span>
//按钮，点击事件调用方法forOne
<input type="button" value="jQuery遍历标签" onclick="forOne()">
//定义标签范围
<script type="text/javascript">
$(function () {
})
//forOne方法，被按钮调用
function forOne() {
$("span").each(function (index,value) {
console.info ($(value).text());
})
}
</script>
//$("span")遍历的是span标签，其实就是标签选择器，所以不加#；这里的value为什么还要$(“”)，相当于将JavaScript的对象转为jQuery可以操作的对象，就可以理解为强制类型转换，如果不用$(“”)就用不了.text()方法了，只能用JavaScript的原生方法获取值value.innerText;用console.info打印到控制台
//each关键字遍历
//(function (index,value) 回调方法中第一个参数是下标，第二个参数是值
//$(value).text()语法就是用值调用，调用的是文本用text，如果是取值用val
第二种遍历for（对于数组的遍历），与Java中一样
<script type="text/javascript" src="/lib/jquery/jquery-3.1.1.min.js"></script>
<input type="button" value="jQuery遍历标签" onclick="forOne()">
<script type="text/javascript">
$(function () {
})
function forOne() {
var nameArray=["xx","yy","ss"];
for(var i=0;i<nameArray.length;i++){
console.info(nameArray[i])
}
}
</script>
第三种遍历forEach（对于数组的遍历）
回调方法中第一个参数是值，第二个参数是下标，也是与each一样，用值遍历获取
<script type="text/javascript" src="/lib/jquery/jquery-3.1.1.min.js"></script>
<input type="button" value="jQuery遍历标签" onclick="forOne()">
<script type="text/javascript">
$(function () {
})
function forOne() {
var nameArray=["xx","yy","ss"];
//回调方法中第一个参数是值，第二个参数是下标，也是与each一样，用值遍历获取
nameArray.forEach(function (value,index) {
console.info(value)
})
}
</script>