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几天,这个值只是给浏览器的建议。



相关文章
|
4月前
|
JavaScript 前端开发 程序员
后端程序员的前端必备-jQuery核心学习笔记
后端程序员的前端必备-jQuery核心学习笔记
60 13
|
7月前
|
JavaScript 前端开发 API
web学习笔记(二十九)jQuery
web学习笔记(二十九)jQuery
41 0
|
7月前
|
JavaScript 前端开发 Windows
jQuery权威指南学习笔记
jQuery权威指南学习笔记
|
移动开发 JavaScript 前端开发
[HTML CSS JS ES6 JS WebAPI JQuery]学习笔记目录
[HTML CSS JS ES6 JS WebAPI JQuery]学习笔记目录
|
JavaScript 前端开发 Java
HTML+CSS+JS 学习笔记(四)———jQuery
HTML+CSS+JS 学习笔记(四)———jQuery
|
JavaScript 前端开发 索引
JavaScript学习笔记(五) jQuery
JavaScript学习笔记(五) jQuery
86 0
|
Web App开发 JavaScript 前端开发
jQuery学习笔记——jQuery基础
什么是jQuery?jQuery是一个快速、简洁的JavaScript库,其设计宗旨是“write less,do more”,倡导用更少的代码,做更多的事情。通过这段时间的学习,我感觉jQuery是一个“语法糖”,就像是包在糖果外面的包装,让js看起来更好看。
|
JavaScript 前端开发 API
jquery学习笔记
1.jquery是一个框架,是javasript框架。 2.jquery能做什么? *取得页面中元素,遍历DOM(document object model文档对象模型)树,jquery为了准确的获取需要检查活操纵的文档元素,提供了可靠而富有效率的选择符机制。
88 0
|
Web App开发 JSON JavaScript
html+css+js+jQuery学习笔记(二)
html+css+js+jQuery学习笔记
180 0
html+css+js+jQuery学习笔记(二)
|
前端开发 测试技术
html+css+js+jQuery学习笔记(一)
html+css+js+jQuery学习笔记
126 0
html+css+js+jQuery学习笔记(一)