开发者社区> 暖枫无敌> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

jquery备忘学习笔记

简介: $.map(array,fn); 对数组array中的每一个元素调用fn函数逐个进行处理,fn函数将处理返回,最后得到一个新的数组。
+关注继续查看
$.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选择器:同时选择拥有样式的多个元素

<p class="test">AA</p>
<p class="test">BB</p>
<p class="test">CC</p>
$(function(){
    $(".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");
    });
});

高亮选择:
$("div").click(function(){
   $(this).css("background","red");
   $(this).siblings("div").css("background","white");
});

更简便的写法
$("div").click(function(){
   $(this).css("background","red").siblings("div").css("background","white");
});

一个评分控件实现:
<table id="ratings">
   <tr>
      <td></td><td></td><td></td><td></td><td></td>
   </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'/>");
});
另一种写法:
$("#ratings td").html("<img src='images/empty.png'/>").onmouseover(function(){
   $(this).html("<img src='images/fill.png'/>");
   $(this).siblings().html("<img src='images/fill.png'/>");
   $(this).nextAll().html("<img src='images/empty.png'/>");
});

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

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

$(function(){
  $(".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>
   <div id="div1">
        <ul>
            <li>AA</li>
            <li>BB</li>
        </ul>
   </div>
   <div>
       <ul>
           <li>CC</li>
           <li>DD</li>
       </ul>
   </div>
</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
<p id="msg"/>

$(function(){
    $("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

<table id="tableSite">
</table>

$(function(){
   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 style="float:left" id="select1" multiple="multiple">
   <option>添加</option>
   <option>修改</option>
   <option>删除</option>
</select>
<div style="float:left">
   <input type="button" id="moveToRight" value=">">
</div>
<div id="select2" multiple="multiple">
</div>

$(function(){
    $("#moveToRight").click(function(){
       var items = $("#select1 option:selected").remove();
       $("#select2").append(items);
  });

});

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

<textarea>注册须知</textarea>
<input type="button" id="btnReg" value="注册"/>

<script type="text/javascript">
   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>

一系列文本框,当焦点离开时,没有填写的内容文本框背景颜色变红,填写过的为白色。
<input type="text"/><input type="text"/><input type="text"/><input type="text"/>
$(function(){
     $(":text").blur(function(){
       if($(this).val.length<=0){
         $(this).css("background","red");
      }else{
         $(this).css("background","white");
      }   
   });
 });

球队选择
<ul id="ul1" style="float:left;width:200px">
   <li>AA</li>
   <li>BB</li>
   <li>CC</li>
   <li>DD</li>
</ul>
<ul id="ul2" style="float:left;width:200px">
</ul>

<script type="text/javascript">
   $(function(){
      $("#ul1 li").css("cursor","pointer").mouseover(function(){
         $(this).css("background","red").siblings().css("background","white");
     }).click(function(){
          $(this).css("background","white").appendTo($("#ul2"));
       });
  });
</script>

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

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


获取样式 attr("class")设置样式 attr("class","myClass1")
追加样式 addClass("myClass1") 删除样式 removeClass("myClass1")
toggleClass("myClass")如果样式存在则去掉样式,没有则添加样式
hasClass("myClass")判断是否有样式

网页开关灯效果,利用toggleClass即可。
<style type="text/css">
   body { filter:gray;} //灰白色的过滤器
   .night {background-color:black;}    
</style>
$(document.body).toggleClass("night");

找一个网页下所有控件
$("body *")

搜索框
<style type="text/css">
   .waiting{color:gray;}
</style>
<script type="text/javascript">
   $(function(){
     $("#search").val("请输入关键词").addClass("waiting").blur(function(){
          if($("#search").val()==""){
             $("#search").val("请输入关键词").addClass("waiting");
         }
       }).focus(function(){
           if($("#search").val()=="请输入关键词"){
              $("#search").val("").removeClass("waiting");               
            }
         });
 });

</script>

<input type="text" id="search"/>


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全选,全部选和反选
$(function(){
   $("#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("鼠标移出")});


事件冒泡:
<table onclick="alert('table')">
   <tr onclick="alert('tr')">
      <td onclick="alert('td')">
          <p onclick="alert('p')"/>
      </td>
   </tr>
</table>
逐个输出提示 p->td->tr->table

使用事件对象的stopPropagation()方法终止冒泡
$("tr").click(function(e){alert("tr被点击!");e.stopPropagation();}); //注意函数的参数是e

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

阻止表单提交
<form action="www.baidu.com">
  <input type="text" id="name"/>
  <input type="submit" value="提交"/>
</form>

$(function(){
   $(":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()方法,事件只触发一次(一次性触发事件)。

<input type="button" value="按钮"/>

$(function(){
   $(":button").one("click",function(){
        alert("按钮被点击了!");  
   });
});

跟着鼠标走的图片
<div id="fly" style="position:absolute">  //这里的position要设置成absolute,这样改变xy坐标才能跟着改变
  <img src="logo.jpg"/>
</div>
$(function(){
  $("document").mouseover(function(e){
    $("#fly").css("left",e.pageX).css("top",e.pageY);
  });
});


<div  style="display:none;position:absolute" id="details">
   <img src="" id="detailImg"/>
   <p id="detailHeight"></p>
   <p id="detailName"></p>
   <p><input type="button" value="关闭" id="closeDetail"/></p>
</div>

var data = {"0.jpg":["00.jpg","AA","123"],"1.jpg":["11.jpg","BB","234"],"3.jpg":["33.jpg","AA","345"]};
$(fuction(){
   $.each(data,function(key,value){
      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()方法在显示和隐藏之间切换
$("#div1").click(function(){
    $(this).hide();
});


$("#btnToggle").click(function(){
    $("#div1").toggle();
});

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


类似QQ的Tab效果实现

<style type="text/css">
  ul {list-style-type:none;} //去掉ul前面的小黑点
  .header {background:grey;cursor:pointer;}
  .body {border-color:blue;border-style:solid;border-width:1px;}
</style>

<ul id="QQ">
  <li>我的好友</li>
  <li>AA<br/>BB</li>
  <li>我的同学</li>
  <li>CC<br/>DD</li>
  <li>陌生人</li>
  <li>EE<br/>FF</li>
</ul>
$(function(){
   $("#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学习笔记之jQuery的Ajax(3)
jQuery学习笔记之jQuery的Ajax(3) 6.jQuery的Ajax插件 源码地址: https://github.com/iyun/jQueryDemo.git ———————————————————————————— 6.0 jQuery ajax 浏览器给我们提供的XMLHttpRequest的作用是来发送http请求。 js代码发送一个ht
1386 0
基于jQuery的tooltips插件--poshytip
摘要:   分享一款在项目中使用的tooltips插件--poshytip,这是一款基于jQuery的插件,其特点是简单易用,支持浏览器:IE6+, FF 2+, Opera 9+, Safari 3+, Chrome,并且带有六种皮肤的提示框 Install:   下载poshytip插件,解压之后将文件夹src拷贝到项目中,然后引入js和css文件。
913 0
jQuery 人脸识别插件,支持图片和视频
  jQuery Face Detection 是一款人脸检测插件,能够检测到图片,视频和画布中的人脸坐标。它跟踪人脸并输出人脸模型的坐标位置为一个数组。我们相信,面部识别技术能够给我们的 Web 应用带来各种可能性,创造出互动的,有趣的功能。
907 0
15款帮助你实现响应式导航的 jQuery 插件
  对于我们大多数人来说,建立一个负责任的布局中最困难的方面是规划和导航的实现。由于没有真正经得起考验的通用解决方案,您可以使用的菜单设计风格将取决于正在建设的网站类型。   无论你正在建设什么类型的网站,在这篇文章中我们将向推荐一批制作响应式导航的 jQuery 插件,为您提供方便快速的解决方案。
972 0
Jquery遮罩插件,想罩哪就罩哪!
原文:Jquery遮罩插件,想罩哪就罩哪! 一  前言     在项目开发时发现没有一个用起来 爽一点的遮罩插件,看起来觉得不难 好吧那就利用空闲时间,自己折腾一个吧,也好把jquery再温习一下, 需要的功能如下   1 可以全屏遮 用于提交数据时   2  局部遮,用于重复提交,只遮提交...
1003 0
过去几个月出炉的30款最喜欢的 jQuery 插件
  在这篇文章中,我们收集了一些在过去的几个月里最喜欢的 jQuery 插件。为了使您更容易搜索到自己喜欢的 jQuery 插件,我们已经对插件进行了分类: 页面布局插件,图片和视频插件,滑块和画廊,排版插件等等。
952 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
23-Vue.js在前端...1506518547.pdf
立即下载
零基础CSS入门教程
立即下载