JS/JQ 常用方法

JS/JQ常用方法：

 

$('#h').index()，在兄弟节点的索引

$('div').attr('title','456')，对title属性操作

text() : 获取标签里面的文本

$('p').not('#id')

 

 

常用方法一：

$('<div>')：创建了div

 

CSS属性操作：

css()：设置一个或多个属性

addClass()、removeClass()、toggleClass()

 

// 添加HTML内容：

append()：插入最后的子元素

prepend()：插入第一个子元素

before()：插入某元素之前（兄弟节点）

after()：插入某元素之后（兄弟节点）

 

// 删除元素/内容

remove()：删除某节点及子节点，和事件

empty()：删除某元素的子节点，清空所有子节点

 

// 遍历：

向上遍历：parent()：parents()：parentsUntil():

向下遍历：children()、find()

find 查找所有的子元素，会一直查找，跨层级查找；

children 查找直接的子元素，不会跨层级查找。

同胞：siblings()：next()、nextAll()、nextUntil()、prev()、

         prevAll()、prevUntil()

 

// 过滤：

eq()、first()、last()

closest()：最近匹配的祖先节点

 

// 获取内容：

text()、html()、val()，    属性：attr()、length、 size()

 

// jquery通过name属性取值的方法

//$("input[name='imgtitle']").val();//这个只能取到第一个的值

//通过each函数取得所有input的值

var titles = "";

$("input[name='imgtitle']").each(function(){

    titles += $(this).val()+",";

});

//取textarea的值

var desc = $("textarea[name='imgdesc']").val();

 

 

 

// 设置内容或值：

text(xx)、html(xx)、val(xx)

 

// 效果：

hover()   show()   hide()   toggle() 

fadeIn()   fadeOut()   fadeToggle()   fadeTo() 

slideDown()   slideUp()   slideToggle()

 

// 宽高等属性操作：

width()、height()、innerWidth()、innerHeight、outerWidth()、outerHeight()

 

// 获取元素宽度：var contentWidth = $('.content').width();

 

// 事件：

on()：事件的另一种开关设置，可以设置多个。//$("p").on("click",function(){ })

off()：取消事件，针对on()设置的事件进行取消。

//$("button").click(function(){$("p").off("click");});

scrollTop()/scrollLeft()：纵向/横向滚动距离

ev.pageX/Y：相对于[文档]的鼠标坐标

offset()：相对文档的偏移量

offsetParent()：获取有定位的父级，无则相对文档

$('#ul1 li').size()：获取li的长度，有几个li的意思

each()：循环，相当于每一个

 

// 操作节点：

clone()：克隆节点

wrap()：添加父级节点

wrapAll()：给整体添加父节点

wrapInner()：包住标签内部的所有节点。

unwrap()：删除父节点

add()：对节点进行添加

slice(1,4)：截取某一段，比如截取li的第1个到第4个

 

serialize()：数据化。ajax会用得到

serializeArray()：数据数组化

 

// 动画：

animate()：请参考手册，用法如下：

$(selector).animate({params},speed,easing,callback)

 

// $.xx的应用：

$.type()：判断类型

$.trim(str)：去除空格什么的

$.inArray('b',arr)：判断b在数组中的位置

$.proxy(show , document)(3,4)：改变this指向

parseJSON()：把字符串解析成JSON格式。

makeArray()：将类数组转化成真正的数组。

 

// 加载ajax：

$('#div').load(demo.txt);

 

// $.ajax({})用法：

$('.edit').click(function () {

    adminId = $(this).attr('idx');

    $.ajax({

        type: "POST",

        url: "{:url('admin/index/useredit')}",

        data: {

            admin_id:adminId,

        },

        dataType: "json",

        timeout:3000,

        success: function(data){

            if(data){

                alert(data);

            }

        }

    });

})

 

 

// 失去焦点时候进行操作（排序的时候会用到）：

$('.class').blur(function(){})

 

//请求

