jquery

来源：互联网发布：短信轰炸机软件编辑：程序博客网时间：2024/06/05 14:42

016、超链接删除确认提示

<aonclick="javascript:if(!confirm('您确定要删除吗？')) { return false; }" href="deleteActivityInfo.do?infoId=${list.hnInfoId}"style="text-decoration: none">删除</a>

015、隐藏字符

<spanstyle="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100px;margin-left:-10px;" title="${row.cmname }">${row.cmname }</span>

014、移除input的readonly属性

<inputtype="text" id="currentLocation"readonly="readonly">

document.getElementById("currentLocation").removeAttribute("readOnly");

013、图片按钮返回

<img id="btn_puball"style="cursor:hand" width="115px" height="35px"src="image/returna.jpg"

onMouseOver="changeImage('btn_puball','image/returnb.jpg')"

onMouseOut="changeImage('btn_puball','image/returna.jpg')"

onclick="javascript:history.back(-1)"/>

012、struts1标签

<html:formaction="/daYouCommodity">

<bean:define id="actForm"name="commodityForm" type="com.csctek.manage.vo.ITMCommodityForm"/>

（1）<nested:empty property="name">暂无数据</nested:empty>

<nested:notEmptyproperty="name">

<nested:writeproperty="name"/>

</nested:notEmpty>

（2）<nested:equal value=""property="name">暂无数据</nested:equal>

<nested:notEqual value=""property="name">

<nested:writeproperty="name"/>

</nested:notEqual>

（3）功能相同

<nested:write property='cmId'/>

<bean:write name="actForm"property="cmId" />

</html:form>

011、日期控件

onfocus="WdatePicker({readOnly:true,dateFmt:'yyyy-MM-ddHH:mm:ss',minDate:'<%=new SimpleDateFormat("yyyy-MM-ddHH:mm:ss").format(new Date()) %>'})"

010、非空相等判断

<nested:notEmptyproperty="is_Sr_Name">

<nested:equalvalue="${actForm.sr_Id}" property="is_Sr_Id">

<tr>

<td onclick="selectCommBySrId('<nested:writeproperty="is_Sr_Id"/>')" id="<nested:writeproperty="is_Sr_Id"/>" width="141px"align="center" class="rackTitle" >

<nested:writeproperty="is_Sr_Name"/>

</td>

<nested:writeproperty="roomCount"/>

</td>

</tr>

</table>

</nested:equal>

<nested:notEqualvalue="${actForm.sr_Id}" property="is_Sr_Id">

<tableonMouseOver="changeRackBG('in',$(this))"onMouseOut="changeRackBG('out',$(this))" border="0"cellpadding="0" cellspacing="0" width="257px"height="54px" class="RackBG">

<tr>

<tdonclick="selectCommBySrId('<nested:writeproperty="is_Sr_Id"/>')" id="<nested:writeproperty="is_Sr_Id"/>" width="141px"align="center" class="rackTitle" >

<nested:write property="is_Sr_Name"/>

</td>

</tr>

</table>

</nested:notEqual>

</nested:notEmpty>

009、禁用input输入框

disabled="disabled" 值true、false、disabled

008、弹窗isAlert(“确认删除吗?”);

007、获取路径

${pageContext.request.contextPath}

006、鼠标移动图片切换

function changeImage(id,path){

document.getElementById(id).src=path;

}

<img id="btn_export" onMouseOver="changeImage('btn_export','image/daochu_b.png')"

onMouseOut="changeImage('btn_export','image/daochu_a.png')" src="image/daochu_a.png" />

005、jsp初始化调用后台action

function selectHotel(){

window.location.href='/ISA-ITravelServ/searchMap.do?cmd=queryInit&cmType=1005';

}

selectHotel();

004、修改HTML内容

document.getElementById(id).innerHTML=newHTML

003、修改HTML 属性

document.getElementById(id).attribute=newvalue

002、修改HTML 样式

document.getElementById(id).style.property=newstyle

001、onload、onunload事件

onload 和 onunload 事件会在用户进入或离开页面时被触发；

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本；

onload 和 onunload 事件可用于处理 cookie。

实例 <bodyonload="checkCookies()">

jQuery

030、动态创建一个div元素，并将它追加到 body元素中。

$("<div><p>Hello</p></div>").appendTo("body");

