********************************什么是jQuery****************************
JS框架
其他前端框架 bootstrap、ExtJs、dojo、prototype等
口号: write Less,do more 写的更少,做的更多!
********************************如何使用jQuery****************************
一.引入jquery-2.1.4.js文件
<script src="../js/jQuery2.1.4/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
二.
$(document).ready(function(){
//当页面加载完毕以后 执行这里的代码
alert('Hello,jQuery!');
});
document也可以省略
可以简写成
$(function(){
alert('hello');
});
********************************DOM对象和jQuery对象的相互转换****************************
一. DOM对象----------->jQuery对象
var jQuery对象 = $(dom对象)
二. jQuery对象--------->dom对象
第一种方式
var dom对象 = jQuery对象[0];
第二种方式
var dom对象 = jQuery对象.get(0);
演示代码:
$(function(){
//一. dom对象----->jQuery对象
//var div1 = document.getElementById("div1");
//var $div1 = $(div1);
//alert($div1.html());//相当于 div1.innerHTML jQuery把以前dom对象常用的属性 都转换成方法了
//alert(div1.style.width);
//alert($div1.width());
//二.jQuery对象------>dom对象
//1.id选择器
var $div1 = $("#div1");
//1.第一种方式
//var div1 = $div1[0];
//2.第二种
var div1 = $div1.get(0);
alert(div1.innerHTML);
});
********************************模拟jQuery对象****************************
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
var $jQuery = {};
var div1 = document.getElementById("div1");
$jQuery["0"] = div1;
$jQuery.get = function(i){
return $jQuery[i];
}
alert($jQuery.get(0).innerHTML);
}
</script>
</head>
<body>
<div id="div1">我是div111</div>
</body>
</html>
****************$(document).ready() 和window.onload的区别(面试题)**********************
共同点: 都是页面加载完毕以后执行
区别:
一.window.onload 只能绑定一个事件,如果绑定多个 只有最后一个起作用
$(document).ready()可以绑定多个事件
二. window.onload 必须要等待页面中所有的dom对象以及dom对象相关联的对象全部加载完毕才执行
<img src="1.jpg"/>
$(document).ready()只要所有的dom对象加载完毕以后(没必要等待关联对象加载完毕)就可以执行
****************************jQuery中如何绑定事件处理函数**********************
js
dom对象.onclick = 事件处理函数
jQuery
jQuery对象.事件名(事件处理函数);
演示代码:
$(function(){
//给btn1绑定事件
var $btn1 = $("#btn1");
$btn1.click(function(){
alert('按钮被点击了');
});
});
$(document).ready(function(){
alert('页面加载完毕了')
});
********************************修改样式****************************
js
<div>111</div>
div对象.style.color = "red";
jQuery
jQuery对象.css("属性名","属性值");
$div1.css("color","#ffffff");
jQuery中的方法通常设计的时候遵循,两个属性是修改值,一个属性是获取值.例如
$div1.css("color","#ffffff");//修改color属性
$div1.css("color");// 获得color 属性
$div1.html();//获得div1的内部html代码
$div1.html("111");// 修改div1的内部html代码