前端页面除了模板语言freemarker之外还有页面的脚本语言：JavaScript…
jQuery是JavaScript的一个框架，将JavaScript的使用方便了很多
对于任何浏览器而言，都是内置JavaScript引擎的
1

在.ftl文件中定义标签的范围

<script type="text/javascript">
alert("你好");
</script>

1 定义javascript

2 alert弹出框输出

基于jquery的前端后台框架 jquery前端框架有哪些_javascript

如何使用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();
	="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={}
    ="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={}
    ="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>