$("<inputtype='checkbox'/>").appendTo(".p2");

029、描述:设置页面背景色。

jQuery 代码:$(document.body).css("background", "black" );

028、获取下拉列表被选中的值

<c:forEach items="${listCitys}"var="city">

<optionvalue="${city.id}">${city.name}</option>

</c:forEach>

</select>

$("#city").change(function(){

alert("当前" + $("#cityoption:selected").text() + " 没有区域信息!");

});

027、ztree左菜单（一）

//后台获取数据

public void graphical() throws IOException {

List<Graphical> graphicals =graphicalService.getGraphicals();

JSONArray jsonArray =JSONArray.fromObject(graphicals);

HttpServletResponse response =ServletActionContext.getResponse();

response.setCharacterEncoding("utf-8");

response.getWriter().write(jsonArray.toString());

}

//前台展示数据

var graphicals;

$.ajax({

type:"POST",

url:"graphical",

async: false,

data:{"time":new Date()},

success:function(msg){

graphicals = JSON.parse(msg);

}

});

var zNodes =[];

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

zNodes[i]={"id":graphicals[i].id,"pId":graphicals[i].pId,"name":graphicals[i].graphicalName};

}

$(document).ready(function(){

$.fn.zTree.init($("#treeDemo"),setting,zNodes);

});

ztree左菜单（二）

var setting = {

async:{

enable: true,

url: "graphical",

type:"post"

}

view: {

dblClickExpand: true//双击展开子节点

}

data: {

key: {name: "graphicalName"}

}

};

$(document).ready(function(){

$.fn.zTree.init($("#treeMenu"),setting);

});

026、jQuery表格换色

var trLength =$("#enterpriseTabInfo").find("tr").length;

//遍历表单信息从第二行开始

for(var i = 1;i < trLength;i++){

if(i%2==1){

$("#enterpriseTabInfo").find("tr")[i].className= "one";

} else {

$("#enterpriseTabInfo").find("tr")[i].className= "two";

}

//给每一行对象都添加两个事件

$("#enterpriseTabInfo").find("tr")[i].onmouseover= function(){

name = this.className;

this.className = "over";

};

$("#enterpriseTabInfo").find("tr")[i].onmouseout= function(){

this.className = name;

};

}

/*预定义样式*/

