好开心,能给女王大人写一些她能用到的东西,觉得自己有点用了呢。我就借我自己总结的东西,一步步的给bia娘说说我理解的交互。对于交互,我概念很浅,我相信在我整理完jQuery +ajax的内容后,我也会对交互有一个新的概念。
bia,请听我说。
第一部分,我就以jQuery的简单应用开说,以下是我的案例。
1、jQuery选择元素
————————————————————————————————
先看这两个按钮的处理。
按钮代码如下:
<input type="button" onclick="showDiv();" style="width:120px" value="显示div"></input>
对应js如下:
function showDiv(){ $("#targetDiv").show(); }
jQuery选择元素不像传统的js要点点点点一串,jQuery只需用$("#targetDiv")即可获取。
其中①选择标签对应元素,如img,div,则$("img")获取;
②选择id对应元素,则$("#targetDiv")获取,ID前加#;
③选择css对应元素,则$(".top")获取,css类名前加点;
④想获取多种关系的,只需连着写,如获取div下id为"bia"的元素,用$("div #bia")获取,又如获取css为"top"的id为"bia"的元素,用$(".top #bia")获取。
我们获取到div,调用了jQuery提供的方法show()以显示元素,同样调用hide()以隐藏元素。
2、jQuery挂载事件
————————————————————————————————
再看两个按钮的处理。
按钮代码为<input type="button" id="but1" style="width:120px" value="显示div2"></input>
这两个按钮我并没有写onclick事件,我在js中写了事件监听以获取id元素的点击事件:
$(function() { $("#but1").click(function(){ showDiv(); }); $("#but2").click(function(){ hideDiv(); }); });
获取元素后调用click()方法即可捕捉元素的click事件,括号中写的方法,为响应函数。
这种写法用于按钮太多,监听事件处理重复,写起来也很方便。
3、jQuery改变元素html内容
————————————————————————————————
再看两个按钮的处理。
在此处,我们具体讲下如何修改元素中的html内容,响应js如下:
function changeDivContent(){ $("#targetDiv").empty(); $("#targetDiv").append(‘<img src="./image/bia2.jpg" style="width:200px;height:200px"/>‘); showDiv(); }
我们获取到div元素,首先调用empty()方法清空其中内容,在调用append()方法,将更新的html代码写进入,注意:要写成字符串形式哦~
实现起来很简单是吧~这个功能也就是ajax中常用到的响应方式,我们在后台处理后,将新的json处理成html代码,或者直接接收html代码(字符串),将局部的内容更新,以此实现局部交互。
4、jQuery修改元素样式
————————————————————————————————
再看两个按钮的处理。
我们通过jQuery直接修改元素样式,js代码如下:
function getBig(){ if($("#targetDiv").css("width") == "300px"){ alert("(●—●)再大伦家受不了了呢~"); return; } $("#targetDiv").css("width","300px"); $("#targetDiv").css("height","300px"); $("#targetDiv img").css("width","300px"); $("#targetDiv img").css("height","300px"); showDiv(); }
首先我们通过$("#targetDiv")获取元素,之后调用css()方法,$("#targetDiv").css("width")即可获取到id为“targetDiv”元素的“width”参数值。
我们也可调用css()函数直接修改属性值,如$("#targetDiv").css("width","300px")直接修改id为“targetDiv”元素的“width”参数值为“300px”。
以上是我总结的jQuery的基本操作,结合demo相信bia一定学很快哦,想想以后数钱的画面,激动的很呢~mua~