jQuery目标:
让我们更快更简单的去进行dom操作
前提是我们必须适应jquery的api
取得<input>标签中的value属性的内容
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery入门</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
</head>
<body>
<input id="inputID" type="button" value="这就是jQuery库,写少代码,做多事情"/>
<div id="divID">哈哈哈</div>
<script type="text/javascript">
// jquery目标:让我们更快更简单的去进行dom操作
// 前提是我们必须适应jquery的api
// 取得<input>标签中的value属性的内容
var v1 = document.getElementById("inputID").value;
console.log(v1)
var html1 = document.getElementById("divID").innerHTML;
console.log(html1)
var v2 = $("#inputID").val();
console.log(v2)
var html2 = $("#divID").html();
console.log(html2)
</script>
</body>
</html>
jQuery对象是什么?
我们如果需要使用jquery,就必须使用jquery的api,也就是jquery提供的方法
jquery的方法一般会返回一些对象。这些使用jquery方法返回的对象我们称为jquery对象
js对象?使用js的api产生的一些结果我们称为js对象
js对象与jquery对象不能混用
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>js对象和jquery对象的相互转换</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
</head>
<body>
<input id="inputID" type="button" value="这就是jQuery库,写少代码,做多事情"/>
<div id="divID">哈哈</div>
<script type="text/javascript">
// jquery对象是什么?
// 我们如果需要使用jquery,就必须使用jquery的api,也就是jquery提供的方法
// jquery的方法一般会返回一些对象。这些使用jquery方法返回的对象我们称为jquery对象
// js对象?使用js的api产生的一些结果我们称为js对象
// js对象与jquery对象不能混用
/*取得<input>标签中的value属性的内容[js对象->jquery对象]*/
var input1 = document.getElementById("inputID");
var $input1 = $(input1);
console.log($input1.val())
//取得<div>标签中的文本内容[jquery对象->js对象]
var $input2 = $("#inputID");
console.log($input2[0].value)
console.log($input2.get(0).value)
</script>
</body>
</html>