Jquery-01基础介绍

jQuery框架入门

document.getElementById(“mydiv”)

$(“#mydiv”)

1. 什么是jQuery

为什么叫jquery？ javascript + query

jQuery 就是一个JavaScript 框架，简化JS代码编写

宗旨： WRITE LESS,DO MORE 写得更少，做的更多

官网下载 jquery-版本.js

最新版 jquery 2.x ，企业主流 jquery1.x （1.4 1.8）

区别：

2.0不再支持IE6/7/8, 调用上无区别, 兼容1.9的API, 内核发生了变化.

1.x分支会继续发展下去.

课程以jquery1.11.0 学习（主要学习通用 API ）

jquery-1.11.0.js 原版源码

jquery-1.11.0.min,js 压缩版的js 互联网项目减少流量

学习jquery 主要参考官方API 和课外参考书

API分类

- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities

1. jQuery快速入门

第一步：创建web工程引入jquery的js

第二步：编写jsp代码

引入jquery的js

<!DOCTYPE html>

<html>

<head>

#mydiv {

background-color : yellow;

width:300px;

height: 300px;

}

</style>

// js页面加载函数

window.onload = function(){

alert("传统加载1...");

}

window.onload = function(){

alert("传统加载2...");

document.getElementById("mydiv").innerHTML = "传统js修改";

}

// jquery 页面加载函数

jQuery(function(){

alert("jquery 加载1...");

});

jQuery(function(){

alert("jquery 加载2...");

$("#mydiv").html("jquery 修改...");

});

</script>

</head>

<body>

</body>

</html>

1. jQuery核心函数

用法一：传入callback，页面加载函数

用法二：传入 expression 表达式

jquery给我们提供了9种选择器，编写不同的表达式，用来选择页面的标签对象。

用法三：传入elements （js对象 + dom对象）可以把elements转成jquery对象

用法四：传入html片段，将html片段转成jquery对象

<!DOCTYPE html>

<html>

<head>

// 1 页面加载函数

jQuery(function(){

//alert(123);

// 2 获取div标签中文本内容

//alert($("#mydiv").html());

// 3 遍历数组

var arr = [111,333,555];

jQuery(arr).each(function(){

//alert(this);

});

// 4 创建a标签追加到body中

var $a = $("<a href='http://www.baidu.com'>百度</a>");

jQuery("body").append($a);

});

</script>

</head>

<body>

hello, jquery!

</body>

</html>

1. jQuery函数的别名

<!DOCTYPE html>

<html>

<head>

// 1 页面加载函数

$(function(){

//alert(123);

// 2 获取div标签中文本内容

//alert($("#mydiv").html());

// 3 遍历数组

var arr = [111,333,555];

$(arr).each(function(){

//alert(this);

});

// 4 创建a标签追加到body中

var $a = $("<a href='http://www.baidu.com'>百度</a>");

$("body").append($a);

});

</script>

</head>

<body>

hello, jquery!

</body>

</html>

1. jQuery的对象

jquery对象是jquery所独有的，只有jquery对象才可以使用jquery的属性和方法。

dom对象无法调用jquery对象的属性和方法；

jquery对象也无法调用dom对象的属性和方法。

jquery对象和dom对象的相互转化：

注意：需要把jquery对象理解成是一个数组，并且第一个元素就是dom对象。

jquery对象 ----》 dom对象： jquery对象[0] 或者 jquery对象.get(0);

dom对象 ----》 jquery对象： $(dom对象)

开发规范约定：

var 变量名 = dom对象；

var $变量名 = jquery对象；

案例：页面一个div，然后修改div中的内容

<!DOCTYPE html>

<html>

<head>

$(function(){

//案例：页面一个div，然后修改div中的内容

// 传统js

// document.getElementById("myDiv").innerHTML = "传统js修改内容...";

// jquery

// $("#myDiv").html("jquery修改内容...");

// 传统js对象转成 jquery对象

// $(document.getElementById("myDiv")).html("传统js对象转成 jquery对象...");

// jQuery对象转成 js对象

// 需要把jquery对象需要理解成数组,第一个元素就是js对象

$("#myDiv")[0].innerHTML = "jQuery对象转成 js对象...";

});

</script>

</head>

<body>

<div id="myDiv">班里的帅哥太多了...</div>

</body>

</html>

猜你喜欢