JavaScript和jQuery知识点总结

1.选择器(dom jq)

注意：下文中以$开头的对象都为jq对象
①id选择器
document.getElementById('id');
$("#id");

②class选择器
document.getElementsByClassName('className');
注：上一种方法在某些低版本浏览器中不支持。
$(".className");

③标签选择器
document.getElementsByTagName('tagName');
$("tagName");

④元素名称选择器
document.getElementsByName('eleName');
$("[name='eleName']");

⑤组合选择器(","分隔选择器,">"子代选择器," "后代选择器)
document.querySelector('[attr=val]>.class,#id tag,tag[attr=val]');//选中第一个
document.querySelectorAll('[attr=val]>.class,#id tag,tag[attr=val]');//选中全部
以上两种方法特点：功能强大，实时性差，某些低版本浏览器不一定支持。
$("[attr='val']>.class,#id tag,tag[attr='val']");

⑥父子选择器
ele.parentElement;(ie标准)
ele.parentNode;(w3c标准)
$ele.parent(selector);
ele.childNodes;
$ele.children(selector);

⑦（前后）兄弟选择器
ele.previousSibling;(w3c标准)
ele.previousElementSibling;(ie标准)
$ele.prev();$ele.prevAll();
ele.nextSibling;(w3c标准)
ele.nextElementSibling;(ie标准)
$ele.next();$ele.nextAll();

2.新增元素操作

注意：下文中以$开头的对象都为jq对象
①通过标签名称创建元素
var ele = document.createElement('tagName');
obj.appendChild(ele);//所有子元素末尾
obj.insertBefore(ele, obj.childNodes[i])//指定子元素前面

$obj.append("newEleStr");//子元素末尾
$obj.prepend("newEleStr");//子元素首部
$obj.after("newEleStr");//元素后面
$obj.before("newEleStr");//元素前面

②通过innerHTML拼接创建
objEle.innerHTML+='newEleStr';//子元素末尾
objEle.innerHTML = 'newEleStr'+objEle.innerHTML;//子元素首部
objEle.outerHTML+='newEleStr';//元素后面
objEle.outerHTML = "newEleStr"+objEle.outerHTML;//元素前面

$obj.html($obj.html()+'newEleStr');//子元素末尾
$obj.html('newEleStr'+$obj.html());//子元素首部...

3.修改元素操作

注意：下文中以$开头的对象都为jq对象
dom对象ele只能使用js提供的方法，dom对象转jq对象使用$，$ele = $(ele)；
jq对象$ele只能使用jq提供的方法，jq对象转dom对象使用下标，ele = $ele[i]或$ele.get(i)；
$ele.eq(i)得到的对象仍然是jq对象。

①修改属性（attr）
ele.setAttribute('attrName', 'newValue');
$ele.attr("attrName", "newValue");

②修改值（value）
ele.value = 'newValue';
$ele.val("newValue");

③修改文本（text）
ele.innerHTML = 'newText';
$ele.text("newText");

④修改html
ele.innerHTML = 'newHTML';
ele.outerHTML = 'newHTML';(含本身)
$ele.html("newHTML");
$ele.prop("outerHTML", "newHTML");(含本身)

⑤修改style
ele.style.styName = "styValue";
$ele.css("styName", "styValue");

4.元素删除操作

注意：下文中以$开头的对象都为jq对象
①清空孩子元素
ele.innerHTML = null;
$ele.empty();

②删除自身元素
ele.outerHTML = null;
$ele.remove();

5.ajax请求（js和jq）

a.创建XMLHttpRequest对象
b.连接服务器(xhr对象调用open方法)
c.发送请求(xhr对象调用send方法传递参数[post,get中设置null])
d.接受响应数据(xhr对象属性readState[0-4])
	0-未初始化，尚未调用open()方法；
	1-启动，调用了open()方法，未调用send()方法； 服务器连接已建立；
	2-发送，已经调用了send()方法，未接收到响应； 请求已接收；
	3-接收，已经接收到部分响应数据； 请求处理中；
	4-完成，已经接收到全部响应数据； 请求已完成；
	
