jquery 第一章
1、本章目标
了解jquery
了解jquery和js的区别
掌握jquery的入门
掌握jquery对象和dom对象的区别
2、jquery简介
jquery是一个轻量级的JavaScript函数库
用于客户端浏览器
核心功能：
HTML元素选取和操作
HTML事件函数
css操作
ajax
jquery的优势：
1、轻量级
2、强大的选择器
3、浏览器的兼容性比较好
4、完善的ajax
.........
3、jquery安装
1、下载jquery的js文件
2、在页面中引入jquery的js文件
3、jquery的代码放在：
$(document).ready(functioin(){
//代码
});
$(function(){
//代码
});
上述的两种写法的功能：类似于window.onload,初始化加载
上述的两种写法的功能和window.onload区别：
1、window.onload等页面所有内容加载完成后才会执行
$(document).ready() 等页面结构加载完后才会执行
2、window.onload若有多个，只会执行最后一个
$(document).ready()若有多个，均被执行
4、jquery对象和dom对象
dom对象：页面中所有的元素节点
jquery对象：jquery对dom对象包装后产生的对象
通常:$("#元素id")
注意：dom对象和jquery对象不要混合使用
比如：获取文本框的值
js：value属性
jquery：val()方法
5、jquery对象和dom对象的相互转换（了解）
jquery对象转dom对象
（1）jquery对象[下标]
（2）jquery对象.get(下标)
将jquery对象当做dom对象数组，通过下标的方式进行访问
dom对象转jquery对象
$(dom对象)
6、$的冲突问题
jquery中封装了$符号，如果其他的框架也有$符号，可能会有冲突的问题
解决方案1：
jquery的引入没有先后顺序
在jquery代码中第一行加入：jQuery.noConflict(); 表示释放jquery对象中的$
比如：
<script>
jQuery.noConflict(); //释放jquery中的$符号
jQuery(funcion(){
jQuery("p").css("color","red");
});
</script>
解决方案2：
把jquery的引入放在最前面，再引入其他的框架
比如：
<script>
jQuery(function(){
$("p").css("color","red");
});
</script>
解决方案3：
把jquery的引入放在最前面，在引入其他框架
比如：
//闭包
(function($){
$("p").css("color","red");
})(jQuery);
本章代码
demo1
<html>
<head>
<script src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//onload只会执行最后一个
window.onload = function(){
alert('1');
}
window.onload = function(){
alert('2');
} //两个都会被执行
$(document).ready(function(){
alert('3');
});
$(function(){
alert('4');
});
</script> </head>
<body> </body>
</html>
demo2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script src="js/jquery-3.2.1.min.js"></script>
<script> $(document).ready(function(){
//js获取文本框的值
//为btn按钮绑定单击事件
document.getElementById("btn").onclick = function(){
var v = document.getElementById("txt").value;
alert(v);
} //jquery获取文本框的值
//为btn按钮绑定单击事件
$("#btn").click(function(){
//通过jquery对象写法,获取文本框对象的值
var v = $("#txt").val();
alert(v)
});
}); </script>
</head>
<body>
<input type="text" id="txt" />
<input type="button" value="获取文本框的值" id="btn"/>
</body>
</html>
demo3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script src="js/jquery-3.2.1.min.js"></script>
<script> $(document).ready(function(){
document.getElementById("btn").onclick = function(){
//获取文本框的dom对象
var v = document.getElementById("txt");
//将dom对象转为jquery对象
var v2 = $(v);
var v3 = v2.val();
alert(v3)
} $("#btn").click(function(){
//获取文本框的jquery对象
var v = $("#txt");
//将jquery对象转为dom对象
var v2 = v.get(0); //v[0];
var v3 = v2.value;
alert(v3)
});
}); </script>
</head>
<body>
<input type="text" id="txt" />
<input type="button" value="获取文本框的值" id="btn"/>
</body>
</html>
jquery 第一章的更多相关文章
- jQuery第一章
一.jQuery的优势 1.轻量级:压缩之后大小只有30KB左右. 2.强大的选择器:jQuery允许CSS1到CSS3几乎所有的选择器以及自身独创的选择器. 3.出色的DOM操作的封装:jQuery ...
- JQuery第一章js 上机+课后
=============上机1 包含字母 <!DOCTYPE html> <html> <head> <title>sj1.html& ...
- jQuery 第一章 $()选择器
jquery 是什么? jquery 其实就是一堆的js函数(js库),也是普通的js而已. 有点像我们封装一个函数,把他放到单独的js 文件,等待有需要的时候调用它. 那么使用它有啥好处呢? jqu ...
- 第一章 jQuery基础
第一章jQuery基础 一.jQuert简介 1.什么是jQuery jQuery是javaScript的程序库之一,它是javaScript对象和实用函数的封装. jQuery是继Prototype ...
- jQuery系列 第一章 jQuery框架简单介绍
第一章 jQuery框架简单介绍 1.1 jQuery简介 jQuery是一款优秀的javaScript库(框架),该框架凭借简洁的语法和跨平台的兼容性,极大的简化了开发人员对HTML文档,DOM,事 ...
- （李南江jQuery+Ajax）第一章：初识jQuery
第一章:初识jQuery 一.原生的JS与jQuery的区别 <!DOCTYPE html> <html lang="en"> <head> & ...
- 第一章：Javascript语言核心
本节是javascript语言的一个快速预览,也是本书的第一部分快速预览. 读此书之前,感谢淘宝技术团队对此javascript核心的翻译,感谢弗拉纳根写出此书.感谢你们无私的分享,仅以此笔记献给你们 ...
- jquery 第二章
1.本章目标 css样式 选择器2.css样式 宽.高.边框.背景颜色.字体....... <html> <head> <style> div{ ...
- javascript高级程序设计第一章有感
第一章JavaScript简介 Javascript的诞生最早是为了处理表单数据验证的问题,以前主要是使用perl这个强大的服务端脚本语言处理的.在未诞生javascript之前, 人们每次提交表单就 ...
随机推荐
- asp.net core Serilog的使用
先贴上关于使用这个日志组件的一些使用方法,等有时间了在吧官方的文档翻译一下吧,现在真是没时间. Serilog在使用上主要分为两大块: 第一块是主库,包括Serilog以及Serilog.AspNet ...
- Filter过滤要登录的页面（重要）
一.为什么要写过滤器,过滤页面? 本人做了一个网站,目前还在开发.做过滤器的目的就是为了要过滤一些页面必需要用户登录之后才能看,主页什么的可以随便看,一旦涉及到要发布或评论什么信息,就必须要过滤用户的 ...
- static与final区别
1. final final类不能被继承,没有子类,final类中的方法默认是final的 final方法不能被子类的方法复盖,但可以被继承 final成员变量表示常量,只能被赋值一次,赋值后不能 ...
- js DOM操作 容易犯的错误
这样一段html片段 <select class="form-control" id="course_chapter" onchange="fi ...
- jsp篇 之 jsp中的注释
Jsp中的注释: 第一种: <!-- html/xml中的注释方式 --> 特点: 1.用户在浏览器中右键查看源代码 [能] 看到这个注释. 2.在服务器端,这个jsp页面被翻译成的jav ...
- P2822 组合数问题 HMR大佬讲解
今天HMR大佬给我们讲解了这一道难题. 基本思路是: 可以将问题转化为:求出杨辉三角,用二维数组f[i][j]来表示在杨辉三角中以第i行第j列的点为右下角,第0行第0列处的点为左上角的矩阵中所有元素是 ...
- 设置 sql_mode
MySQL 的 sql_mode 合理设置 sql_mode 是个很容易被忽视的变量,默认值是空值,在这种设置下是可以允许一些非法操作的,比如允许一些非法数据的插入.在生产环境必须将这个值设置为严格模 ...
- Django 分页组件替换自定义分页
Django的分页器(paginator) 总之不太好用我们还是用自己的好一些 自定义分页器 分页实现源码 """ 自定义分页组件 """ ...
- [THUWC2017]随机二分图
题目大意 给一张二分图,有左部点和右部点. 有三种边,第一种是直接从左部点连向右部点,出现概率为50%. 第二种边一组里有两条边,这两条边同时出现或者不出现,概率都是50%. 第三种边一组里有两条边, ...
- opencv-python下简单KNN分类识别
KNN是数据挖掘中一种简单算法常用来分类,此次用来聚类实现对4种花的简单识别. 环境:python2.7+opencv3.0+windows10 原理:在使用KNN函数提取出4种花特征点以后,对需要辨 ...