jQuery核心基础
<!-- 引入jquery.js库 -->
<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
用浏览器打开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>示例1</title> <!-- 引入jquery.js库 --> <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>示例2</title> <!-- 引入jquery.js库 --> <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>示例3</title> <!-- 引入jquery.js库 --> <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 = $("<h1 style='color:lime;font-size:24px'>我是中国人</h1>"); $('div').html($html); //将此对象设置为div的html内容 var prop = {"style":"color:red;font-size:50px", "value":"请填写您的姓名", "maxlength": 5 }; var text = $("<input />",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>示例4</title> <!-- 引入jquery.js库 --> <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> <!-- 引入jquery.js库 --> <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>示例5</title> <!-- 引入jquery.js库 --> <script type="text/javascript" src="../js/jquery-3.6.0.js"></script> <script type="text/javascript"> var names = ["折戟沉沙铁未销", "自将磨洗认前朝", "东风不与周郎便", "铜雀春深锁二乔"]; var div = $("<div></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"> <!-- <div></div> --> <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>示例5</title> <!-- 引入jquery.js库 --> <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>