// jquery就是封装了这些以上四个步骤
$.ajax(
	url:'请求路径',
	async:默认true表示异步请求,
	type:'请求类型get/post',
	data:{'propName':'porpValue',..},
	dataType:'响应数据类型xml/text/script/json/jsonp/html',
	cache:默认为true缓存响应数据,
	success:function(result){...},
	error:function(){...}
);

6.js中的循环

①普通for循环
for(var i=0,len=arr.length;i<len;i++){alert(arr[i]);}
注：适用所有数组，break和continue正常使用。

②map遍历数组
arr.map(function(value, index){
	alert('arr['+index+']='+value);
});
注：不是适用于元素数组，return起continue的作用。

③forEach遍历数组
arr.forEach(function(value, index){
	alert('arr['+index+']='+value);
});
注：不是适用于元素数组，return起continue的作用。

④for in下标遍历
for(let i in arr){alert(arr[i]);}
注：遍历元素数组时可能出现意外效果，break和continue正常使用。

⑤for of 对象遍历
for(let e of arr){alert(ele);}
注：break和continue正常使用。

7.js正则表达式

格式：/正则表达式主体/修饰符[可选]
①str.search(/str0/i);
在str中找出str0（i：忽略大小写）首次出现的位置，无则返回-1.

②str.replace(/str0/g,'str1');
找到str中的str0,并（g：全局）替换为str1.

③/str0/.test(str);
判断str是否符合正则str0，符合则返回true.

④str.match(reg);
匹配符合的字符串，并以数组返回.

⑤str.split(reg[,limit]);
正则切分，可以指定切分的最大长度.

⑥js正则补充
范围字符：[\u4E00-\u9FA5][^abc](x|y)
元字符：.(除去换行和结束符的单字符) \d \D \b \B \w \W \s \S \n \r \t \f \0 \uxxxx
量词：+(至少一次) ?(至多一次) *(可有可无) {n}(恰好n次) {n,}(>=n次) {n,m}(n~m次)
其他符号：^(行开头) $(行结尾) ?=n(后面紧接字符串n) ?!n(后面不紧接字符串)

8.js跨域问题解决方案

定义：协议，域名，端口任何一个不同，都被称作是跨域。
注意：将域名改成对应的ip，也是跨域的一种。
应用：跨域存在安全性问题，一般应用于公司内部子域中。

①跨域资源共享（CORS）
使用自定义的HTTP（Response）头部让浏览器与服务器进行沟通。
	//指定允许访问的域
	'Access-Control-Allow-Origin:*'
	//响应类型
	'Access-Control-Allow-Methods:GET,POST'
	//响应头设置
	'Access-Control-Allow-Headers:x-requested-with,content-type'
	
②通过jsonp（填充式json）跨域
通过script标签引入一个js文件，
文件载入成功后执行url参数中指定的函数（以json数据作为参数），
此种跨域方式需要服务器端的页面配合
	​<script type="text/javascript">
		function dosomething(jsondata){
			//处理获得的json数据
		}
	</script>
	<script src="http://example.com/data.php?callback=dosomething"></script>	
	
③使用window.name来进行跨域
一个窗口(window)的生命周期内，
窗口内载入的所有的页都共享（读写）一个window.name，
由（隐藏的）iframe充当中间人获取和传递数据从而实现页面不跳转跨域请求数据。
	<iframe id="proxy" arc="www.baidu.com" atyle="diaplay: none" onload="getData()">
	function getData(){
		var iframe = document.getElementById('proxy');
		iframe.onload = function(){
			var data = iframe.contentwindow.name;
			...
		}
		iframe.src = 'about:blank';
	}

新人写博客，有错误请多多指教！