jQuery核心基础
用浏览器打开html页面，如果能点开超链接访问jQuery的js，就是引入成功了
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>示例1title>
<script type="text/javascript" src="../js/jquery-3.6.0.js">script>
head>
<body bgcolor="skyblue">
<p id="p_1">锄禾日当午p>
<p>汗滴禾下土p>
<p class="c2">谁知盘中餐p>
<p>粒粒皆辛苦p>
body>
<script type="text/javascript">
script>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>示例2title>
<script type="text/javascript" src="../js/jquery-3.6.0.js">script>
head>
<body bgcolor="skyblue">
<form>
<input value="梦断红楼未可知"/><br>
<input value="西游路上有谁识"/><br>
<input value="三国争霸无人胜"/><br>
<input value="水浒逍遥总是痴"/><br>
form>
<br>
<form>
<input value="怒发冲冠"/><br>
<input value="凭栏处，潇潇雨歇"/><br>
<input value="抬望眼，仰天长啸，壮怀激烈"/><br>
form>
body>
<script type="text/javascript">
var inputArr = $('input',document.forms[1]);
alert(inputArr.length);
for(i=0;i<inputArr.length;i++){
alert(inputArr[i].value);
}
script>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>示例3title>
<script type="text/javascript" src="../js/jquery-3.6.0.js">script>
head>
<body bgcolor="skyblue">
<div>
div>
<form>
form>
body>
<script type="text/javascript">
var $html = $("我是中国人
");
$('div').html($html); //将此对象设置为div的html内容
var prop = {"style":"color:red;font-size:50px",
"value":"请填写您的姓名",
"maxlength": 5 };
var text = $("",prop);
$('form').html(text);
script>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>示例4title>
<script type="text/javascript" src="../js/jquery-3.6.0.js">script>
head>
<body bgcolor="pink">
<form action="">
<input value="大风起兮云飞扬"/><br>
<input value="威加海内兮归故乡"/><br>
<input value="安得猛士兮守四方"/><br>
form>
<h1>刘邦诗h1>
<p style="font-size: 26px;color: red">p>
<p style="font-size: 26px;color: red">p>
<p style="font-size: 26px;color: red">p>
body>
<script type="text/javascript">
var $inputArr = $('input',document.forms[0]);
$('p').each(function(i){
this.innerHTML = $inputArr[i].value;
});
script>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>判断是jQuery对象还是DOM对象title>
<script type="text/javascript" src="../js/jquery-3.6.0.js">script>
<script type="text/javascript">
function checkObjectType(obj){
if (obj instanceof jQuery) {
$('input').val(obj.text());
}else{
alert("不是jQuery对象");
$('input').val($(obj).text());
}
}
script>
head>
<body bgcolor="skyblue">
<button onclick="checkObjectType($(this))">点击检查是jQuery对象还是DOM对象button>
<br>
<input id="username" value="这是一个文本框"/>
body>
<script type="text/javascript">
var htmlText = document.getElementById("username");
//alert(htmlText.value);
//转换dom对象为jquery对象
var $htmlText = $(htmlText);
alert($htmlText.val());
//转换jQuery对象为Dom对象
htmlText = $htmlText[0]; //或者$htmlText[0]
alert(htmlText.value);
script>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>示例5title>
<script type="text/javascript" src="../js/jquery-3.6.0.js">script>
<script type="text/javascript">
var names = ["折戟沉沙铁未销",
"自将磨洗认前朝",
"东风不与周郎便",
"铜雀春深锁二乔"];
var div = $("");
function addData(){
//$('div').data('names',names);
div.data('names',names);
}
function showData(){
/*$($('div').data('names')).each(function(i){
alert(this);
});*/
$(div.data('names')).each(function(i){
alert(this);
});
}
function removeData(){
/*$('div').removeData('names');*/
div.removeData('names');
}
script>
head>
<body bgcolor="skyblue">
<button onclick="addData()">添加数据button>
<button onclick="showData()">显示数据button>
<button onclick="removeData()">清除数据button>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>示例5title>
<script type="text/javascript" src="../js/jquery-3.6.0.js">script>
<script type="text/javascript">
var arr = [ "one", "two", "three", "four"];
$(arr).each(function(i){
alert(this+i);
});
script>
head>
<body bgcolor="skyblue">
body>
html>