关闭

jquery

202人阅读 评论(0) 收藏 举报

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)"/>

012struts1标签

<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、日期控件

<script type="text/javascript"src="<%=request.getContextPath()%>/My97DatePicker/WdatePicker.js"></script>

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">

<table border="0"cellpadding="0" cellspacing="0" width="257px"height="54px" class="RackBGc">

<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>

<td width="50px"class="rackNumberTitle" style="padding-left:5px"align="center">

<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、onloadonunload事件

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、获取下拉列表被选中的值

<select id="city">

                 <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、jQueryinput操作

(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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场