jquery相关方法笔记

1.css()和.atr()的区别
2. 显示隐藏
3.each()方法
4.attr(‘checked’)、prop()、is(‘:checked’)等判断复选框是否选中
5.change()方法 ：适用selected、radio、checkbox
6.刷新页面
7.绑定事件到动态创建的元素上 .on()事件
8.css()、.on()接受一个 JSON 对象
9.htm()、append()、appendChild()的区别
10.数组的克隆
11.定时器setTimeout的应用
12.location.href后的相对路径和绝对路径
13.阻止表单的默认事件
14.onclick和click的区别
15.拖拽事件
16.&& 实现 if 判断功能

100.相关杂记

1.css()和.atr()的区别
css()是用来操纵style{}的
attr()是加在标签内部的属性的

$("#content").attr("style","width:50px;color:red")//设置style属性的值

等价

$("#content").css({"width":"50px","color":"red"})//也是设置style属性的值

  //attr设置单个属性（str、black是变量）
  $("p").attr("style","color:"+str+";background-color:"+black);
  //attr设置多个属性（str、black是变量）
  $("p").attr({"style":"color:"+str+";background- color:"+black});
  //attr设置多个属性
  $("img ").attr({width:"50",height:"80"});
  //css设置单个属性
  $("p").css("color","red");
  //css设置多个属性
  $(".showtip").css({
     "margin-left": instance.config.data.x + 280,
     "margin-top": instance.config.data.y - 30
  });

2. 显示隐藏
1）$("#id").show()表示display:block, $("#id").hide()表示display:none; $("#id").toggle()切换元素的可见状态。
2）visibility=”visible|hidden ：隐藏后，仍然占据空间（效率高，不经常用）
3）display=none| block|inline ：隐藏后，不占据空间（效率低，经常用）

3.each() 方法：

$("button").click(function(){
  $("li").each(function(){
    alert($(this).text())
  });
});

