很多人对JS和JQuery很容易搞混淆,今天我们就相比学习下:
加载区别:
var myfunction(){};
JS:1.window.onload=function(){}
2.<body onload="myfunction()">
JQuery:1.$(function(){myfunction();}); myfunction>>加载完成后需要执行函数
2.$(document).ready(function () { initfunction});
3.window.onload = function (){ initfunction }
声明变量:(js是弱类型语言,用var关键字,如果在方法内声明变量没有用var关键字,该变量为全局变量。生命周期页面关闭结束)
声明函数:
JS:1.function name(){}
2.var name=function(){}
JQuery:跟js一样
创建对象:
JS:1.person=new Object(); 添加属性 person.name='' person.age=''
2.person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};
3.function person(name,age){this.name=name;this.age=age}(对象构造器) var father=person(‘’,‘’); var mother=person(‘’,‘’);
JQuery:跟js一样
获取DOM元素:
JS:(window.documnt.getElementById() 这么写也行,因为所有的浏览器跟支持dom对象)
http://blog.csdn.net/stalwartwill/article/details/26498603(链接,有详细样例)
1.document.getElementById(); 通过document,通过ID选取元素
2.document.getElementsByName() 通过document,通过名称name选取元素
3.document.getElementsByTagName() 通过document,通过标签名选取元素
4.document.getElementsByClassName() 通过document,通过CSS类选取元素
5.document.querySelectorAll() 通过document,通过CSS选择器选取元素
JQuery:(如果$符号出现冲突时,$.noConflict();可以释放$绑定 jQuery("#id")或者var jq=$.noConflict(); jq("#id"))
(以下四种为JQuery操作页面元素的四种方法)
1.$(selector).text() 设置或返回所选元素的文本内容
2.$(selector).html() 设置或返回所选元素的内容(包括 HTML 标记)
3.$(selector).val() 设置或返回表单字段的值
4.$(selector).attr() 方法用于获取属性值,(一个参数为获取,两个参数为设置)
操作DOM元素:
JS: 1.innerHTML 设置或取值(document.getElementById(“one”).innerHTML(“张三”))
2.style.color=‘’;设置元素的样式
3.src=''; 设置元素的资源路径
4.href=‘’; 设置连接值
JQuery:1.$(selector).text() 设置或返回所选元素的文本内容
2.$(selector).html() 设置或返回所选元素的内容(包括 HTML 标记)
3.$(selector).val() 设置或返回表单字段的值
4.$(selector).attr() 方法用于获取属性值,(一个参数为获取,两个参数为设置)
最常见的鼠标点击:
JS:onclick
JQuery:click
循环:
共有部分:if..else do...whlie 等
JS: for...in... 可以遍历对象和数组中的每一个元素 for (x in mycars){}
Jquery:foreach... $("li").each(function(){alert($(this).text()) });
遍历每一个li元素 但是用foreach函数 得到的对象为DOM对象,所以需要强转为JQuery对象才能操作,以上为例。
JQ对象和DOM对象之间的转型:
DOM转JQuery $(DOM)
JQuery转DOM 1.jQuery 对象是一个数据对象,可以通过 [index] 的方法,来得到相应的 DOM 对象。
var $v = $("#v"); //jQuery 对象
var v = $v[0]; //DOM 对象
2.jQuery 本身提供,通过.get(index) 方法得到相应的 DOM 对象
var $v = $("#v"); //jQuery 对象
var v = $v.get(0); //DOM对象 ( $v.get()[0] 也可以 )
http://www.jb51.net/article/53391.htm(链接有样例)
正则表达式:
JS:var patt1=new RegExp("e"); 创建正则表达式 三种最常见的方法 test(),exec( ,(g|i|m)),compile() g i m 为全部、第一、区间段
JQuery:var str=/^ [u4E00-u9FA5]$/ str.test();返回值为true或false 以"^"开始 以"$"结束。