1.给搜索的结果上色
/*给匹配字上色,字体,加粗*/
var highLightColor = "red";//搜索高亮显示的颜色
var fontSize = 2;//关键字字体大小
var fontWeight = "bold"; //关键字是否加粗:norm不加粗。。。可选值:norm,bold,也可以是数字
function setFontStyle(source,matched){
var matchedAddStyle = ""+matched+""
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 = $("
动态检查是否已存在的时候调用的是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
oemTagArray[x]=oemTagVal;
}
//对数组排序
// var oemTagArraySort = oemTagArray.sort();
var singleArray = oemTagArray.del();
var checkinputSame = false;//标记是否填写有重复值
for(var y=0;y
count=0;
var randomColor = GetColor();//每个重复的值,生成一种颜色,方便辨识
for(var x=0;x
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 = $("").hide().insertAfter(thisObj);
4.jquery缓存:
//缓存
var tagSourceCache = {};//先定义一个数组变量
tagSourceCache[searchContent] = data;//给缓存添加值
if ((searchContent in tagSourceCache)) {}//调用缓存
cache={};//清除旧的缓存
5. parent()
hide()
show()
foucus()
before()--------方法在被选元素前插入指定的内容。
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 = $('');
$("body #modifyBody").before(screenBackground);
append和appendTo()作用相同,写法相反,如这两种写法作用是一样的:
$(function(){ var spanTest="Span Test"; $("#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");
//多样的查找方式,被选中
if(typeof(data) == "undefined"){
xxxxxxxxxxxxxxx
}
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()
var oemTagArray = new Array(oemTag.length);
9.原始的设置事件属性方法:
tr[0].setAttribute("onmouseout","removeColor(this)");//用firebug调试,直接这样生写了。
10:通过onfocus和onblur事件来让文本框有默认的效果
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表单校验框架=============================
第一步:
" type="text/javascript">
第二部:自己扩展校验的方法:
//必须是正整数
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》用来存放错误信息:
平台名称:
===========================================================
对div盒子加一个边框样式很简单只需要使用border板块样式即可。
边框虚线样式:dashed
边框实现样式:solid
border:1px dashed #000
代表设置对象边框宽度为1px黑色虚线边框
border:1px solid #000
代表设置对象边框宽度为1px黑色实现边框
二、对div上边加边框 - TOP
我们给div上边加1px黑色边框
- div{border-top:1px solid #000}
给div盒子底部加2px虚线红色边框
- div{border-bottom:2px dashed #F00}
给一个css选择器css命名为“.divcss5”盒子左侧加一个蓝色1px实线边框
- .divcss5{ border-left:1px solid #00F}
DIV代码:
- <div class="divcss5">此DIV盒子左侧为1px实线蓝边框div>
div对象右侧加1px红色实线边框
- div{ border-right:1px solid #F00}
给盒子上下加1px实现黑色边框
- div{border-top:1px solid #000;border-bottom:1px solid #000}
给盒子左右加2px虚线绿色边框
- div{ border-left:2px dashed #0F0;border-right:2px dashed #0F0}
给一个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是一个封装的非常好的类
//页面上为:
调用: $("#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 = $('');
instance.mywidget('publicFunction'); // work
instance.mywidget('_privateFunction'); // silently fail
instance.data('mywidget')._privateFunction(); // work
$.mynamespace.mywidget.prototype._privateFunction(); // work
this.element是变成widget的那个jQuery对象,如果要用jquery的方法,往往首先要取到jquery对象。
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 他所占据的空白地方是在边框里面,图解一下就更清楚了。
![margin和padding的区别 - email_wangyong - 建站超市](http://img.e-com-net.com/image/info8/8376efa4907b4908a1bbaeaf03b5c210.jpg)
jquery outerHeight方法 outerWidth方法
以前写代码中,每当需要获取元素的实际“宽度”(这里的宽度是指元素宽度加上其边距)时,都需要用元素宽度加上margin值才行,今天发现一个叫outerWidth(options)的方法 ,很好用。完成了原来需要用一段来操作做的工作
outerWidth(options)
获取第一个匹配元素外部宽度(默认包括补白和边框)。
此方法对可见和隐藏元素均有效。
返回值:Integer
参数:
options(Boolean) : (false) 设置为 true 时,计算边距在内。
示例:
获取第一段落外部宽度。
HTML 代码:
jQuery 代码:
var w = $("#test").outerWidth(true);
$("#test").html(w);
结果:
jQuery 事件 -delegate() 方法
delegate()方法为指定的元素(“属于被选中的子元素”)添加一个或者多个事件处理程序,并规定当这些事件发生时运行函数
使用delegate()方法的事件处理程序适用于当前或者未来的元素(如由脚本创建的新元素);
当点击鼠标时,隐藏或显示 p 元素:
$("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();
});
this.menu.delegate('li.ui-multiselect-optgroup-label a', 'click.multiselect', function(e) {
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
placeholder="输入用户昵称" required="required" maxlength="20" 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” );
}
发现在FF下可以修改并将密码输入框type 修改为 “password” 并将 value设置为空,而IE下却提示无法得到type属性,不支持该命令。 弹出 type 看看真的无法得到吗?
下面type为password的输入框
$(“#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上则没问题。真是玩死我了.
===========================================================================================
a {
color:#68bccc;
cursor:pointer;
text-decoration:none;
}
.redirection-wrap .notice-wrap {
background-color: #68bccc;
border-radius: 5px;
color: #eee;
float: right;
font-size: 16px;
padding: 15px;
position: relative;
width: 70%;
}
.redirection-wrap .notice-wrap .notice-tri {
border-color: transparent transparent #68bccc;
border-style: solid;
border-width: 10px;
height: 0;
position: absolute;
right: 1px;
top: -15px;
width: 0;
}