.one {background-color: #fff000;}

.two {background-color: #75f094;}

.over {background-color: red;}

025、jQuery对input操作

（1）添加:$("#student")[0].value = "学生";

（2）清空:$("#student").val("");

（3）删除:$("#student").remove();

（4）隐藏：$("#student").hide();

（5）显示：$("#student").show();

（7）获取select被选中项的文本: var item =$("select[@name=items] option[@selected]").text();

024、jQuery hide() 和show() 方法来隐藏和显示 HTML 元素；

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒；

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

023、jQuery stop()方法用于停止动画或效果，在它们完成之前;

stop()方法适用于所有jQuery效果函数，包括滑动、淡入淡出和自定义动画;

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是false，即仅停止活动的动画，允许任何排入队列的动画向后执行;

可选的 goToEnd 参数规定是否立即完成当前动画。默认是false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

典型的语法:当动画 100% 完成后，即调用 Callback 函数;

$(selector).hide(speed,callback)

callback 参数是一个在 hide 操作完成后被执行的函数。

022、jQuery toggle()方法来切换hide()和show()方法；

$(selector).toggle(speed,callback);

可选的speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒；

可选的callback 参数是 toggle() 方法完成后所执行的函数名称。

021、jQuery fadeIn()用于淡入已隐藏的元素；

$(selector).fadeIn(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒；

可选的 callback 参数是 fading 完成后所执行的函数名称。

020、jQuery fadeOut()方法用于淡出可见元素；

$(selector).fadeOut(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒；

可选的 callback 参数是 fading 完成后所执行的函数名称。

019、jQuery fadeToggle()方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换；

如果元素已淡出，则 fadeToggle()会向元素添加淡入效果；

如果元素已淡入，则 fadeToggle()会向元素添加淡出效果。

018、$(selector).fadeToggle(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒；

可选的 callback 参数是 fading 完成后所执行的函数名称。

017、jQuery fadeTo()方法允许渐变为给定的不透明度（值介于 0 与 1 之间）；

$(selector).fadeTo(speed,opacity,callback);

必需的speed参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒;

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）;

可选的 callback 参数是该函数完成后所执行的函数名称。

016、jQuery slideDown()方法用于向下滑动元素;

$(selector).slideDown(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒;

可选的 callback 参数是滑动完成后所执行的函数名称。

015、jQuery slideUp()方法用于向上滑动元素;

$(selector).slideUp(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒;

可选的 callback 参数是滑动完成后所执行的函数名称。

014、jQuery slideToggle()方法可以在 slideDown() 与 slideUp() 方法之间进行切换;

如果元素向下滑动，则slideToggle() 可向上滑动它们;

如果元素向上滑动，则slideToggle() 可向下滑动它们;

$(selector).slideToggle(speed,callback);

可选的speed参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒;

可选的callback参数是滑动完成后所执行的函数名称。

013、jQuery animate()方法用于创建自定义动画;

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性;

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒;

可选的 callback 参数是动画完成后所执行的函数名称;

提示：默认地，所有 HTML 元素都有一个静态位置，且无法移动;

如需对位置进行操作，要记得首先把元素的CSS position 属性设置为 relative、fixed 或 absolute！

012、获得/设置内容 - text()、html()以及val();

text() -设置或返回所选元素的文本内容;

html() -设置或返回所选元素的内容（包括 HTML标记）;

val() -设置或返回表单字段的值

011、jQuery添加新元素/内容;

append() - 在被选元素的结尾插入内容;

prepend() - 在被选元素的开头插入内容;

after() - 在被选元素之后插入内容;

before() - 在被选元素之前插入内容

010、jQuery删除HTML元素;

remove() - 删除被选元素（及其子元素）;

empty() - 从被选元素中删除子元素。

009、jQuery操作CSS样式

addClass() - 向被选元素添加一个或多个类;

removeClass() - 从被选元素删除一个或多个类;

toggleClass() - 对被选元素进行添加/删除类的切换操作;

css() - 设置或返回样式属性。

008、jQuery处理元素和浏览器窗口的尺寸

width() height() innerWidth() innerHeight() outerWidth() outerHeight() jQuery width() height()等方法;

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）;

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

007、JSON转换为JavaScript对象

JavaScript使用eval() 函数，用JSON数据来生成原生的 JavaScript 对象。

006、$("a").css("background-color","green");等同于$("[href]").css("background-color","red");

005、$("div#intro.head").css("background-color","green");

注解：id="intro"的<div> 元素中的所有 class="head" 的元素;

div#intro与 .head之间必须有空格！！（必须）

004、手机号码正则表达式

var idRegex= /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;

if(!idRegex.test(mobile)){

$('#js_3_EEE').text("手机号不合法");

return;

}

003、事件绑定

$(function(){

$(".head").click(function(){

varflag=$(".content").is(":hidden");

if(flag){

$(".content").show();

}else {

$(".content").hide();

}

});

//bind:为某jQuery绑定click事件(等同于上)

//移除事件:使用unbind 移除事件

$("#bj").unbind("click");

$(".head").bind("click",function(){

//判断class的内容是否隐藏

varflag=$(".content").is(":hidden");

if(flag){//显示

$(".content").show();

}else {//隐藏

$(".content").hide();

}

});

$(".head").mouseover(function(){

$(".content").show();

}).mouseout(function(){

$(".content").hide();

});

$(".head").hover(function(){//模拟光标悬停事件

$(".content").show();

},function(){

$(".content").hide();

});

002、获取鼠标坐标值

$(function(){

$("body").mouseover(function(obj){

$("#myDiv").text("x:"+ obj.pageX+",y:" + obj.pageY);

});

one():只为某一个元素添加一次事件,事件函数响应后,将不再被触发响应.

$("#rl").one("click",function(){alert("小超人!");});

$(".content").toggle(); // 可以切换元素的可见性.

$(".content").slideToggle(); // 通过高度变化来切换匹配元素的可见性.

$(".content").fadeToggle(); // 通过透明度来切换元素的可见性.

$(".content").fadeTo("slow",0.5); // 把不透明度以渐近的方式调整到指定的值.

001、标题字符过多时隐藏

<spanstyle="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:400px;margin-left:0px;" title="${notice.articletitle}">${notice.articletitle}</span>

0 0