jquery备忘学习笔记

$.map(array,fn);

对数组array中的每一个元素调用fn函数逐个进行处理，fn函数将处理返回，最后得到一个新的数组。

var array = {1,2,3};

var array2 = $.map(array,function(item){return item*2;});

注意点：$.map();不能处理Dictionary风格的数组。

$.each(array,fn);

对数组array每个元素调用fn函数进行处理，没有返回值。

var array = {"tom":"汤姆","jack":"杰克"};

$.each(array,function(key,value){alert(key+"中文名是:"+value);});

注意点：

函数2个参数，是键值对

1个参数，是键(索引值0,1,2...) $.each(array,function(item){alert(item);});

0个参数，是值 $.each(array,function(){alert(this);});

普通数组土建使用无参，用Dictionary风格的使用key和value（键值对）

jquery对象和Dom对象：

jquery对象就是通过jquery包装DOM对象后产生的对象。

alert($("#div").html()); DOM对象要想通过jquery进行操作，要首先转换为jquery对象

无参数取值，有参数赋值

$("#div").css("background","red");

$("#div").text();

$("#div").val();

$("#div").val(new Date());

$("#div").html();

$("#div").html("<font color='red'>Hello</font>");

jquery选择器：

$(function(){

$("#btn").click(function(){ //#是getElementById

$("p").html("我们都是P标签！"); //getElementByTagName

});

CSS选择器：同时选择拥有样式的多个元素

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

alert($(this).text());

});

多条件选择器：

$("p,div,span.menuItem");同时选择p标签，div标签和拥有menuItem样式的span标签元素

注意：选择器表达式中的空格不能多也不能少

层次选择器：

$("div li"); 获取div下的所有li元素（包括前套下的子嵌套）

$("div > li"); 获取div下的直接li子元素标记之间有空格

$(".menuItem + div");获取样式名为menuItem之后的第一个div元素

$(".menuItem ~ div ");获取样式名为menuItem之后的所有div元素

判断对象是否存在，jquery选择器返回的是一个对象数组，调用text(),html(),click()之类方法的时候其实是对数组

中每个元素迭代调用每个方法，因此即使通过id选择的元素不存在也不会报错，如果需要判断指定的id是否存在，如

下：

if($("#btn").length<=0){

alert("id为btn的元素不存在！");

}

节点的遍历：

next()方法用于获取节点之后的紧挨着的第一个同辈元素

$(".menuItem").next("div");

nextAll()方法用于获取节点之后的所有同辈元素

$(".menuItem").nextAll("div");

siblings()方法用于获取所有同辈（兄弟）元素

$(".menuItem").siblings("li");

一系列div标记，当点击一个div时，其后面所有的div背景颜色变红色显示

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

$.each($(this).nextAll("div"),function(){

$(this).css("background","red");

});

高亮选择：

$(this).css("background","red");

$(this).siblings("div").css("background","white");

更简便的写法

$(this).css("background","red").siblings("div").css("background","white");

一个评分控件实现：

<tr>

</tr>

</table>

