首页 > 代码库 > jQuery 从入门到。。。
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="http://www.mamicode.com/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="http://www.mamicode.com/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‘: ‘123@yaho.com‘ };
$.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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/添加" 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="http://www.mamicode.com/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="http://www.mamicode.com/按钮" />
<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="http://www.mamicode.com/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="http://www.mamicode.com/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 从入门到。。。
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。