jquery学习1_jquery与Javascript的区别

jquery学习1_jquery与Javascript的区别

jquery 就对javascript的一个扩展，封装，就是让javascript更好用，更简单。 jQ等框架解决易用性和兼容性问题，效率稍低 原生js解决运行效率问题，兼容比较麻烦

jquery和js优缺点

js缺点：

1. 查找元素的方法太少，麻烦。

2. 遍历伪数组很麻烦，通常要嵌套一大堆的for循环。

3. 有兼容性问题。

jquery优点

1. jquery查找元素的方法多种多样，非常灵活

1. 拥有隐式迭代特性，因此不再需要手写for循环了。

2. 完全没有兼容性问题。

3. 实现动画非常简单，而且功能更加的强大。

加载DOM区别

// JavaScript： 
// window.onload 
function first(){ 
    alert('first'); 
} 
function second(){ 
    alert('second'); 
} 
​
window.onload = first; 
window.onload = second; 
//只会执行第二个window.onload；不过可以通过以下方法来进行改进： 
window.onload = function(){ 
    first(); 
    second(); 
} 

// Jquery： 
// $(document).ready() 
​
$(document).ready(){ 
    function first(){ 
    alert('first'); 
} 
function second(){ 
    alert('second'); 
} 
$(document).ready(function(){ 
    first(); 
} 
$(document).ready(function(){ 
    second(); 
} 
//两条均会执行 
​
​

获取id、class、tagName

// JavaScript
// 获取id
document.getElementById('idName') 
// 获取class对象
JavaScript没有默认的获取class的方法 
// 通过tagName获取标签
document.getElementsByTagName('tagName') 
​
// JQuery：
// 获取id
$('#idName') 
// 获取class
$('.className') 
// 通过tagName获取标签
$('tagName') 

创建对象并加入文档中

// JavaScript： 
var para = document.createElement('p'); 
//创建一个p元素 
document.body.appendElement(para); 
//将p元素追加为body的lastchild子节点，如果想将新创建的p元素插入到已存在的某个元素之前，可以使用insertBefore()方法 
​
// JQuery：
// JQuery提供了4种将新元素插入到已有元素（内部）之前或者之后的方法：append()、appendTo()、prepend()、prependTo()。 
格式：$( html ); 
eg，html代码： 
<p>World!</p> 
$('p').append('<b>Hello!</b>'); 
//输出：<p>World!<b>Hello!</b></p> 
$('<b>Hello!</b>').appendTo('p'); //输出：同上 
$('p').prepend('<b>Hello!</b>'); 
//输出：<p><b>Hello!</b>World! </p> 
$('<b>Hello!</b>').prependTo('p'); 
//输出：同上 

删除节点

// JavaScript： 
reference = element.removeChild(node) 
removeChild()方法将一个给定元素里删除一个子节点 
​
// JQuery： 
remove(); 
remove()方法作用就是从DOM中删除所有匹配的元素，remove()方法还可以与其他的过滤选择器结合使用，非常方便。 
eg，将ul li下的title不是"Hello"的li移除： 
$('ul li').remove(li[title!='Hello']); 
empty(); 
empty()方法作用是清空节点。 

 

包裹节点

// JavaScript： 
JavaScript暂无 
​
// JQuery： 
wrap() //将匹配元素用其他元素的结构化标记单独包裹起来 
wrapAll() //将所有匹配的元素用一个元素包裹起来 
wrapInner() //将匹配元素的子内容用其他结构化的标记包裹起来 
​

替换节点

// JavaScript： 
reference = element.replaceChild(newChild,oldChild) 
// 该方法是将一个给定父元素里的一个子节点替换为另外一个节点。 
​
// JQuery： 
replaceWith()、replaceAll() 
eg: 
<p>hello</p> 
想替换为： 
<h2>Hi</h2> 
​
// JQuery代码： 
$('p') .replaceWith('<h2>Hi</h2>'); 
或者可以写成： 
$('<h2>Hi</h2>').replaceAll('p'); 
​

元素属性操作

设置属性节点、查找属性节点

// 改变元素的内容 
// JavaScript 
abc.innerHTML = "test"; 
​
// jQuery 
abc.html("test");
​
// 显示隐藏元素 
// JavaScript 
abc.style.display = "none"; 
abc.style.display = "block";
​
// jQuery 
abc.hide(); 
abc.show();
abc.toggle(); 
​
// 获得焦点
//JS和jQuery是一样的，都是
abc.focus();
​
// 为表单赋值 
// JavaScript 
abc.value = "test"; 
// jQuery 
abc.val("test");
​
// 获得表单的值 
// JavaScript 
alert(abc.value); 
// jQuery 
alert(abc.val());
​
// 设置元素不可用 
// JavaScript  
abc.disabled = true; 
// jQuery 
abc.attr("disabled", true);
​
// 修改元素样式
// JavaScript
abc.style.fontSize=size;
// jQuery
abc.css('font-size', 20);
​
// 修改class名
// JavaScript
abc.className="test";
// JQuery
abc.removeClass(); 
abc.addClass("test");
​
// Ajax调用
// JavaScript
// 自己创建对象，自己处理浏览器兼容等乱七八糟的问题，略去不表
​
// jQuery
$.get("abc.php?a=1&b=2", recall);
postvalue = "a=b&c=d&abc=123";
$.post("abc.php", postvalue, recall);
​
function recall(result) {
alert(result);
//如果返回的是json，则如下处理
//result = eval('(' + result + ')'); 
//alert(result);
}
​
// 判断复选框是否选中
//jQuery
// JQuery中设置和查找属性节点都是：attr() 。 
$('p').attr('title'); //获取p元素的title属性； 
$('p').attr('title','My title'); //设置p元素的title属性 
$('p').attr('title':'My title','class':'myClass'); //当需要添加多个属性时，可以用"名：值"对的形式，中间用逗号隔开。 
if(abc.attr("checked") == "checked")