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改变一次。可以用来达到某种动态效果的判断条件。