4.attr(‘checked’)、prop()、is(‘:checked’)等判断复选框是否选中
$(‘#cb’).attr(‘checked’); 返回的是checked或者是undefined

<input type='checkbox' id='cb'/> 
<script> //获取是否选中  var isChecked = $('#cb').attr('checked'); //设置选中  $('#cb').attr('checked',true); </script> 

这样写在JQ1.6之前完全没问题，可是当我们升级JQ1.6到更高的版本时，问题就来了
$(‘#cb’).attr(‘checked’); 返回的是checked或者是undefined，不是原来的true和false了。

解决的方法是：
代码如下:

<input type='checkbox' id='cb'/> 
<script> //获取是否选中  var isChecked = $('#cb').prop('checked'); //或  var isChecked = $('#cb').is(":checked"); //设置选中  $('#cb').prop('checked',true); </script> 

分析了其中的原因，可以这样理解：
JQ1.6之后，可以通过attr方法去获得特性，通过prop方法去获得属性
代码如下:

$("#cb").attr("tagName"); //undefined 
$("#cb").prop("tagName"); //INPUT 

6.刷新页面
window.location.reload()刷新当前页面.
parent.location.reload()刷新父亲对象（用于框架）
opener.location.reload()刷新父窗口对象（用于单开窗口）
top.location.reload()刷新最顶端对象（用于多开窗口）

7.jQuery 绑定事件到动态创建的元素上
1）绑定事件
jquery 1.7版以前使用live动态绑定事件

$("#testdiv ul li").live("click",function(){
});

jquery 1.7版以后使用on动态绑定事件

$("#testdiv ul").on("click","li", function() {
//do something here
});

2）动态添加的元素的绑定事件
.on(events, callback) 只能绑定页面已有元素的事件。
.on(events, selector, callback) 则是在 已有的元素上绑定代理的事件处理器 (addEventListener 实际上在该已有元素上调用)，但只有事件的实际 source 是其子代元素并且符合 selector 时， callback 才会以该实际 source 为 this 指向的对象被调用。

$(document).on("click", "a", function () {
    console.log(this.tagName.toLowerCase()); // "a"
    return false;
});

这样即可监听页面创建时尚未存在的 元素所产生的事件。

8. .css()、.on()接受一个 JSON 对象

jQuery("#some-selector").css({
  "background" : "red", "color" : "white", "font-weight" : "bold", "padding" : 10 });

//通过传一个 map 映射绑定事件

jQuery("#some-selector").on({
  "click" : myClickHandler,
  "keyup" : myKeyupHandler,
  "change" : myChangeHandler
});

//为多个事件绑定同一个处理函数

jQuery("#some-selector").on("click keyup change", myEventHandler);

9.htm()、append()、appendChild()的区别
html()：
替换子元素内容
append():
在子元素后面添加内容
appendChild():
1.向节点添加最后一个子节点。
2.从一个元素向另一个元素中移动元素。

10.数组的克隆
一维数组的拷贝：

arr2=arr1.slice(0);
arr4=arr3.concat();

多维数组的拷贝

var newJson = jQuery.extend(true,{}, arr1);

例子1:合并两个对象，并修改第一个对象。

var object1 = {
  apple: 0,
  banana: { weight: 52, price: 100 },
  cherry: 97
};
var object2 = {
  banana: { price: 200 },
  durian: 100
};

// Merge object2 into object1
$.extend( object1, object2 );

// Assuming JSON.stringify - not available in IE<8
$( "#log" ).append( JSON.stringify( object1 ) );

//{"apple":0,"banana":{"price":200},"cherry":97,"durian":100}

例子二：采用递归方式合并两个对象，并修改第一个对象。

var object1 = {
  apple: 0,
  banana: { weight: 52, price: 100 },
  cherry: 97
};
var object2 = {
  banana: { price: 200 },
  durian: 100
};

// Merge object2 into object1, recursively
$.extend( true, object1, object2 );

// Assuming JSON.stringify - not available in IE<8
$( "#log" ).append( JSON.stringify( object1 ) );

//{"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100}

例子三：合并 defaults 和 options 对象，并且不修改 defaults 对象。这是常用的插件开发模式。

var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };

// Merge defaults and options, without modifying defaults
var settings = $.extend( {}, defaults, options );

// Assuming JSON.stringify - not available in IE<8
$( "#log" ).append( "<div><b>defaults -- </b>" + JSON.stringify( defaults ) + "</div>" );
$( "#log" ).append( "<div><b>options -- </b>" + JSON.stringify( options ) + "</div>" );
$( "#log" ).append( "<div><b>settings -- </b>" + JSON.stringify( settings ) + "</div>"

/*
defaults -- {"validate":false,"limit":5,"name":"foo"}
options -- {"validate":true,"name":"bar"}
settings -- {"validate":true,"limit":5,"name":"bar"}
*/

11.定时器的应用
例子1：

<script type="text/javascript"> $(document).ready(function(){ var timeout = ''; $('p').mouseover(function(){ timeout = setTimeout(function(){ alert('2秒') },2000); }) $('p').mouseout(function(){ clearTimeout(timeout) }) }) </script>

例子2：如果用户在当前页面超过10分钟没操作，就退出要求重新登陆

$(function() {
    var time_limit = setTimeout(function() {
        localStorage.login_flag = "timeout";
        window.location.href = window.location.href.split("#")[0] + "login.html";
        return;
    }, 10 * 60 * 1000);
    //--在页面有鼠标移动就触发
  $(document).mousemove(function() {
        clearTimeout(time_limit);//--清除定时器，重新计时
        time_limit = setTimeout(function() {
            localStorage.login_flag = "timeout";
            window.location.href = window.location.href.split("#")[0] + "login.html";
            return;
        }, 10 * 60 * 1000);
    });
});

12.location.href后的相对路径和绝对路径

当前路径：www.yourURL/a.html
location.href="b.html" //www.yourURL/b.html
location.href="/b.html" //前面带“/”，会取代根目录，被视为绝对路径

*.location.href 用法:

　　top.location.href=”url”            在顶层页面打开url（跳出框架）
　　self.location.href=”url”           仅在本页面打开url地址
　　parent.location.href=”url” 　      在父窗口打开Url地址
　　this.location.href=”url” 　　      用法和self的用法一致
   if (top.location == self.location) 判断当前location 是否为顶层来 禁止frame引用
　  如果页面当中有自定义的frame的话，也可以将parent  self   top换为自定义frame的名称
    效果就是在自定义frame窗口打开url地址 

13.阻止表单的默认事件
有时候点击提交按钮会有一些默认事件。比如跳转到别的界面。但是如果没有通过验证的话，就不应该跳转。
解决方案：
1.event.preventDefault(); //阻止默认行为 ( 表单提交 )。
2.return false; 会把浏览器默认事件和冒泡干掉

14.onclick和click的区别
$(“”).click(function(){})该方法会触发onclick事件，并在onclick事件执行完后执行function内部定义的方法。

15.拖拽事件
1.

<script>
document.addEventListener("dragstart", function(event) {
    event.dataTransfer.setData("Text", event.target.id);
    event.target.style.opacity = "1";
});

document.addEventListener("dragover", function(event) {
    event.preventDefault();
});
document.addEventListener("drop", function(event) {
    event.preventDefault();
    var data = event.dataTransfer.getData("Text");
    console.log(event);
    event.target.appendChild(document.getElementById(data));
});
</script>

2.

<div ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div  draggable="true" ondragstart="drag(event)"></div>

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var id = $(ev.target).attr("id");
    var parent_tag = $(ev.target).attr("parent_tag");
    var data = ev.dataTransfer.getData("Text");
    // createAndHideAlert(new String(id));
    var move_tag = $("#" + data).attr("tag");
    if (id == "selected_subnet") {
        $("#" + data).find("button").removeClass("net_add");
        $("#" + data).find("button").addClass("net_detract");
        $("#" + data).find("button").find("span").removeClass("fa-plus");
        $("#" + data).find("button").parent().addClass("selected_netTag");
        $("#" + data).find("button").find("span").addClass("fa-minus");
        //console.error(document.getElementById(data));
        ev.target.appendChild(document.getElementById(data));
    } else if (move_tag == parent_tag) {
        $("#" + data).find("button").removeClass("net_detract");
        $("#" + data).find("button").addClass("net_add");
        $("#" + data).find("button").find("span").removeClass("fa-minus");
        $("#" + data).find("button").parent().removeClass("selected_netTag");
        $("#" + data).find("button").find("span").addClass("fa-plus");
        ev.target.appendChild(document.getElementById(data));
    }
}

16.&& 实现 if 判断功能

var a=-1;
a<0 && (a=1); //后面必须用()括起来

等价于

var a=-1;
if(a<0){
a=1;
}

7.传统的html文档顺序是:document->html->(head,body)
8.一个浏览器窗口中的dom顺序是:window->(navigator,screen,history,location,document)
9.当文件中出现多个form表单时.可以用document.forms[0],document.forms[1]来代替.
10.窗口:打开窗口window.open(), 关闭一个窗口:window.close(), 窗口本身:self
11.状态栏的设置:window.status=”字符”;
12.弹出确认框:window.confirm();
13.弹出输入提示框:window.prompt();
14.指定当前显示链接的位置:window.location.href=”url”
15.关闭文档的输出流:document.close();
16.创建一个文档元素:document.createelement(),document.createtextnode()
17.指定在不支持脚本的浏览器显示的html:
18.js中的all代表其下层的全部元素
19.contenteditable可设置元素是否可被修改,iscontenteditable返回是否可修改的状态.
20.isdisabled判断是否为禁止状态.disabled设置禁止状态
21.window.focus()使当前的窗口在所有窗口之前.
22.防止用户对文本框中输入文本:onfocus=”this.blur()”
23.取出该元素在页面中出现的数量:document.all.tags(”div(或其它html标记符)”).length
24.添加到收藏夹:external.addfavorite(”http://www.google.com”,”google”);
25.js中遇到脚本错误时不做任何操作:window.onerror = donothing; 指定错误句柄的语法为:window.onerror = handleerror;
26.js中指定当前打开窗口的父窗口:window.opener,支持opener.opener…的多重继续.
27.js中的self指的是当前的窗口
28.js中状态栏显示内容:window.status=”内容”
29.js中的top指的是框架集中最顶层的框架
30.js中关闭当前的窗口:window.close();
31.js中提出是否确认的框:if(confirm(”are you sure?”)){alert(”ok”);}else{alert(”not ok”);}
32.js中的窗口重定向:window.navigate(”http://www.google.com”);
33.js中的提示输入框:window.prompt(”message”,”defaultreply”);
34.js中的窗口滚动条:window.scroll(x,y)
35.js中的窗口滚动到位置:window.scrollby
36.js中设置时间间隔:setinterval(”expr”,msecdelay)或setinterval(funcref,msecdelay)或settimeout
37.当窗体第一次调用时使用的文件句柄:onload()
38.当窗体关闭时调用的文件句柄:onunload()
39.window.history.back()返回上一页,window.history.forward()返回下一页,window.history.go(返回第几页,也可以使用访问过的url)
40.document.write()不换行的输出,document.writeln()换行输出
41.变量名.charat(第几位),取该变量的第几位的字符.
42.字符串连接:string.concat(string2),或用+=进行连接
43.变量.indexof(”字符”,起始位置),返回第一个出现的位置(从0开始计算)
44.string.lastindexof(searchstring[,startindex])最后一次出现的位置.
45.string.match(regexpression),判断字符是否匹配.
46.string.replace(regexpression,replacestring)替换现有字符串.
47.string.split(分隔符)返回一个数组存储值.
48.string.substr(start[,length])取从第几位到指定长度的字符串.
49.string.tolowercase()使字符串全部变为小写.
50.string.touppercase()使全部字符变为大写.
51.parseint(string[,radix(代表进制)])强制转换成整型.
52.parsefloat(string[,radix])强制转换成浮点型.
53.isnan(变量):测试是否为数值型.
54.定义常量的关键字:const,定义变量的关键字:var