$("#ratings td").html("<img src='images/empty.png'/>").onmouseover(function(){

$("#ratings td").html("<img src='images/fill.png'/>");

$(this).nextAll().html("<img src='images/empty.png'/>");

另一种写法：

$(this).html("<img src='images/fill.png'/>");

$(this).siblings().html("<img src='images/fill.png'/>");

高亮选中项：给所有的menuItem样式的元素添加Click监听事件，当click时，向被点击的元素添加这个highlight样式

，然后从其兄弟节点中移除highlight风格。

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

$(this).addClass("highlight").siblings().removeClass("highlight");;

一些基本的过滤器：

:first 选取第一个元素 $("div:first") 选择第一个div

:last 选取最后一个元素 $("div:last") 选择最后一个div

:not 选择不满足“选择器”条件的元素 $("input:not(.myClass)") 选择样式名不是myClass的input

:even(奇数) :odd（偶数）

:eq(索引序号) :gt(索引序号) :lt(索引序号)

选取索引序号等于、大于、小于索引序号的元素，比如$("input:lt(5)")选取索引号小于5的input

$(":header")选取所有的h1...h6元素

$("div:animated")选取正在执行动画的div元素

<div>

<ul>

</ul>

</div>

<div>

<ul>

</ul>

</div>

$("#div1").click(function(){

$("ul",$(this)).css("background","red");

属性过滤选择器

$("div[id]") 选择有id属性的<div>

$("div[title=test]")

$("div[title!=test]")

表单对象选择器：(注意没有空格)

$("#form1:enabled")选择id为form1的表单内所有启用的元素

$("#form1:disabled")

$("input:checked") Radio、CheckBox中选中元素

$("select:selected") 下拉列表中所有选择的元素

<input type="checkbox" name="names" value="tom"/>tom

<input type="checkbox" name="names" value="jack"/>jack

<input type="checkbox" name="names" value="jim"/>jim

$("input[name=names]").click(function(){

var names = $("input[name=names]:checked");

var arr = new Array();

names.each(function(key,value){arr[key]=$(value).val();});

$("#msg").text("共选中:"+names.length+"条数据:"+arr.join(','));

$(":input") 获取所有的<input>、<textarea>、<select>、<button>元素

$(":text") 选取所有单行文本框

$(":password")选取所有密码框

$(":radio")

$(":checkbox")

$(":submit")

$(":image")

$(":button")

$(":file")

$(":hidden")

$("a:first").attr("href"); //获取href属性

$("a:first").attr("href","http://www.baidu.com"); //设置href属性

使用removeAttr删除属性

$("div:first").append($("<a href='www.baidu.com'>百度</a>"));

append 追加在后面

prepend 追加在前面

before

after

var data = ["百度":"http://www.baidu.com","新浪":"http://www.sina.com"];

$.each(data,function(key,value){

var tr = $("<tr><td>"+key+"</td><td><a href="+value+">"+key+"</a></td></tr>");

$("#tableSite").append(tr);

</select>

$("#moveToRight").click(function(){

var items = $("#select1 option:selected").remove();

$("#select2").append(items);

var v1 = parseInt(val,10); //转换十进制数字

var intervalId;

var leftSecond = 10;

$(function(){

$("#btnReg").attr("disabled",true);

intervalId= setInterval("CountDown()",1000);

function CountDown(){

if(leftSecond<=0){

$("#btnReg").val("同意");

$("#btnReg").attr("disabled",false);

clearInterval(intervalId);

return;

}else {

leftSecond--;

$("#btnReg").val("请仔细阅读注册说明,还剩下:"+leftSecond+"秒结束!");

}

</script>

一系列文本框，当焦点离开时，没有填写的内容文本框背景颜色变红，填写过的为白色。

$(":text").blur(function(){

if($(this).val.length<=0){

$(this).css("background","red");

}else{

$(this).css("background","white");

}

});

球队选择

</ul>

$("#ul1 li").css("cursor","pointer").mouseover(function(){

$(this).css("background","red").siblings().css("background","white");

}).click(function(){

$(this).css("background","white").appendTo($("#ul2"));

});

节点操作

$("br").replaceWith("<hr/>"); 批量替换

$("b").wrap("<font color='red'></font>"); 包裹节点，将所有粗体字红色显示

获取样式 attr("class")设置样式 attr("class","myClass1")

追加样式 addClass("myClass1") 删除样式 removeClass("myClass1")

toggleClass("myClass")如果样式存在则去掉样式，没有则添加样式

hasClass("myClass")判断是否有样式

网页开关灯效果，利用toggleClass即可。

body { filter:gray;} //灰白色的过滤器

.night {background-color:black;}

</style>

$(document.body).toggleClass("night");

找一个网页下所有控件

$("body *")

搜索框

.waiting{color:gray;}

$("#search").val("请输入关键词").addClass("waiting").blur(function(){

if($("#search").val()==""){

$("#search").val("请输入关键词").addClass("waiting");

}

}).focus(function(){

if($("#search").val()=="请输入关键词"){

$("#search").val("").removeClass("waiting");

}

});

RadioButton操作：

取得RadioButton的选中值

<input type="radio" id="radio1" name="gender" checked="checked" value="男"/>男

<input type="radio" id="radio2" name="gender" value="女"/>女

$("input[name=gender]:checked").val();

设置选中值

$(":radio[name=gender]").val(["女"]); //注意加中括号

checkbox全选，全部选和反选

$("#selectAll").click(function(){

$("#div1 :checkbox").attr("checked",true);

$("#unselectAll").click(function(){

$("#div1 :checkbox").attr("checked",false);

$("#reverse").click(function(){

$("#div1 :checkbox").each(function(){

$(this).attr("checked",!$(this).attr("checked"));

});

hover(fun1,fun2)是mouseenter和mouseleave的综合

$("p").hover(functon(){$(this).text("鼠标进入")},function(){$(this).text("鼠标移出")});

事件冒泡：

</td>

逐个输出提示 p->td->tr->table

使用事件对象的stopPropagation()方法终止冒泡

$("tr").click(function(e){alert("tr被点击!");e.stopPropagation();}); //注意函数的参数是e

阻止默认行为 preventDefault()方法

$("a").click(function(e){ alert("所有超链接暂时全部禁止点击!");e.preventDefault();});

阻止表单提交

</form>

$(":submit").click(function(e){

if($("#name").length<=0){

alert("用户名不能为空!");

e.preventDefault();

}

事件的其他属性：

pageX pageY target获得触发事件的元素。which如果是鼠标事件获得按键（1：左键 2：中键 3：右键）

altKey、shiftKey、ctrlKey获得alt、shift、ctrl是否按下，为bool值，keyCode、charCode属性发生时间时的keyCode、charCode。

$("#p1").click(function(e){

alert(e.pageX+":"+e.pageY);

alert($(e.target).html());

one()方法，事件只触发一次（一次性触发事件）。

$(":button").one("click",function(){

alert("按钮被点击了！");

跟着鼠标走的图片

<div id="fly" style="position:absolute"> //这里的position要设置成absolute，这样改变xy坐标才能跟着改变

$("document").mouseover(function(e){

$("#fly").css("left",e.pageX).css("top",e.pageY);

var data = {"0.jpg":["00.jpg","AA","123"],"1.jpg":["11.jpg","BB","234"],"3.jpg":["33.jpg","AA","345"]};

$(fuction(){

var smallImg = $("<img src='>"+key+"'/>");

smallImg.attr("bigImg",value[0]);

smallImg.attr("pname",value[1]);

smallImg.attr("pheight",value[2]);

smallImg.mouseover(function(e){

$("#detailImg").attr("src",$(this).attr("bigImg"));

$("#detailHeight").attr("src",$(this).attr("pheight"));

$("#detailName").attr("src",$(this).attr("pname"));

$("#details").css("top",e.pageY).css("left",e.pageX).css("display","");

});

$("body").append(smallImg);

$("#closeDetail").click(function(){

$("#details").css("display","none");

关于动画 show()和hide()方法

用toggle()方法在显示和隐藏之间切换

$(this).hide();

$("#btnToggle").click(function(){

$("#div1").toggle();

show和hide方法内不带参数就是立即显示和隐藏，如果带参数，有fast（200ms）、normal（400ms）和slow（600ms）或者是设置一个时间数值，如1000（1s）

类似QQ的Tab效果实现

ul {list-style-type:none;} //去掉ul前面的小黑点

.header {background:grey;cursor:pointer;}

.body {border-color:blue;border-style:solid;border-width:1px;}

$("#QQ li:odd").addClass("body");

$("#QQ li:even").addClass("header").click(function(){

$(this).next("li.body").show("fast").siblings("li.body").hide("fast");

$("#QQ li:first").click();//模拟点击事件

jquery cookie插件

使用方法，主要有三步：

1、添加对jquery.cookie.js

2、设置值 $.cookie('key','value'),cookie中保存的值都是文本。

3、读取值，var v = $.cookie('key');

设置值的时候还可以指定第三个参数：

$.cookie('key','value',{expires:7,path:'/',domain:'www.baidu.com',secure:true});

expires表示要求浏览器保留cookie几天，这个值只是给浏览器的建议。

jquery备忘学习笔记

继续阅读

主流浏览器四大综合性能测试

JavaScript自学笔记【4】函数的声明与调用目录二、函数的声明三、函数的调用

请求超时VUE axios重新再次请求

nodejs微信开发---授权登录+获取用户信息微信网页授权

debian9升级4.9.0内核到4.19.2内核过程

Javascript构建Bingo卡片游戏

JavaScript的那些坑之事件代理事件代理事件阶段

javascript的for (var i in data)慎用javascript中的for (var i in data)谨慎用

tab鼠标经过菜单切换

vue （vue2.0）使用总结(从大体结构总结)

vue搭建过程及出现问题

/\B(?=(?:\d{3})+$)/g 一条令人费解的正则表达式

适用于JavaScript的ECMAScript 2020规范向前发展

JS生成uuid的四种方法

layui多任务上传添加进度条