$.post('xxx.php',function(){}

$.getJSON('xxx.php?callback=?',function(data){}

 

// 字符串和对象转换

JSON.parse()和JSON.stringify()

JSON.parse()：字符串解析成对象（未必是json，也可能是数组）。

JSON.stringify()：把对象解析成字符串。

 

 

// 跳转：

window.location.href='http://www.baidu.com';

window.history.back(-1);

<a href="javascript:history.go(-1)">返回上一步</a>

<a href=":;" onClick="window.open('login.html')) target="_blank""></a> 

 

// JQ换图片的src路径：

$('#img')[0].src += '?' + Math.random();  //写了0之后，才变成dom对象，没有src属性。

 

// for和for in，用于手机checked的值

//for in用于遍历对象

var obj = document.getElementsByName("auth");

for(k in obj){

    if(obj[k].checked)

        authVal.push(obj[k].value);

}

 

//for无法用于遍历对象，可遍历数组。

for(i = 0 ; i < arr.length ; i++){ }

 

// 数组变成字符串：

var auth = authVal.join(",");

 

// 字符串变数组：

var a = "hello,world,sss".split(",");   //以,分割字符串，拼数组。

 

 

// JQ操作多选框：

$("input[type='checkbox']").is(':checked');   //判断是否选中

$("input[name='auth']").eq(0).attr("checked",true);    //将状态变成选中

$("input[type='checkbox']").eq(0).attr("checked",true);    //将状态变成选中

 

// 字符串替换成其他字符串：

var contentReplace = $('.auth').eq(i).html().replace('1', '订单管理').replace('2','缴费管理');

 

 

// 字符串中是否包含某字符串：

方法一：var check2 = /^.*2.*$/;      //使用正则校验是否包含2

方法二：string.indexOf('abc')     //检测abc字符串首次在string中出现的位置，不存在的时候，会返回-1

 

// arr.indexOf(find,strat)或string.indexOf(find,strat)  

//返回find第一次出现的位置，不存在的时候会返回-1

//find：查找值，start：数组下标(或字符串的第几个字符）开始查找

 

 

J// S时间换成时间戳：

方法一：(new Date('2014-04-23 18:55:49:123')).getTime();

方法二：(new Date('2014-04-23 18:55:49:123')).valueOf();

方法三：Date.parse(new Date('2014-04-23 18:55:49:123'));

 

JS时间戳是13位，linux时间戳是10位的，所以需要除以1000，如下：

var dateStamp = ((new Date(timeStart)).getTime())/1000;

 

 

// 大小写转换：

转换成大写：string.toUpperCase()

转换成小写：string.toLowerCase()

 

// 替换字符串：

str.replace(/Microsoft/,"W3School");

stringObject.match(searchvalue);

stringObject.match(regexp);

 

$('.increase').on('touchstart',function(){

    alert(1);

})

 

//字符串转数字：

parseInt($('.number').text()) * parseFloat($('.unit-price').text())

 

 

//checkbox的值

var obj = document.getElementsByName("auth");

var authVal = [];

for (k in obj) {

    if (obj[k].checked) {

        authVal.push(obj[k].value);

    }

}

 

//数组转字符串

var auth = authVal.join(",");

 

// 获取单选框radio的值

$("input[name='role']:checked").val()

 

 

// 增加请求头

1、$.ajax 添加参数

headers: {

"token":'dhkjsahdjhu7479823kewj'//自定义token及值

},

2、统一设置：

$.ajaxSetup({

headers:{

Authorization:'Bearer DntgHWoEanBSYeMv'

}

});

 

 

// localStorage

localStorage.setItem("key", "value");    // 保存

var lastname = localStorage.getItem("key");    // 读取

localStorage.removeItem("key");    // 删除

localStorage.clear();    // 删除所有制

 

- localstorage存取数组

var weekArray = ['周一'、'周二'、'周三'、'周四'、'周五']

存：localStorage.setItem('weekDay',JSON.stringify(weekArray));

取： weekArray = JSON.parse(localStorage.getItem('weekDay'));

 

//URL编码解码

Jquery解码：decodeURIComponent(url);

Jquery编码：encodeURIComponent(url);

 

//JQ 设置 radio选中的值

$("input[name='name'][value='value']").attr("checked",true);

 

// JQ设置 select 选中的值

$(".category").val("男");