jQuery 从入门到。。。
Posted 你是我的四月天
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery 从入门到。。。相关的知识，希望对你有一定的参考价值。
jQuery官网：http://jquery.com
jQuery在线API：http://api.jquery.com
jQuery UI:http://jqueryui.com
jQuery核心选择器Sizzle.js:http://sizzlejs.com
1、jQuery的ready事件与window.onload事件的区别：1）、window.onload需要等页面上全部加载完毕，其中包含页面中的标签引用的其它资源（整个页面需要加载完毕）；而jQuery的ready事件，只要等待页面上的所有标签加载完毕就能触发。所以说从用户的角度来说，使用jQuery事件会让用户感觉处理速度变快了
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="jQuery/scripts/jQuery-3.2.1.js"></script> <script type="text/javascript"> //1、javascript中页面加载完毕触发 window.onload = function () { }; //2、jQuery中页面加载完毕触发 //2.1、完整的写法 $(document).ready(function () { }); //2.2、简写 $(function () { }); //2.3、完整写法，jQuery的符号就是‘$’ jQuery(document).ready(function () { }); //2.4、简写 jQuery(function () { }); //3、以上jQuery的写法只是window.onload的类似写法，下面这才是和window.onload表达意思相同的写法 $(window).load(function () { }); </script> </head> <body> </body> </html>
2、$.each(obj,function(){});循环遍历键值对或数组
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jQuery/scripts/jQuery-3.2.1.js"></script>
<script type="text/javascript">
var arrInt = [1, 2, 3, 4, 5, 6, 7, 8];
$.each(arrInt, function (key,value) {
alert(key + ‘ , ‘ + value);
});
var p = { ‘name‘: ‘张三‘, ‘年龄‘: 20, ‘email‘: ‘[email protected]‘ };
$.each(p, function (key, value) {
alert(key + ‘ , ‘ + value);
});
</script>
</head>
<body>
</body>
</html>
3、$.map(obj,function(elements,index){});遍历数组或者键值对将返回值添加到新的数组或键值对
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jQuery/scripts/jQuery-3.2.1.js"></script>
<script type="text/javascript">
var arrInt = [10, 20, 30, 40, 50, 60, 70];
var newArr = $.map(arrInt, function (elements,index) {
if (index > 3) {
return elements * 2;
} else {
return elements;
}
});
alert(newArr);
</script>
</head>
<body>
</body>
</html>
4、jQuery对象和dom对象是可以互相转换的。
1）、当直接使用dom对象的时候会存在浏览器兼容问题，所以这时候可以把dom对象转换位jQuery对象，然后再操作。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jQuery/scripts/jQuery-3.2.1.js"></script>
<script type="text/javascript">
$(function () {
document.getElementById(‘btn1‘).onclick = function () {
//获得一个dom对象
var domObj = document.getElementById(‘div1‘);
//将dom对象转换位jQuery对象
var $jqObj = $(domObj);
//调用jQuery对象的text方法
$jqObj.text(‘Hello!‘);
}
});
</script>
</head>
<body>
<input type="button" name="name" value="添加" id="btn1"/>
<div id="div1" style="width:200px;height:200px;border:1px solid green;">
</div>
</body>
</html>
5、jQuery中的一些常用方法
1）、val方法：有参数表示设置文本框的值，无参数表示取得文本框中的值
2）、css方法：设置对象的样式，可以一个键值对一个键值对的设置，也可以一次性传一个键值对集合批量设置
3）、text方法和html方法：都可以设置超链接显示的文字，html可以显示图片
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jQuery/scripts/jQuery-3.2.1.js"></script>
<script type="text/javascript">
$(function () {
$(‘#btn1‘).click(function () {
//获取文本框对象
var $txt = $(document.getElementById(‘txt1‘));
//取得文本框中的内容，无参的val表示获取值
alert($txt.val());
//给文本框中设置值，有参的val表示设置值
$txt.val(‘啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊！‘);
//设置样式(传一对键值对一个一个设置)
$txt.css(‘border‘, ‘2px solid blue‘);
//设置样式（传一个键值对集合批量设置样式）
$txt.css({
‘border‘: ‘2px solid red‘,
‘width‘: ‘200px‘,
‘height‘:‘100px‘
});
var $alink = $(document.getElementById(‘a1‘));
$alink.text(‘百度一下你就知道‘);
$alink.html(‘百度两下你就不知道‘);
});
});
</script>
</head>
<body>
<input type="button" id="btn1" name="name" value="按钮" />
<input type="text" id="txt1" value="" />
<a id="a1" href="http://www.baidu.com">百度</a>
</body>
</html>
6、选择器
1）、id选择器：$(‘#id‘)
2）、标签选择器：$(‘p‘)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jQuery/scripts/jQuery-3.2.1.js"></script>
<script type="text/javascript">
$(function () {
$(‘#div1‘).css({
‘width‘:‘200px‘,
‘height‘: ‘200px‘,
‘background-color‘:‘red‘
});
$(‘p‘).css({
‘background-color‘: ‘red‘
});
});
</script>
</head>
<body>
<div id="div1"></div>
<p>吼吼吼吼吼吼吼吼吼</p>
<p>吼吼吼吼吼吼吼吼吼</p>
<p>吼吼吼吼吼吼吼吼吼</p>
<p>吼吼吼吼吼吼吼吼吼</p>
<p>吼吼吼吼吼吼吼吼吼</p>
<p>吼吼吼吼吼吼吼吼吼</p>
<p>吼吼吼吼吼吼吼吼吼</p>
</body>
</html>
3）、类选择器：$(‘.x‘)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jQuery/scripts/jQuery-3.2.1.js"></script>
<script type="text/javascript">
$(function () {
//选取所有应用了x类的元素
$(‘.x‘).css({
‘border‘:‘2px solid red‘
});
});
</script>
</head>
<body>
<div id="div1"></div>
<input class="x" type="button" />
<input class="x" type="text" />
<span class="x">哈哈</span>
<p class="x">春眠不觉晓</p>
</body>
</html>
以上是关于jQuery 从入门到。。。的主要内容，如果未能解决你的问题，请参考以下文章