没有合适的资源?快使用搜索试试~ 我知道了~
jQuery总结1
需积分: 0 0 下载量 8 浏览量
2022-08-03
20:59:53
上传
评论
收藏 2.31MB PDF 举报
温馨提示
试读
77页
1、代码示例 2、执行代码 1、基本介绍 2、代码示例 1、 JS 对象与 jQ 对象的区别 2、转换原因 3、转换语法 4、代码示例 5、执行结果 6、总结
资源详情
资源评论
资源推荐
1- 入门函数
jQuery 是一个 JavaScript 的开发框架
1.1 jQuery优势
提高开发效率,降低开发难度,降低开发成本。 jQuery 框架是一个免费开源框架。
jQuery 框架也是使用 JavaScript 开发出来,本质上 jQuery 框架就是JS代码。
1、代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初识jQuery</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
border: 1px solid #000;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<div></div>
<div class="box1"></div>
<div id="box2"></div>
<script type="text/javascript">
// 原生js
window.onload = function (event){
console.log("---原生JS--");
// 1.利用原生JS的查找DOM元素
let div1 = document.getElementsByTagName("div")[0];
let div2 = document.getElementsByClassName("box1")[0];
let div3 = document.getElementById("box2");
// 输出结果
console.log(div1);
console.log(div2);
console.log(div3);
// 2.利用原生的js修改背景颜色
/*div1.style.backgroundColor = "red";
div2.style.backgroundColor = "blue";
div3.style.backgroundColor = "yellow";*/
}
// jq方式
$(function (){
console.log("---jQuery方式---");
2、执行代码
1.2 jQuery特点
1、基本介绍
轻量级:框架本身很小,占用资源少。
兼容性:可以运行在所有主流的浏览器上。
插件:本身还支持大量的插件。
宗旨: write less do more 。
2、代码示例
准备 jquery 框架,复制到项目中 js 目录下
在 HTML 中使用 script 标签导入 jquery.js 文件就可以使用了
let $div1 = $("div");
let $div2 = $(".box1");
let $div3 = $("#box2");
// 输出结果
/*console.log($div1);
console.log($div2);
console.log($div3);*/
$div1.css({
background:"red",
width:"200px",
height:"200px"
});
$div2.css({
background: "blue"
});
$div3.css({
background: "yellow"
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
操作 方法
将JS对象-->jQuery对象 $(JS对象)
将jQuery对象--> JS对象 JQ 对象 [0] 或 JQ 对象 .get(0)
1.3 转换
在 jQuery 框架中使用过程中,有 JS 对象和 JQ 对象之分。
1、 JS 对象与 jQ 对象的区别
JS 对象:通过以前的 JS 代码得到的对象,如: document.getElementById() ,只能使用 JS 中
方法和属性。
jQuery 对象:通过 JQ 选择器得到的对象,可以使用 JQ 中提供的方法,JQ对象本质上是一个JS数
组。
2、转换原因
JS 对象只能使用以前JS的方法和属性,不能使用 JQ 对象的方法。 JQ 对象中有很多功能强大方法,如
果 JS 对象要调用 JQ 对象,就必须将 JS 对象转换成 JQ 对象。反之亦然。
3、转换语法
4、代码示例
<title>jQuery的导入</title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<script type="text/javascript">
/*
参数是一个匿名函数,这个函数功能相当于:
window.onload = function() 页面加载完毕以后自动执行的代码
*/
$(function () {
//我们的代码写在这里
alert("Hello jQuery");
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS对象与JQ对象转换</title>
<script src="js/jquery-3.1.1.js"></script>
</head>
<body>
<h2>JS对象与JQ对象的转换</h2>
<input type="text" id="name" value="我太难了">
<input type="button" id="b1" value="JS得到值">
<input type="button" id="b2" value="JQ得到值">
<script type="text/javascript">
//JS对象的方法
5、执行结果
6、总结
document.getElementById("b1").onclick = function () {
//文本框对象,是JS对象
let name = document.getElementById("name");
//JS->JQ对象
let jq = $(name);
//得到文本框的值
//var value = name.value;
//调用jq对象的方法
let value = jq.val();
//显示出来
console.log("js-jquery:" + value);
}
//JQ对象的方法,方法参数就是事件处理函数
$("#b2").click(function () {
//1.文本框对象,JQ对象
let name = $("#name");
//jQ-> JS对象
//var js = name[0];
let js = name.get(0);
let val = js.value;
//2.得到文本框中值,调用jq对象的方法,得到值
//var val = company.val();
//3.显示出来
console.log("jquery-js:" + val);
});
</script>
</body>
</html>
操作 方法
将JS对象-->jQuery对象 $(JS对象)
将jQuery对象--> JS对象 JQ 对象 [0] 或 JQ 对象 .get(0)
1.4 jQuery和jS入口函数
1、代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery和js的区别</title>
<script src="js/jquery-3.1.1.js"></script>
<script type="text/javascript">
window.onload = function (event){
console.log("--js原生实现--")
// 1.通过原生的JS入口函数可以拿到DOM元素
let image = document.getElementsByTagName("img")[0];
console.log(image);
// 2.通过原生JS入口函数可以拿到DOM元素
let width = window.getComputedStyle(image).width;
console.log(width);
}
$(document).ready(function (){
console.log("---jquery实现---")
// 1.通过jQuery入口函数可以拿到DOM元素
let $img = $("img");
console.log($img);
// 2.通过jQuery入口函数不可以拿到DOM元素的宽高
let $width = $img.width();
console.log($width);
});
/*
1.原生的JS如果编写了多个入口函数,后面编写的会覆盖前面编写的
2.jQuery中编写多个入口函数,后面的不会覆盖前面的
*/
window.onload = function (event){
console.log("JS-hello guardwhy1");
}
window.onload = function (event){
console.log("JS-hello guardwhy2");
}
$(document).ready(function (){
console.log("jQ-hello guardwhy01");
});
$(document).ready(function (){
console.log("JQ-hello guardwhy02");
});
</script>
剩余76页未读,继续阅读
袁大岛
- 粉丝: 31
- 资源: 305
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0