JQuery开篇基础（一）
1.jQuery简单介绍
1.在JS中操作DOM对象不方便，名字太长。为了简化JS对DOM的操作，jQuery产生了。
2.JQuery是一款跨主流浏览器的JS库，封装了JS相关方法调用，简化了JS对DOM的操作。
3.$在JS中是一个合法的标识符，被当做函数使用。根据dom对象的ID获取dom对象。
4.为什么使用jQuery？
1.免费、开源且轻量级的JS库，容量很小。
2.兼容市面上主流浏览器
3.能够处理HTML/JSP/XML、CSS、DOM、事件、实现动画效果，也能提供异步Ajax功能。
4.文档手册齐全、详细。
5.成熟的插件可供选择，多种JS组件。
6.有错误提示
5.jQuery优点演示
获取dom对象方式 JS定方式 JQuery方式
------------------------------------------------------------------------------------------
通过ID属性 document.getElementById() $("#id")
通过class属性 document.getElementsByClassName() $(".class名")
通过标签名 document.getElementsByTagName() $("标签名")
2.jQuery简单示例
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
<%--
1.$(document)：
1.$：jQuery中的函数名称 document：函数的参数
2.作用：把document对象变成jQuery函数库可以使用的对象
2.ready：
1.jQuery中的函数，相当于JS中的onload事件
2.作用：当页面中的dom对象加载成功后，会执行ready函数的内容
--%>
$(document).ready(function(){
alert("Hello jQuery！")
})
</script>
</head>
<body>
$END$
</body>
</html>
简写版：页面加载完成后
$(function(){
})
3.dom对象和jQuery对象
1.dom对象：
1.使用JS语法创建的对象
2.var obj = document.getElementById("txt1");
2.jQuery对象
1.使用jQuery语法创建的对象
2.jQuery表示的对象都是数组
3.var jobj = $("#txt1");
3.dom对象和jQuery对象转换
1.dom对象 ---> jQuery对象：$(dom对象)
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
function btnClick(){
var obj = document.getElementById("btn"); // 1.获取dom对象
alert("dom对象的属性:" + obj.value);
var $obj = $(obj); // 2.把dom对象转成jQuery对象
alert($obj.val()); // 3.val函数表示获取value的值
}
</script>
</head>
<body>
<input type="button" id="btn" value="==我是一个按钮==" onclick="btnClick()">
</body>
</html>
2.jQuery对象 ---> dom对象：[0]或者get{0}
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
function btnClick(){
// 使用jQuery语法获取dom对象
var obj = $("#txt")[0]; // 从数组中获取下标是0的dom对象
var num = obj.value;
obj.value = num * num;
}
</script>
</head>
<body>
<div>
<input type="button" value="计算平方" onclick="btnClick()"><br/>
<input id="txt" value="整数">
</div>
</body>
</html>
3.转换的目的：方便使用dom对象的属性或方法或者jQuery对象的函数。
浙公网安备 33010602011771号