jQuery简便使用(中)
1、jQuyery和原生JavaScript加载的区别?
$(function(){});
$(document).ready(function(){});
window.onload = function(){}
/*
上面的这两种写法是一样的,只是上面一个是下面一个简写
那么前两个jQuery的写法和原生JavaScript写法和window.onload
有什么区别吗?jQuery中的两种写法是等待DOM树加载完毕就开始执行
而window.onload是等待HTML整个页面全部加载完毕后才执行的,理解了这些才能把握好页面加载的时机可以做一些操作。
*/
2、jQuery和JavaScript混合编程的入口?
<style type="text/css">
div{height: 100px;width: 100px;}
li{list-style: none;display: block;width: 200px;height: 100px;margin-bottom: 20px;}
</style>
<script type="text/javascript">
$(function(){
//document.getElementById(‘box‘) 原生JavaScript中获取元素的方法
$(‘#box‘).get(0).style.background = ‘blue‘;//jQuery中获取元素的方法和JavaScript混合编程的入口就是get()函数,这一行代码的前半段是用jQuery获取元素,然后使用JavaScript原生方法进行操作
/*
get()方法可以实现jQuery和原生JavaScript混用的效果,前提是在get()获取相应的元素之后,获取的元素可以是一个,也可以是多个,同时也可以用数组下标的方式。但是下面的$(‘li‘).length这种写法就不是混合写法了,因为jQuery中有length这个属性,所以要进行区分。
*/
for(var i = 0 ; i < $(‘li‘).length; i++){
//$(‘li‘).get(i).style.background = ‘green‘;
$(‘li‘)[i].style.background = ‘pink‘;
}
});
</script>
<div id="box">DIV ONE</div>
<ul>
<li>HTML5</li>
<li>jQuery</li>
<li>Bootstrap</li>
</ul>
3、jQuery数据序列化的两种方式?
现在web开发中最流行的两种数据交换格式是XML和JSON,其实他们是两个标准,规定了互联网上的数据进行交流的格式。下面是jQuery如何对数据怎样进行序列化获取到我们想要的数据格式。
<script type="text/javascript">
$(function(){
//username=JamesGosling&password=jQuery
console.log($(‘form‘).serialize());
//同时还可以将form中的值转换为JSON格式的数据
console.log($(‘form‘).serializeArray());
/*
[
[name:‘username‘,value=‘JamesGosling‘],
[name:‘password‘,value=‘jQuery‘]
];
返回这种JSON格式的数据,等以后学到了Ajax就会发现这种格式的传输格式非常便利。
*/
});
</script>
<form action="#" method="get">
用户名:<input type="text" name="username" value="JamesGosling">
密码:<input type="password" name="password" value="jQuery">
</form>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。