JSJQuery的一些操作小记

Posted 2020-06-09

jq:

1.、链式操作
$(‘div‘).find(‘h3‘).eq(2).html(‘hello‘); // .eq(2) 选择第3个h3元素

2、.end()方法使结果集后退一步；

3、html()没有参数，表示取出h1的值；html()有参数，表示赋值。取值是获取一组的
第一个元素，赋值是所有元素。

4、元素移形换位
insertAfter()、appendTo()、after()将x加到y后、append()

5.创建元素
var oLi = $(‘<li>‘); oLi.html(‘hello‘); $(‘ul‘).append(oLi);

6.工具方法
$.each() jquery遍历
$(‘li‘).each(function(index,elements){}) //第一个参数索引，第二个参数所有获取的元素
$.trim() 去掉空格

7.事件操作
.bind() .one() .unbind() pageX

8.运动特效
fadeIn() fadeOut() slideDown(秒数) 向下展开
.animater() stop()

◆JS
1、如果一个表达式在代码中多次出现，可以使用with语句来简化代码
例如： with(document.forms[0]){
name.value = "";
address.value = "";
email.value = "";
}
2、debugger在调试程序运行时，用来产生一个断点。

3、JS解析器原理
alert(a); //未定义
var a = 1;
function fn1(){alert(2);}
浏览器 - JS解析器执行步骤：
① “找一些东西”: var function 参数
a = 未定义 -- 所有的变量，在正式运行代码之前，都提前赋值：未定义；
fn1 = function fn1(){alert(2);}
-- 所有的函数，在正式运行代码之前，都是整个函数块；

*JS的预解析
◆遇到重名的：只留一个
◆变量和函数重名了，就只留下函数

② 逐行解读代码：
表达式： = +-*参数......
◆表达式可以修改预解析的值

例一：
alert(a); // function a(){alert(4);}
var a=1;
alert(a); // 1
function a(){alert(2);}
alert(a); // 1
var a=3;
alert(a); // 3
function a(){alert(4);}
alert(a); // 3

a(); // 出错
例二：
var a = 1;
function fn1(){
alert(a); //undefined 局部范围内找
var a = 2;
}
fn1();
alert(a); //1

③ 当存在多个<script>标签，一个执行完后，再执行另一个（自上而下）。

4、清空数组
arr.length = 0;
arr = [];

5、数组方法
push(): 向后添加元素
unshift(): 向前添加元素
pop(): 删除最后一个元素
shift(): 删除第一个元素

依次换位后移： arr.unshift(arr.pop());
依次换位前移： arr.push(arr.shift());

//删除、替换、添加
splice()
arr.splice(0,2); 删除
arr.splice(0,2,‘XX‘) 替换
arr.splice(1,0,‘‘,‘‘) 添加

6、sort排序
var arr = [4,5,8,89,3,2,0];
arr.sort(function(a,b){
return a - b; //从小到大，b-a: 从大到小
})
例： var arrWidth = [‘345px‘,‘23px‘,‘10px‘,‘1000px‘];
arrWidth.sort(function (a,b){
return parseInt(a) - parseInt(b);
});

◇随机排序
var arr = [1,2,3,4,5,6,7,8];
arr.sort(function(a,b){
return Math.random()-0.5; //值有正有负
})
//Math.random() 0~1
//0~1: Math.round(Math.random());
//0~10: Math.round(Math.random()*10);
//5~10: Math.round(Math.random()*5+5);
//20~100: Math.round(Math.random()*80+20);
//x~y: Math.round(Math.random()*(y-x)+x);
//0~x: Math.round(Math.random()*x);
//1~x: Math.ceil(Math.random()*x);

7.concat、reverse
concat: 将多个数组连在一起;
例：var arr1=[1,2,3];var arr2=[4,5,6];
arr1.concat(arr2);
reverse: 颠倒数组元素位置;
arr1.reverse();
例：var str = ‘abcdef‘; //遇到字符串，先转换
str.split(‘‘).reverse().join(‘‘);

8. JS中允许","替换成"[]"
oDiv.style.width = oVal.value; //.后面的值无法修改
oDiv.style[‘oAttr.value‘] = oVal.value;
9. cssText用来添加css样式
oDiv.style.cssText = "width:200px;height:200px;";
10. typeof判断数据类型
11. JS的隐式类型转换：
+ 200+‘3‘ 变成字符串
-*/% ‘200‘- 3 变成数字
++ -- 变成数字
>< 数字的比较、字符串的比较（比较编码，按首位判断）
!取反 把数据类型转成布尔值
== ‘2‘==2
12. NaN: 不是个数字的数字类型。
一旦程序中出现：NaN 肯定进行了非法的运算操作
NaN与自身也不相等
13.window.history.go(-1);//返回上一页不刷新
window.location.href = document.referrer;//返回上一页并刷新

14.delete:删除对象属性或者数组元素
var o = {x:1,y:2};
delete o.x;
"x" in o