原生和jQuery使用对比
1.等待文档加载完成 原生JavaScript: window.ofsnload=function(){} jQuery: $(function(){}) 2.操作元素
-------原生JavaScript操作元素属性 ------- var 变量 = 元素.属性名 读取属性 元素.属性名 = 新属性值 改写属性 属性名在js中的写法: 1、html的属性和js里面属性写法一样 2、“class” 属性写成 “className” 3、“style” 属性里面的属性,有横杠的改成驼峰式,比如:“font-size”,改成”style.fontSize” <script type="text/javascript"> window.onload = function(){ var oInput = document.getElementById('input1'); var oA = document.getElementById('link1');
// 读取属性值 var sValue = oInput.value; var sType = oInput.type; var sName = oInput.name; var sLinks = oA.href; // 写(设置)属性 oA.style.color = 'red'; oA.style.fontSize = sValue; } </script>
<script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementById('div1'); //读取 var sTxt = oDiv.innerHTML; alert(sTxt); //写入 oDiv.innerHTML = '<a href="http://www.baidu.com">百度<a/>'; } </script> <div id="div1">这是一个div元素</div>
------- jQuery操作行间样式 ------ // 获取div的样式 $("div").css("width"); $("div").css("color");
//设置div的样式 $("div").css("width","30px"); $("div").css("height","30px"); $("div").css({fontSize:"30px",color:"red"}); 特别注意 : 选择器获取的多个元素,获取信息获取的是第一个,比如:$("div").css("width"),获取的是第一个div的width。
$('#myId') //选择id为myId的网页元素
$('.myClass') // 选择class为myClass的元素
$('li') //选择所有的li元素
$('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素
$('input[name=first]') // 选择name属性等于first的input元素
// 取出html内容 var $htm = $('#div1').html();
// 设置html内容 $('#div1').html('<span>添加文字</span>');
//prop() 取出或设置某个属性的值 // 取出图片的地址 var $src = $('#img1').prop('src');
// 设置图片的地址和alt属性 $('#img1').prop({src: "test.jpg", alt: "Test Image" }); 3.绑定事件格式 原生JavaScript:oBtn.οnclick=function(){} jquery-->$btn.click(function(){}) jQuery常用的:blur(失去焦点)focus(获得焦点)submit(提交)等;
**注意同样的事件原生的,会在事件前面加上"on" 如onmouseover\onmouseout等** 4.jQuery操作样式 $("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2 $("#div1").removeClass("divClass") //移除id为div1的对象的class名为divClass的样式 $("#div1").removeClass("divClass divClass2") //移除多个样式 5.jQuery特殊效果 fadeIn() 淡入 $btn.click(function(){ $('#div1').fadeIn(1000,'swing',function(){ alert('淡入效果'); }); });
fadeOut() 淡出 fadeToggle() 切换淡入淡出 hide() 隐藏元素 show() 显示元素 toggle() 切换元素的可见状态 slideDown() 向下展开 slideUp() 向上卷起 slideToggle() 依次展开或卷起某个元素 6.jQuery的链式调用 jquery对象的方法会在执行完后返回这个jquery对象,所有jquery对象的方法可以连起来写: $('#div1') // id为div1的元素 .children('ul') //该元素下面的ul子元素 .slideDown('fast') //高度从零变到实际高度来显示ul元素 .parent() //跳到ul的父元素,也就是id为div1的元素 .siblings() //跳到div1元素平级的所有兄弟元素 .children('ul') //这些兄弟元素中的ul子元素 .slideUp('fast'); //高度实际高度变换到零来隐藏ul元素