1.给搜索的结果上色
/*给匹配字上色，字体，加粗*/
var highLightColor = "red";//搜索高亮显示的颜色
var fontSize = 2;//关键字字体大小
var fontWeight = "bold"; //关键字是否加粗：norm不加粗。。。可选值：norm，bold,也可以是数字
function setFontStyle(source,matched){
var matchedAddStyle = "<font style='color:"+highLightColor+";size:"+fontSize+"; font-weight: "+fontWeight+"'>"+matched+"</font>"
return source.replace(matched,matchedAddStyle);
}
2.动态的在一行表格后面
复制一行
function copy(trId) {
trId = trId.parentNode.parentNode.id;//通过input,得到p,得到td.得到tr的id;
var thisTr = $("#" + trId);//找到对应的行
var clientType = $("#" + trId + " #clientType").val();//得到客户端类型
var tagType = $("#" + trId + " #tagType").val();//得到渠道类型
var vNum = $("#TbData tr").length;//表格有多少个数据行
var trId1 = "#TbData #" + trId;
var vTrClone = thisTr.clone(true);//创建第一行的副本对象vTrClone
vTrClone[0].id = "trDataRow" + vNum;//設置 第一個Id為當前獲取索引；防止重複添加多個ID為trDataRow1的數據行；一次添加一個；
thisTr.after(vTrClone);//把副本单元格对象添加到表格下方
$("#trDataRow" + vNum + " #clientType option[value='"+ clientType + "']").attr("selected", "selected");//fuck...这里写text死活选不中，必须是value才行。在tm乱写帖子的死全家
$("#trDataRow" + vNum + " #tagType option[value='" + tagType + "']")
.attr("selected", "selected");
}
新建一行：
function newtr(trId) {
trId = trId.parentNode.parentNode.id;//通过input,得到p,得到td.得到tr的id;
注意：trId.parentNode.parentNode这里获得是dom对象，如果要想用jquery操作，则必须先将这个dom对象，转化为jquery对象，
方法是添加$()------------------$(trId.parentNode.parentNode)
var thisTr = $("#" + trId);//找到对应的行
var clientType = $("#" + trId + " #clientType").val();//得到客户端类型
var tagType = $("#" + trId + " #tagType").val();//得到渠道类型
var vNum = $("#TbData tr").length;//表格有多少个数据行
var trId1 = "#TbData #" + trId;
var vTrClone = thisTr.clone(true);//创建第一行的副本对象vTrClone
vTrClone[0].id = "trDataRow" + vNum;//設置 第一個Id為當前獲取索引；防止重複添加多個ID為trDataRow1的數據行；一次添加一個；
thisTr.after(vTrClone);//把副本单元格对象添加到表格下方
//如果本行有错误，则先把错误提示div隐藏，并且错误提背景色去掉，字体变回普通
$("#trDataRow" + vNum +" #errorMsg").css("display","none");
$("#trDataRow" + vNum +" #OEMTag").css("background-color","");
$("#trDataRow" + vNum +" #OEMTag").css("color","");
$("#trDataRow" + vNum + " input[name='oemTag.oemtag']").val("");
$("#trDataRow" + vNum + " input[name='oemTag.oemtagParentName']").val("");
$("#trDataRow" + vNum + " input[name='oemTag.oemtagName']").val("");
$("#trDataRow" + vNum + " input[name='oemTag.bd']").val("");
$("#trDataRow" + vNum + " input[name='oemTag.d421']").val("");
}
//删除
function deltr(trId) {
trId = trId.parentNode.parentNode.id;//通过input,得到p,得到td.得到tr的id;
var vNum = $("#TbData tr").length + 1;//表格有多少个数据行;
if (vNum <= 1) {
alert('请至少留一行');
return;
}
var vTr = $("#" + trId);//得到父tr对象;
if (trId == "trDataRow1") {
alert('第一行不能删除!'); //第一行是克隆的基础，不能删除
return;
} else {
vTr.remove();
}
}
//自己写去除空格的函数
String.prototype.trim = function(){
// 用正则表达式将前后空格 用空字符串替代。
return this.replace(/(^\s*)|(\s*$)/g,"");
}
------------------------------------------------------------------------------
自动完成下拉框：有缓存的
//缓存
var tagSourceCache = {};
var tagNameCache = {};
function getTagSourceSuggestion(suggestionObj) {
var thisObj = $(suggestionObj);
thisObj.next("ul").hide();//先把之前的搜索结果隐藏
var searchContent = $(suggestionObj).val().trim();
var $autocomplete = $("<ul style='position: absolute;text-align:left;border: 1px solid #DADADA;z-index:1000'></ul>").hide().insertAfter(thisObj);
var url = base + "/manager/tag/getTagResourceSuggestion.feinno";
if (searchContent == "") {
return;
}
thisObj.css("background-color","");
thisObj.css("color","");
if ((searchContent in tagSourceCache)) {
var data = tagSourceCache[searchContent];
if(typeof(data) == "undefined"){
return;
}
var d = eval("(" + data + ")");//通过eval() 函数可以将JSON字符串转化为对象。这里的括号很重要
$($autocomplete).css({"left" : thisObj.position().left
});
var width = thisObj.css("width");
var height = thisObj.css("height");
var li = "<li style='background-color: white;text-align:left;width:"+width+";padding-left:5px;position: relative;height: "+height+"'></li>";
var select = 0;
$autocomplete.empty();
$.each(d, function(index, term) {
var result = term.oemtagParentName;
result = setFontStyle(result,searchContent);
$(li).html(result).appendTo($autocomplete)
.mouseover(function() {
$(this).css("background", "#CCCCCC");
thisObj.focus();
}).mouseout(function() {
$(this).css("background", "white");
}).click(function() {//把选中的值传递到页面中，供提交时使用该参数
var test = d[index];
var oemtagParentName = test.oemtagParentName;
thisObj.val(oemtagParentName);
thisObj.css("background-color","");
thisObj.css("color","");
$autocomplete.hide();
thisObj.focus();
});
});
$autocomplete.show();
}else {
$.get(url,{"searchContent" : searchContent},
function(data) {
if(typeof(data) == "undefined"){
return;
}
tagSourceCache[searchContent] = data;
var d = eval("(" + data + ")");//通过eval() 函数可以将JSON字符串转化为对象。
$($autocomplete).css(
{
"left" : thisObj.position().left
});
var width = thisObj.css("width");
width = parseInt(width) - 6;
var height = thisObj.css("height");
var li = "<li style='padding-left:5px;text-align:left;background-color: white;width:"+width+";position: relative;height: "+height+"'></li>";
var select = 0;
$autocomplete.empty();
$.each(d,function(index, term) {
var result = term.oemtagParentName;
result = setFontStyle(result,searchContent);
$(li).html(result)
.appendTo($autocomplete)
.mouseover(
function() {
$(this).css( "background", "#CCCCCC");
thisObj.focus();
})
.mouseout(
function(){
$(this).css( "background", "white");
})
.click(
function() {//把选中的值传递到页面中，供提交时使用该参数
var test = d[index];
var oemtagParentName = test.oemtagParentName;
thisObj.val(oemtagParentName);
thisObj.css("background-color","");
thisObj.css("color","");
$autocomplete.hide();
thisObj.focus();
});
});
$autocomplete.show();
});
}
}
-------------------------------------------------------------------------------------------------------------------
动态检查是否已存在的时候调用的是onKeyup事件，也就是每次有键盘输入都回去后台，检查，可是发现个问题：如果输入过快则失效，断点调试发现，是因为ajax返回有错误，所以想了个办法，用setTimeout(function(){}，1000)来延迟执行
function checkNullAndSigle(textObj){
setTimeout(
checkNull(textObj);
1000);
}
可是又有问题：调试报错：useless setTimeout call (missing quotes around argument?)，
解决，setTimeout{function(){},1000}第一函数必须是行数
function checkNullAndSigle(textObj){
setTimeout(
function(){checkNull(textObj)},
1000);
}
------------------------------------------------------------------------------------------------------------------------------------------------------
使用小工具：
//数组去重函数
Array.prototype.del = function() {
var a = {}, c = [], l = this.length;
for (var i = 0; i < l; i++) {
var b = this[i];
var d = (typeof b) + b;
if (a[d] === undefined) {
c.push(b);
a[d] = 1;
}
}
return c;
}
//生成随机样色，用来重复填写的错误提示
function GetColor() {
var r = Math.floor(Math.random() * 255).toString(16);
var g = Math.floor(Math.random() * 255).toString(16);
var b = Math.floor(Math.random() * 255).toString(16);
r = r.length == 1 ? "0" + r : r;
g = g.length == 1 ? "0" + g : g;
b = b.length == 1 ? "0" + b : b;
return "#" + r + g + b;
}
------下面是调用上面的函数，来检查页面某列填写的是否有重复，如果有则把重复的值用同一种颜色标记。
//下面检查填写的是否有重复值，二次检查
var oemTag = $("input[name='oemTag.oemtag']");
if(oemTag.length>1){//至少两列才需要判断重复
//把列表中的oemTag列封装到数组
var oemTagArray = new Array(oemTag.length);
for(var x=0;x<oemTag.length;x++){
var oemTagVal = oemTag[x].value;
oemTagArray[x]=oemTagVal;
}
//对数组排序
// var oemTagArraySort = oemTagArray.sort();
var singleArray = oemTagArray.del();
var checkinputSame = false;//标记是否填写有重复值
for(var y=0;y<singleArray.length;y++){
var singleVal = singleArray[y];
count=0;
var randomColor = GetColor();//每个重复的值，生成一种颜色，方便辨识
for(var x=0;x<oemTag.length;x++){
var oemTagVal = oemTag[x].value;
if(oemTagVal==singleVal){
count++;
if(count>=2){
$(oemTag[x]).css("background-color",randomColor);
$(oemTag[x]).css("color","red");
checkSubmit = false;//检查不通过
checkinputSame = true;//确实有重复的值
}
}
}
}
if(checkinputSame){
jQuery.messager.alert("提示",'输入的oemTag有重复值，重复值为相同的颜色！请检查并重填写！',"info");
}
}
if(checkSubmit){//二次检查
jQuery.messager.confirm('提示:','提交后无法修改，请确认后提交?',function(event){
if(event){
$("#tagForm").attr("action", base + "/manager/tag/tagAddBatch.feinno");
$("#tagForm").submit();//提交这个表单对象
}
});
}
=============================================================================
有关accordion
$(function() {
$( "#mynav" ).accordion({
autoHeight: false//自动调整高度
});
});
开始使用的时候，用这个来开发，管理系统的左侧菜单树，结果发现每个点开的高度，都是一样的，不能够自适应，后来找到了源码才发现，其实这个函数有内置参数，可以配置，如这里，添加了autoHeight:false,就可以自适应了，如果不加则自己算所有菜单中的一个最大值，让每个菜单都是这个高度。以后使用jquery，还要多读文档
=====================================================================
jquery查找元素：
1.next() ------thisObj.next("ul").hide();//先把之前的搜索结果隐藏-----------与之相邻的下一个
2.find() ------$(trObj).find("#clientType").val()//根据id或者class获取对象
3.$()----------对象话一个元素
var $autocomplete = $("<ul style='position: absolute;text-align:left;border: 1px solid #DADADA;z-index:1000'></ul>").hide().insertAfter(thisObj);
4.jquery缓存：
//缓存
var tagSourceCache = {};//先定义一个数组变量
tagSourceCache[searchContent] = data;//给缓存添加值
if ((searchContent in tagSourceCache)) {}//调用缓存
cache={};//清除旧的缓存
5. parent()
hide()
show()
foucus()
before()--------方法在被选元素前插入指定的内容。
紧跟着
after()方法在被选元素后插入指定的内容。紧跟着
thisTr.after(vTrClone);//把副本单元格对象添加到表格下方
appendTo() -----------------方法在被选元素的结尾（仍然在内部）插入指定内容。
html()
bind()
toggle()
siblings()-----------找到所有兄弟元素
remove()
attr();
css();
submit()
removeClass();------------移除样式
addClass()------------添加样式
removeAttr()-----------移除事件
append() --------------- 方法在被选元素的结尾（仍然在内部）插入指定内容。
statusImgDiv.removeClass("u114_normal");//指定名称这删除对应的，如果不指定则删除全部
statusImgDiv.addClass("u116_normal");
statusImgDiv.removeAttr("onclick");
var screenBackground = $('<div class="beforeTable" id="beforeTable" style="width:'+width+'; height:'+height+'"></div>');
$("body #modifyBody").before(screenBackground);
append和appendTo()作用相同，写法相反，如这两种写法作用是一样的：
$(function(){ var spanTest="<span>Span Test</span>"; $("#one").append($(spanTest)); $(spanTest).appendTo($("#one")); });
$("#modifyBody table").append(tr).show();
$("#beforeTable").remove();
$("#tagForm").attr("action",base + "/manager/tag/tagAddBatch.feinno");
$("#tagForm").submit();
eo.parent(".selectoption")//parent还可以直接找元素《=》eo.parent().find(".selectoption")
//点击其余的任何区域都把所有的下拉框收起隐藏掉
$(document).click(
function(event){
var eo=$(event.target);//获得鼠标点击对应的对象。target
if($(".select_box").is(":visible")&&
eo.attr("class")!="selectoption" &&
!eo.parent(".selectoption").length)
$('.selectoption').hide();
}
);
$(this).parent().siblings().find(".selectoption").hide();
$(this).find(".selectoption").toggle();
$(li).html(result)
.appendTo($autocomplete)
.mouseover(
function() {$(this).css( "background", "#CCCCCC");
thisObj.focus();
})
.mouseout(function(){$(this).css( "background", "white");})
.click(function() {//把选中的值传递到页面中，供提交时使用该参数
var test = d[index];
var oemtagParentName = test.oemtagParentName;
thisObj.val(oemtagParentName);
thisObj.css("background-color","");
thisObj.css("color","");
$autocomplete.hide();
thisObj.focus();
});
$("#sumitform").bind("click",function(){
// alert('1');
}
var allErrorMsg = $("#TbData [name='errorMsg']");//根据name查找
var oemTag = $("input[name='oemTag.oemtag']");//多样的查找方式
$("#trDataRow" + vNum + " #clientType option[value='"+ clientType + "']").attr("selected", "selected");
//多样的查找方式，被选中
6：判断undefined
if(typeof(data) == "undefined"){
xxxxxxxxxxxxxxx
}
7.获取左右边距顶部：用到position()
var left = thisObj.position().left;
var right = thisObj.postion().right();
var top = $(tr).offset().top;
获取对象本身的宽度和高度
thisObj.css("width");thisObj.width();//用这个，不用前面的
thisObj.css("height");thisObj.height()
8.新建数组：
var oemTagArray = new Array(oemTag.length);
9.原始的设置事件属性方法：
tr[0].setAttribute("onmouseout","removeColor(this)");//用firebug调试，直接这样生写了。
10：通过onfocus和onblur事件来让文本框有默认的效果
<input type="text" value="${empty requestScope.searchContent?'输入查找的名称':requestScope.searchContent}"
id="search-text"
class="searchTextClass"
οnfοcus="if(value == defaultValue){value='';this.style.color='#000'}"
οnblur="if(!value){value = defaultValue;this.style.color='#999'}" />
11.checkbox被选中个数：
var checkBoxNumber = $('input:checked').length;
12.$.each(data,function(index,term){//用法
data如果为json对象，则term为对象本身，可以直接.属性
index为数据的下标。从0开始
term为数据本身。是对象
})
也可以这样用：
集合数据.each(function(){
})
13.
var tdInputs = moduleDiv.find("[name='ItemContentTable']").find(".itemClass1 input:visible");//这里是一个集合，遍历这个集合包括隐藏的，下面把隐藏的去掉
find(".itemClass1 input:visible")//查找class下input为可见的对象
14。jquery获取选中的checkbox值
$("input[name='test']:checked")//是一个对象集合
$("input[name='test']:checked").each(function(){//each电话也可以这样用
var checkBoxVal = $(this).val();//获取值
});
function jqchk(){ //jquery获取复选框值
var chk_value =[];
$('input[name="test"]:checked').each(function(){
chk_value.push($(this).val()); //数组操作添加用push()
});
alert(chk_value.length==0 ?'你还没有选择任何内容！':chk_value);
}
15.默认选中
$("#dayDangwei")[0].selectedIndex = 5;//默认选中---下标中0开始
判断是否隐藏：
var hidden = $("#dayDangwei").find("option[value='%'] :hidden");
if(hidden){
$("#dayDangwei").find("option[value='%']").show();
}
今天遇到个不爽的问题：
jquery 的remove(“onclick”)失效：fuck
jquery也有不靠谱的时候：
解决办法：
var statusImgDiv = $(tr).find("td #statusImg");
statusImgDiv[0].onclick = function (){};
================================jquery表单校验框架=============================
第一步：
<script src="<c:url value="/manager/jsp/user/js/jquery.validate.js"/>" type="text/javascript"></script>
第二部：自己扩展校验的方法：
//必须是正整数
jQuery.validator.addMethod("mustNumber", function(value, element) {
var chrnum = /^[0-9]*[1-9][0-9]*$/;
return this.optional(element) || (chrnum.test(value));
},"必须是正整数");
//必须为2-10之间的数字
jQuery.validator.addMethod("mustOneToTenNumber", function(value, element) {
if(!isNaN(value)){
if(value>=2&&value<=10&&value.length<=2){//防止输入0123
return true;
}
}else{
return false;
}
}, "必须为2-10之间的数字");
第三部：定义validator变量，主要是准备参数：
var validator = $("#signupform").validate({-----signupform表单id
rules: {
platform: {----platform表单字段
required: true
},
suffixLen:{
required: true,
mustOneToTenNumber: true
},
ftpPort:{
required: true,
mustNumber:true,
},
},
messages:{
// departmentName: "请输入job名称",
},
submitHandler:function(form){
form.submit();
}
});
第四部：给表单注册校验信息：
$('#btn_submit').click(function(){
var iden = validator.form();
if(iden == false){
$("#xtip").css('display', 'block');
$("#xtip").css('color', 'red');
$("#xtip").html('请将平台资料填写正确');
}else{
$("#xtip").css('display', 'none');
}
});
第五部：页面写法：每个空间后面都有一个《label》用来存放错误信息：
<p>
<span class="info-label">平台名称：</span>
<span class="info-content">
<input type="text" id="platform" name="platform"/><label id="platform"> </label>
</span>
</p>
<p>
<span class="info-label">文件序号长度：</span>
<span class="info-content">
<input type="text" id="suffixLen" name="suffixLen"><label id="suffixLen"> </label>
</span>
</p>
===========================================================
如何给div加一个边框border样式
对div盒子加一个边框样式很简单只需要使用border板块样式即可。
一、虚线与实线边框 - TOP
边框虚线样式：dashed
边框实现样式：solid
border:1px dashed #000
代表设置对象边框宽度为1px黑色虚线边框
border:1px solid #000
代表设置对象边框宽度为1px黑色实现边框
二、对div上边加边框 - TOP
我们给div上边加1px黑色边框
- div{border-top:1px solid #000}
三、给div底部加边框 - TOP
给div盒子底部加2px虚线红色边框
- div{border-bottom:2px dashed #F00}
四、在div盒子左侧加边框 - TOP
给一个css选择器css命名为“.divcss5”盒子左侧加一个蓝色1px实线边框
- .divcss5{ border-left:1px solid #00F}
DIV代码：
- <div class="divcss5">此DIV盒子左侧为1px实线蓝边框</div>
五、在盒子div右侧加边框 - TOP
div对象右侧加1px红色实线边框
- div{ border-right:1px solid #F00}
六、在盒子上下加边框 - TOP
给盒子上下加1px实现黑色边框
- div{border-top:1px solid #000;border-bottom:1px solid #000}
七、给div盒子左右加边框 - TOP
给盒子左右加2px虚线绿色边框
- div{ border-left:2px dashed #0F0;border-right:2px dashed #0F0}
八、给div四边加上一个边框 - TOP
给一个DIV四边加上3px实现黑色边框
- div{ border:3px solid #000}
以上是如何给一个div加边框，各种加边框样式方法教程。根据需要对选择器进行重新命名，即可使用class或id在html的div引入调用，灵活运用并掌握对一个对象加边框样式方法。
========================
jquery全选checkbox:
//把某个div下的所有type=checkbox全选
function checkAll(divId){
$("#"+divId +" ul li").find("input[type='checkbox']").each(function(){
$(this).attr("checked",true);
});
}
=========================
给div加个周边的凸起阴影效果用样式：
box-shadow:1px 1px 4px #000000;
======================jquery高级部分=====================
首先明确提出一点：大脑中要时刻记着jQuery是一个封装的非常好的类
jquery为开发插件提供了两个方法：
jQuery.extend(object);//为jquery类本身，为类添加方法
jQuery.fn.extend(object);//给jquery对象添加方法
fn是什么东西，查看jquey代码，不难发现：
jQuery.fn = jQuery.prototype={
init:function(selector,context){
}
}
jQuery.extend(object);为类添加静态方法：
$.extend({
add:function(a,b){return a+b;},
plus:function(a,b){return a-b}
});
引用的时候：$.add(3,4);
jQuery.fn.extend(object);对jQuery.prototype进行扩展，是为类添加成员方法，jQuery类的实例可以使用这个成员函数
如：
$.fn.extend({
alertTextWhileClick:function(){
$(this).click(function(){
alert(this.val());
});
}
}):
调用：
<input type ="text" id='textId'>
$("#input1").alertTextWhileClick();
//页面上为：<input id="input1" type="text"/>
调用： $("#input1").alertWhileClick();
jqueryUI的插件（widget）
使用jQueryUI的widget来写插件，相比基本的jQuery插件有一些好处：
1.方便实现继承，代码重用
2.默认是单例
3.widget已经给你实现好一些常用方法：例如destory
基础知识：
命名规范：public private this ,this.element
开发模板：
(function($){
function foo(){}
$.widget("命名空间.插件名"，{
optins{aaa:bbb},
_create:function(){},
_init:function(){}
})
})(jQuery);
注意点：
1.一般来说工具函数写在widget外面比较合适，如果想要这些函数工具被子类继承，则写在里面。
2.写在widget里面的，有public和private之分，规则是：public方法首字符不是_,private方法首字符是_
如果我非要在外面调用private方法，该怎么做？并非一点办法也没有：
var instance = $('<div>');
instance.mywidget('publicFunction'); // work
instance.mywidget('_privateFunction'); // silently fail
instance.data('mywidget')._privateFunction(); // work
$.mynamespace.mywidget.prototype._privateFunction(); // work
this.options是插件的选项
this.__proto__包含了插件中定义的所有public和private函数，以及继承过来的方法。
这里简单介绍一下__proto__：每个对象都会在其内部初始化一个属性，就是__proto__，当我们访问一个对象的属性 时，如果这个对象内部不存在这个属性，那么他就会去__proto__里找这个属性，这个__proto__又会有自己的__proto__，于是就这样 一直找下去，也就是我们平时所说的原型链的概念。
_create _init destroy
widget factory实现了一种单例模式，即不允许在同一个jQuery对象上多次实例化。
当调用$(XX).widgetName()进行初始化的时候，会执行 以下代码（源码截取自jquery.ui.widget.js）：
需要注意的是，destroy方法在jquery.ui.widget.js中是有默认实现的，而_create和_init没有实现。因此 如果用自己的方法覆盖destroy，不要忘记调用默认的：
以下示例代码验证_create和_init的区别以及destroy的作用：
var mw = $('#test').myWidget(); // _create _init
mw = $('#test').myWidget(); // _init
mw.myWidget('destory');
mw = $('#test').myWidget(); // _create _init
那么在_create和_init以及destroy里分别应该做什么：
_create: 生成HTML，事件绑定。
_init: 执行默认的初始化动作，例如把页面变成初始状态。
destory: 调用$.Widget.prototype.destroy.call(this)，删除HTML。
注意：绑定事件要注意给事件名加命名空间后缀：例如 .bind('mouseenter.mywidget', this._hover)
下面是原文地址：http://www.cnblogs.com/dc10101/archive/2012/05/03/2481004.html
说了这么多，其实有个非常好的例子：jquery.multiselect.js,他是jquery的一个选择插件
看看的源码就完全知道了，就是照着这模板写的
而且我对这么插件做了很多的修改：下面是对修改后的效果
我已经把修改后的插件上传到资源中
下面是自己的一些笔记：
今天看到个属性，给边框加圆角：
border-radius: 5px;
而且有更仔细的划分：
border-bottom-right-radius:4px; 底部右方（右下角）
border-bottom-left-radius:4px;左小角
border-top-right-radius:4px;右上角
border-top-left-radius:4px;左上角
padding的一个问题：无论怎么调里面ul的margin,总是和外面的div留着一块空白：最后找到原因：其实应该是调节外面div的padding,如果不写浏览器渲染的时候会给一个默认值，如果想占满，必须要主动把padding设置为0才行。下面看效果
其实关于margin和padding一直疑惑，这里有一篇比较好的文章：
http://blog.163.com/email_wangyong/blog/static/126152455200972431013536/
margin和padding的区别
margin 外边距
border 边框
padding 内边距
也就是说 设置margin 那么他所占据的空白地方会是在边框外面
设置padding 他所占据的空白地方是在边框里面，图解一下就更清楚了。
jquery outerHeight方法 outerWidth方法
获取第一个匹配元素外部宽度（默认包括补白和边框）。
此方法对可见和隐藏元素均有效。
返回值：Integer
参数：
options(Boolean) : (false) 设置为 true 时，计算边距在内。
示例：
获取第一段落外部宽度。
HTML 代码:
<div>
<div id="test" style="width:80px;margin:10px;"></div>
</div>
jQuery 代码:
var w = $("#test").outerWidth(true);
$("#test").html(w);
结果:
jQuery 事件 -delegate() 方法
$("div").delegate("button","click",function(){
$("p").slideToggle();
});
语法
$(selector).delegate(childSelector,event,data,function)
this.header.delegate('a', 'click.multiselect', function(e) {
if($(this).hasClass('ui-multiselect-close')) {
self.close();
} else {
self[$(this).hasClass('ui-multiselect-all') ? 'checkAll' : 'uncheckAll']();
}
e.preventDefault();
});
e.preventDefault();
var $this = $(this);
var $inputs = $this.parent().nextUntil('li.ui-multiselect-optgroup-label').find('input:visible:not(:disabled)');
var nodes = $inputs.get();
var label = $this.parent().text();
var o = this.options;
// trigger event and bail if the return is false
if(self._trigger('beforeoptgrouptoggle', e, { inputs:nodes, label:label }) === false) {
return;
}
// toggle inputs
self._toggleChecked(
$inputs.filter(':checked').length !== $inputs.length,
$inputs
);
self._trigger('optgrouptoggle', e, {
inputs: nodes,
label: label,
checked: nodes[0].checked
});
})
this.button.removeClass（”xxxxxxxxxx“）
this.button.hasClass("xxxxxxxxxxxxxxxx')
this.button.addClass("xxxxxxxxxxxxxx")
================jquery不能修改input的type类型===================================
需要实现的效果：
一个输入框，当输入框未获得焦点的时候，value 值为 “密码”；
当输入框失去焦点的时候，输入内容显示为”*****”
最简单的办法:用html5的属性placeholder
<input type="text" id="nickName" name="nickName" class="input1" placeholder="输入用户昵称" required="required" maxlength="20" value="">
但是今天调试发现，在手机上打开，发现文本不能居中，所有就另外找办法，接着就有了下面的折腾。
<input name=”password” type=”text” id=”showPwd” tabindex=”2″ class=”input” value=”密码” />
我们很直接会想到下面的js
$(“#showPwd”).focus(function(){
$(this).attr(‘type','password');//报错
});
发现并没有实现预期效果，出现 uncaught exception type property can't be changed 错误，查看jQuery 1.42源码 1488 行
// We can't allow the type property to be changed (since it causes problems in IE)
if ( name === “type” && rtype.test( elem.nodeName ) && elem.parentNode ) {
jQuery.error( “type property can't be changed” );
}
下面type为password的输入框
<input name=”password” type=”password” id=”password” class=”input” style=”display: none;” />
$(“#showPwd”).focus(function() {
var text_value = $(this).val();
if (text_value == this.defaultValue) {
$(“#showPwd”).hide();
$(“#password”).show().focus();
}
});
$(“#password”).blur(function() {
var text_value = $(this).val();
if (text_value == “”) {
$(“#showPwd”).show();
$(“#password”).hide();
}
});
最终效果： 当输入框获得焦点的时，输入的内容显示为“****”；当失去焦点的时，内容为空时显示“密码”。
最后发现对于不能文字居中的问题，我们测试使用的是安卓，如果放在iphone上则没问题。真是玩死我了.
===========================================================================================
673
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
