JQuery

样式的组成

元素由外边距(margin)、边框(border)、内边距(padding)、内容(html)这四部分构成，

在css中可以对它们进行描述，如:

margin: 5px;

border: 1px solid black;

border-width: 2px;

padding: 5px;

background-color: red;

width: 50%;

width: 200px;

等

具体可以在FireDebug中调试

JQuery配置和例子

JQuery对JavaScript做了一层包装，让javascript写起来更简单，例如以前的getElementmentById("username")可以写成${"#userName"},而且让Ajax的代码也大大简化。

配置：

JQuery是一个.js文件，使用时把它引入即可。

首先到JQuery的官网下载它的.js文件,http://jquery.com.

然后在页面中将它引入，如：

引入过后就可以在自己的javascript代码中使用了，一般自己的javascript也放到一个.js文件中，如：

在页面加载完成后对其中的元素注册事件

$(document).ready(function() {

$("#username").click(function() {

});

查找元素的方式：

1、根据id查找，$("#username")

2、查找子元素如，$("#username li"),空格隔开表示父子关系

3、通过标签名查找，如：$("div")

4、通过class查找，如$(".class1"),$("div.class1")

5、查找奇数个用odd，偶数个用even，如：

$("table td:even")

取得和改变元素的属性(取得时不带参数，设置时带上设置的参数即可)

取出其中的html值，如：

$("#table1").html();

设置值:$("#table1").html("<table><tr></tr></table>");

取出文本元素的value，

$("#username").val();

设置同理。

设置css样式：

$("#username").css("padding", 0)

取得样式$("#username").css("padding")

设置属性

$("#carimage").attr("src", "images/a.jpg");

animate动画效果

用animate设置元素某个属性改变经历的时间，例如

div1.animate({

left: 200px,

top: 10px

}, 300);

表示该div在300毫秒内，动画移动到距离左边200px，上边10px的位置

注册事件

鼠标点击用click

键盘放开用keyup,如

keyup(function(event) {

var keyCode = event.which;

if (keyCode == 13) {

tdNode.html(inputText.val());

})

event是传入的事件参数，event.whick返回按下的键值。

创建元素添加到另一个元素

var inputText = $("<input type='text'/>");

可以将它添加到另一个元素中，如td等：

inputText.appendTo($("#td1");

或者

$("#td1").append(inputText);

查找子元素

$("#table1").children("td")

返回table1里面的<td>子元素，可以用

$("#table1").children("td").length > 0来判断是否包含了该子元素

通过索引找出多个元素中的一个

$("#tabfirst li").each(function(index) {

// 每一个包装li的Jquery对象都会执行这个function方法，传入参数就是当前的索引值

// 有了index值，可以找出当前li所对应的div

// 将对应的div显示

$("div.contentfirst").eq(index).addClass("contentin");

// 或者

// $("div.contentfirst :eq(" + index + ")").addClass("contentin");

})

用eq去找。

设置延时，用于防止鼠标快速滑动等

var timeoutId;

liNode.mouseover(function(){

// 设置延时，防止鼠标快速滑动,鼠标进入200毫秒后执行alert(1)，如果

//200毫秒之内鼠标出去，则不执行alert。

timeoutId = setTimeout(function(){

alert(1);

},200);

}).mouseout(function() {

clearTimeout(timeoutId);

});

页面装载

if (index ==0) {

// 装入静态完整页面

$("#realcontent").load("TabLoad.html");

} else if (index == 1){

// 装入动态部分页面

$("#realcontent").load("TabLoad.jsp div");

} else if (index == 2){

// 装入远程数据(也是一个动态页面输出)

$("#realcontent").load("TabData.jsp")

}

控制显示和隐藏

显示隐藏的几种方式：

display none :为none时元素的位置会被后面元素挤掉

display block

visibility: hidden;后面元素不会挤上来

visibility: visible;

opacity: 1;

opacity: 0; 后面元素不会挤上来,并且可以定义渐变，如：

$(this).animate({

opacity: 0

}, 500)

500毫秒内隐藏。

fadeOut(500)

fadeIn(500)

show()

hide()

触发事件

可以让一个元素的事件立即模拟触发，如获得焦点、鼠标点击等，例如：

inputText.trigger("focus").trigger("select");

或者

inputText.focus().select();

让文本框获得焦点然后自动选中其中的内容。

AJAX使用

1、$.get可以用get方式与服务器交互，如：

$.get("http://127.0.0.1:9090/JQueryUserVerify?userName=zhangsan", null, function(response) {

alert(response);

}

2、$.post方式：

// 首先检查缓存中是否已经有，如果有就不执行ajax

if (!cartypeSelect.data(cartypeValue)) {

$.post("http://127.0.0.1:9090/chainselect/SelectChainServlet", {keyword: cartypeValue, type: "sub"}, function(data) {

alert(data.length);

cartypeSelect.data(cartypeValue, data);

//将返回值进行缓存，cartypeValue是当前的option值.

}, "json");

post的交互数据一般采用json格式

缓存数据：

可以将ajax取到的数据缓存到html节点上，采用key、value的方式存储，例如<select>发生change事件时调用ajax，不同的option取得不同的数据，因此可以在select上对每个option取得的数据进行缓存，key就用option的值。

绑定AJAX事件

可以为dom元素绑定ajax事件，即在ajax开始时、结束时执行一些代码，如：

loadingimg.ajaxStart(function() {

$(this).css("visibility", "visible");

$(this).animate({

opacity: 1

}, 0)

}).ajaxStop(function() {

//$(this).fadeOut(1000);

$(this).animate({

opacity: 0

}, 500)

});

JQuery插件

JQuery插件类似于定义一个函数。一般都有return this，以便进行方法链式的调用。一般是某个jquery对象去调用它，可以在它里面用this获得当前调用它的对象。

$(document).ready(function() {

$("#leftpop").hello();

});

$.fn.hello = function() {

alert(this.val());

return this;

}

传参数，可以传入一个对象

$(document).ready(function() {

$("#leftpop").hello({left: "center", top: "center"});

});

$.fn.hello = function(positon) {

alert(this.val());

return this;

}

参数可以传入一个函数，在插件中回调。

$("#leftpop").hello({left: "center", top: "center"}, function() {

alert(1);

});

$.fn.hello = function(positon, hidefunc) {

hidefunc();

}

插件内部可以定义函数。

判断对象是否为空及类型

if (position && position instanceof Object)

if (positionleft && typeof positionleft == "string")

获取窗口宽度及滚动条长度

$(window).width()

$(window).scrollLeft()

$("#left").width()：某节点的宽度

$("#left").outerWidth()：节点宽度加上padding、border、margin

$("#left").outerWidth(true)：节点宽度加上padding、border

$("#left").innerWidth()：节点宽度加上padding

用户注册

在页面中完成一个注册输入校验的js代码：

* 1.button按下时，获取文本框数据，发送给服务器，，接收服务器返回数据，填充到div中。

* 2.文本框上，用户按键之后，需要判断文本框中的内容是否为空，如果不为空，红色的边框和背景图就应该取消，

* 否则保留。

*需要在页面装载完成时注册上这些工作

$(document).ready(function() {

//这里面内容是页面装载完成后需要执行的代码

//需要找到button按钮，注册事件

var userNameNode = $("#userName");

$("#verifyButton").click(function() {

//1.获取文本框的内容

var userName = userNameNode.val();

//2.将这个内容发送给服务器端

if (userName == "") {

alert("用户名不能为空");

} else {

$.get("http://127.0.0.1:9090/JQueryUserVerify?userName=" + userName, null, function(response) {

//3.接收服务器端返回的数据，填充到div中

$("#result").html(response);

});

}

});

//需要找到文本框，注册事件

userNameNode.keyup(function(){

//获取当前文本框中的内容

var value = userNameNode.val();

if (value == "") {

//让边框变成红色，并且带背景图

userNameNode.addClass("userText");

} else {

//去掉边框和背景图

userNameNode.removeClass("userText");

}

})

});

其中$(document).ready(function()表示在页面onload完成时执行一个函数。

$("#userName")相当于document.getElementById("username");

.click(function()相当于onclick=function()

.val()相当于.value

$.get("http://127.0.0.1:9090/JQueryUserVerify?userName=" + userName, null, function(response) {

//3.接收服务器端返回的数据，填充到div中

$("#result").html(response);

就是JQuery使用Ajax，其中response是服务器的返回值,用.html赋值给span或者div.

addClass和removeClass可以增加和删除样式，参数是css文件中class的名字.

Css文件如：

.userText {

/*控制文本框边框是红色实线*/

border: 1px solid red;

background-repeat: repeat-x;

background-position: bottom;

}

JQuery可编辑的表格

Html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>可以编写的表格</title>

</head>

<body>

<table>

<thead>

<tr>

<th colspan="2">鼠标点击就可以编辑</th>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

</html>

Css代码：

table {

border: 1px solid black;

/*修正单元格间的边框合并*/

border-collapse: collapse;

width: 400px

}

table td {

border: 1px solid black;

width: 50%

}

table th {

border: 1px solid black;

width: 50%

}

tbody th {

background-color: #A3BAE9

}

Js代码：

// 需要首先通过Javascript来解决内容部分奇偶行的背景色不同

//$(document).ready(function() {

//});

$(function() {

// 找到表格的内容区域中所有的偶数行

$("tbody tr:even").css("background-color", "#ECE9D8");

// 找到所有的学号单元格

var numTd = $("tbody td:even");

//给这些单元格注册鼠标点击事件，

numTd.click(function() {

// 首先判断是否有input.

var tdObj = $(this);

if (tdObj.children("input").length > 0) {

// 当前td中有input，不执行click处理

return false;

}

/*一般方法*/

// 找到当前鼠标点击的td, 这个this就是对应的响应td.

var tdObj = $(this);

// 创建一个文本框

var inputObj = $("<input type='text'>");

// 去掉文本框的边框

inputObj.css("border-width", 0);

// 设置文本框中文字大小为16px.

inputObj.css("font-size", "16px");

// 使文本框宽度和td宽度相同

inputObj.width(tdObj.width());

// 设置文本框的背景色

inputObj.css("background-color", tdObj.css("background-color"));

// 需要将当前td中的内容放到文本框中

inputObj.val(tdObj.html());

tdObj.html("");

// 将文本框插入到td中

inputObj.appendTo(tdObj);

/*方法链方式*/

// 找到当前鼠标点击的td, 这个this就是对应的响应td.

var tdObj = $(this);

var text = tdObj.html();

tdObj.html("");

// 去掉文本框的边框

// 创建一个文本框

var inputObj = $("<input type='text'>").css("border-width", 0)

// 设置文本框中文字大小为16px.

.css("font-size", "16px")

// 使文本框宽度和td宽度相同

.width(tdObj.width())

// 设置文本框的背景色

.css("background-color", tdObj.css("background-color"))

// 需要将当前td中的内容放到文本框中

.val(text)

// 将文本框插入到td中

.appendTo(tdObj);

// 使文本框插入之后就被选中

inputObj.trigger("focus").trigger("select");

// 为文本框inputObj添加onclick，让它的点击事件不传播到tr去

inputObj.click(function() {

return false;

});

// 处理文本框上回车和esc按键操作

inputObj.keyup(function(event) {

// 取得键值

var keyCode = event.which;

// 处理回车，确认输入

if (keyCode == 13) {

// 获取当前文本框中的内容

var inputtext = $(this).val();

// 将td的内容修改成文本框内容

tdObj.html(inputtext);

}

// 处理esc，撤销输入

if (keyCode == 27) {

// 将td中的内容还原成text

tdObj.html(text);

}

})

});

菜单效果

menu.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

</head>

<body>

<ul>

<ul>

<li>

</li>

<li>

</li>

</ul>

</li>

<ul>

<li>

</li>

<li>

</li>

</ul> </li>

<ul>

<li>

</li>

<li>

</li>

</ul>

</li>

</ul>

<br/>

<ul>

<ul>

<li>

</li>

<li>

</li>

</ul>

</li>

<ul>

<li>

</li>

<li>

</li>

</ul> </li>

<ul>

<li>

</li>

<li>

</li>

</ul>

</li>

</ul>

</body>

</html>

menu.css

ul, li {

/*清除ul和li上默认的小圆点*/

list-style: none;

}

ul {

/*清除子菜单的缩进值*/

padding: 0;

margin: 0;

}

.main, .hmain {

background-repeat: repeat-x;

width: 120px;

}

li {

background-color: #EEEEEE;

}

a {

/*取消下划线*/

text-decoration: none;

padding-left: 20px;

display: block;/*block可以让a充满整个它所在的区域，否则只有文字上才变小手图标*/

display: inline-block;/*这个是专为ie6用的，它就相当于block,其他浏览器不认inline-block*/

width: 100px;/*ie6专用，因为其他浏览器都已经充满了*/

padding-top: 3px;/*为了让行与行之间有间隙，更好看*/

padding-bottom: 3px;

}

/*主菜单中的a链接*/

.main a, .hmain a {

color: white;

background-repeat: no-repeat;

background-position: 3px center;/*控制背景图的位置，距左边3px,垂直居中*/

}

/*子菜单中的a链接*/

.main li a, .hmain li a {

color: black;

}

.main ul, .hmain ul {

display: none;/*刚开始时隐藏*/

}

.hmain {

float: left;

margin-right: 1px;

}

menu.js

$(document).ready(function() {

//页面装载完成时执行

$(".main > a").click(function() {

// 找到主菜单项对应的子菜单项,用next找下一个标签名是ul的兄弟节点。

var ulNode = $(this).next("ul");

/*老式方法*/

if (ulNode.css("display") == "none") {

ulNode.css("display", "block");

} else {

ulNode.css("display", "none");

}

/*新式方法1*/

//ulNode.show(300);//参数是动画效果时间，或者是"slow","normal","fast"

//ulNode.hide(300);

/*新式方法2,用toggle自动判断显示或隐藏*/

//ulNode.toggle("fast");

/*新式方法3,用slide卷帘效果，同样支持toogle,slideToggle*/

//ulNode.slideDown();

//ulNode.slideUp();

ulNode.slideToggle("fast");

changeIcon($(this));

});

// 横向菜单，当鼠标移入时显示它的ul，移除时隐藏

$(".hmain").hover(function(){

$(this).children("ul").slideDown();

changeIcon($(this).children("a"));

}, function() {

changeIcon($(this).children("a"));

$(this).children("ul").slideUp();

});

//或者：

//$(".hmain").hover(function() {

// changeIcon($(this).children("a"));

// $(this).children("ul").slideToggle("fast");

//})

});

/**

* 修改主菜单的指示图标

function changeIcon(mainNode) {

if (mainNode.css("background-image").indexOf("collapsed.gif") > 0) {

mainNode.css("background-image", "url(images/expanded.gif)");

} else {

mainNode.css("background-image", "url(images/collapsed.gif)");

}

标签页效果

tab.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>JQuery标签页效果</title>

</head>

<body>

</ul>

我是内容1

</div>

我是内容2

</div>

我是内容3

</div>

<br/>

<li class="tabin">装入完整页面</li>

<li>装入部分页面</li>

<li>从远程获取数据</li>

</ul>

</div>

</body>

</html>

tab.css

ul, li {

/*去除列表缩进，前面的点*/

margin: 0;

padding: 0;

list-style: none;

}

#tabfirst li {

/*让列表显示到一行上，采用浮动元素格式*/

float: left;

background-color: #868686;

color: white;

padding: 5px;

margin-right: 2px;

border: 1px solid white;/*边框默认白色，达到和下面div分割的效果*/

}

#tabfirst li.tabin {

/*li和div融合，被选中的标签背景和对应的div背景颜色一样，并且边框颜色一样，否则它会是白色边框*/

background-color: #6E6E6E;

border: 1px solid #6E6E6E;;

}

div.contentfirst {

/*去除从列表继承来的float浮动，这样"我是内容1"才会换行

默认前面是浮动元素，后面的元素会跟在它后面*/

clear: left;

background-color: #6E6E6E;

color: white;

width: 300px;

height: 100px;

padding: 10px;

display: none;

}

div.contentin {

display: block;

}

/*第二个标签*/

#tabsecond li {

/*让列表显示到一行上，采用浮动元素格式*/

float: left;

background-color: white;

color: blue;

padding: 5px;

margin-right: 2px;

cursor: pointer;

}

#tabsecond li.tabin {

/*设置选中标签的颜色和div融合，去掉下边框*/

background-color: #F2F6FB;

border: 1px solid black;

border-bottom: 0px;

z-index: 100;/*设置层高以覆盖内容区*/

position: relative;/*为了让z-index生效，需要设置position为relative*/

}

#contentsecond {

width: 500px;

height: 200px;

padding: 10px;

background-color: #F2F6FB;

clear: left;

border: 1px solid black;

/*设置内容区域位置为相对，向上移动一个像素*/

position: relative;

top: -1px;

}

img {

display: none;

}

tab.js

var timeoutId;

$(document).ready(function() {

// 找到所有的标签

$("#tabfirst li").each(function(index) {

// 每一个包装li的Jquery对象都会执行这个function方法，传入参数就是当前的索引值

// 有了index值，可以找出当前li所对应的div

var liNode = $(this);

liNode.mouseover(function(){

// 设置延时，防止鼠标快速滑动

timeoutId = setTimeout(function(){

// 将原来显示的内容区域进行隐藏

$("div.contentin").removeClass("contentin");

// 将对应的div显示

$("div.contentfirst").eq(index).addClass("contentin");

// 或者

// $("div.contentfirst :eq(" + index + ")").addClass("contentin");

// 将原来的li和div分离

$("#tabfirst li.tabin").removeClass("tabin");

// 将选中的li和div融合

liNode.addClass("tabin");

},200);

}).mouseout(function() {

clearTimeout(timeoutId);

});

// 页面装入完成后，标签效果2区域装入静态html内容

$("#realcontent").load("TabLoad.html");

// 找到标签2效果对应的三个标签，注册鼠标点击事件

$("#tabsecond li").each(function(index) {

$(this).click(function(){

$("#tabsecond li.tabin").removeClass("tabin");

$(this).addClass("tabin");

if (index ==0) {

// 装入静态完整页面

$("#realcontent").load("TabLoad.html");

} else if (index == 1){

// 装入动态部分页面

$("#realcontent").load("TabLoad.jsp div");

} else if (index == 2){

// 装入远程数据(也是一个动态页面输出)

$("#realcontent").load("TabData.jsp")

}

});

// 对loading图片绑定Ajax请求开始和交互结束的事件

$("#contentsecond img").bind("ajaxStart",function(){

// 清空div中的内容

$("#realcontent").html("");

// 整个页面中只要出现了ajax交互，ajax开始时就会执行

$(this).show();

}).bind("ajaxStop", function() {

//ajax交互结束时执行

$(this).hide();

});

级联下拉

chainselect.html

<html>

<head>

<title>xiala</title>

</head>

<body>

<p>数据装载中...</p>

</div>

汽车厂商：

</select>

</span>

汽车类型：

</span>

车轮类型：

</span>

</div>

</div>

</body>

</html>

chainselect.css

div.loading {

visibility: hidden;

}

p {

margin: 0;

}

div {

text-align: center;

}

div.car {

}

.cartype, .wheeltype, .carloading, .carimg {

display: none;

}

chainselect.js

$(document).ready(function() {

var carnameSelect = $(".carname").children("select");

var cartypeSelect = $(".cartype").children("select");

var wheeltypeSelect = $(".wheeltype").children("select");

var carimage = $(".carimage .carimg");

var loadingimg = $(".loading");

carnameSelect.change(function() {

var carnameValue = $(this).val();

wheeltypeSelect.parent().hide();

carimage.attr("src", "");

carimage.hide();

if (carnameValue == "") {

cartypeSelect.parent().hide();

$(this).next().hide();

} else {

cartypeSelect.parent().show();

if (!carnameSelect.data(carnameValue)) {

$.post("http://127.0.0.1:9090/chainselect/SelectChainServlet", {keyword: carnameValue, type: "top"}, function(data) {

cartypeSelect.html("");

$("<option value='' >" + "请选择汽车类型" + "</option>").appendTo(cartypeSelect)

for (var i = 0; i < data.length; i++) {

$("<option value='" + data[i] + "' >" + data[i] + "</option>").appendTo(cartypeSelect);

}

carnameSelect.data(carnameValue, data);

}, "json");

} else {

var data = carnameSelect.data(carnameValue);

cartypeSelect.html("");

$("<option value='' >" + "请选择汽车类型" + "</option>").appendTo(cartypeSelect)

for (var i = 0; i < data.length; i++) {

$("<option value='" + data[i] + "' >" + data[i] + "</option>").appendTo(cartypeSelect);

}

});

cartypeSelect.change(function() {

var cartypeValue = $(this).val();

carimage.hide();

if (cartypeValue == "") {

wheeltypeSelect.parent().hide();

carimage.attr("src", "");

$(this).next().hide();

} else {

wheeltypeSelect.parent().show();

if (!cartypeSelect.data(cartypeValue)) {

$.post("http://127.0.0.1:9090/chainselect/SelectChainServlet", {keyword: cartypeValue, type: "sub"}, function(data) {

if (data.length != 0) {

wheeltypeSelect.html("");

$("<option value='' >" + "请选择轮胎类型" + "</option>").appendTo(wheeltypeSelect)

for (var i = 0; i < data.length; i++) {

$("<option value='" + data[i] + "' >" + data[i] + "</option>").appendTo(wheeltypeSelect);

}

} else {

wheeltypeSelect.parent().hide();

}

cartypeSelect.data(cartypeValue, data);

}, "json");

} else {

var data = cartypeSelect.data(cartypeValue);

if (data.length != 0) {

wheeltypeSelect.html("");

$("<option value='' >" + "请选择轮胎类型" + "</option>").appendTo(wheeltypeSelect)

for (var i = 0; i < data.length; i++) {

$("<option value='" + data[i] + "' >" + data[i] + "</option>").appendTo(wheeltypeSelect);

}

} else {

wheeltypeSelect.parent().hide();

}

});

wheeltypeSelect.change(function() {

if ($(this).val() != "") {

$(".carloading").show();

var carimagesrc = "images/" + carnameSelect.val() + "_" + cartypeSelect.val() + "_" + wheeltypeSelect.val() + ".jpg";

var image = new Image();

$(image).attr("src", carimagesrc).load(function() {

$(".carloading").hide();

carimage.attr("src", carimagesrc).show();

});

} else {

carimage.attr("src", "");

carimage.hide();

}

});

loadingimg.ajaxStart(function() {

$(this).css("visibility", "visible");

$(this).animate({

opacity: 1

}, 0)

}).ajaxStop(function() {

//$(this).fadeOut(1000);

$(this).animate({

opacity: 0

}, 500)

});

posted @ 2020-12-16 10:12 吴克兢阅读(123) 评论(0) 收藏举报

刷新页面返回顶部

JQuery

样式的组成

JQuery配置和例子

在页面加载完成后对其中的元素注册事件

查找元素的方式：

取得和改变元素的属性(取得时不带参数，设置时带上设置的参数即可)

取出其中的html值，如：

取出文本元素的value，

设置css样式：

设置属性

animate动画效果

注册事件

鼠标点击用click

键盘放开用keyup,如

创建元素添加到另一个元素

查找子元素

通过索引找出多个元素中的一个

设置延时，用于防止鼠标快速滑动等

页面装载

控制显示和隐藏

触发事件

AJAX使用

绑定AJAX事件

JQuery插件

判断对象是否为空及类型

获取窗口宽度及滚动条长度

用户注册

JQuery可编辑的表格

菜单效果

标签页效果

tab.html

tab.css

tab.js

级联下拉

chainselect.html

chainselect.css

chainselect.js

公告