JavaScript4：JSON、AJAX、；jQuery

it2023-10-15 82

JavaScript

JSON

//数据的封装 <script type="text/javascript"> //ES5没有类的概念有对象 ES6 class 类这个概念 //name age sex eat() sleep() function Student(name, age, sex) { //alert("构造函数调用了") this.name = name; this.age = age; this.sex = sex; this.eat = function() { alert("吃饭") } this.sleep = function() { alert("睡觉") } } var stu = new Student("张三", 23, "男"); var name = stu.name; var age = stu.age; var sex = stu.sex; stu.eat(); stu.sleep(); alert(name); alert(age); alert(sex); var obj = new Object(); obj.name = "王五"; obj.age = 100; obj.playGame = function() { alert("玩游戏") } obj.playGame(); alert(obj.name); alert(obj.age); </script> //JSON对象 <script type="text/javascript"> //JSON:/* JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。 */ //JSON：一种封装数据的格式，层次结构比较简单清晰，体积小，利于人们的阅读，因为他体积比较小，结构简单清晰，也作为了网络数据传输的首选格式。其他语言例如 Java 也是支持解析生成JSON格式的数据。 //学生的信息 name="张三" age=23 phone=100; //JOSN对象的格式 {"键":值,"键":值,"键":值} //键都是字符串类型，用双引号引起来 //值是任意类型：字符串，布尔，数字，数组，json 函数 //键值之间用冒号隔开 //多个兼职对之前用逗号隔开 var studentData={"name":"张三","age":23,"phone":"12344458897","eat":function(){alert("吃饭")}}; var name=studentData.name; var age=studentData.age; var phone=studentData.phone; studentData.eat(); alert(name); alert(age); alert(phone); </script> //JSON的嵌套 <script type="text/javascript"> var person = { "name": "张三", "age": 23, "sex": "男", "car": { "carName": "宝马", "price": 11111444.1, "carColor":["白色","红色","黑色"] } } //取黑色 var color=person.car.carColor[2]; alert(color); </script> //JSON数组 <script type="text/javascript"> var p1 = { "name": "张三", "age": 23, "sal": 1000 }; var p2 = { "name": "李四", "age": 24, "sal": 1000 }; var p3 = { "name": "王五", "age": 25, "sal": 1000 }; var p4 = { "name": "赵六", "age": 26, "sal": 1000 }; var arr = [p1, p2, p3, p4]; //JSON数组 var arr2 = [{ "name": "张三", "age": 23, "sal": 1000 }, { "name": "李四", "age": 24, "sal": 1000 }, { "name": "王五", "age": 25, "sal": 1000 }, { "name": "赵六", "age": 26, "sal": 10005555 }]; var v=arr2[3].sal; alert(v); </script> //JSON的遍历 for(key in p1){ var v=p1[key]; //alert(key+"=="+v); } for(index in arr2){ var jsonObj=arr2[index]; for(key in jsonObj){ var v=jsonObj[key]; alert(v); } } //JSON对象和JSON字符串的互转 <script type="text/javascript"> //JSON对象，我在js中对象.key var jsonObj={"name":"张三","age":23}; alert(jsonObj.name); //JSON格式字符串 var jsonStr='{"name":"李四","age":23}'; //因为其他语言，只能把JSON当成字符串来看待，那他返回给前台，是一个JSON字符串，前台要解析JSON字符串中的数据，就必须先把JSON字符串转换成JSON对象 //JSON字符串转换成JSON对象 var obj=JSON.parse(jsonStr); alert(obj.name); //注意的坑：1.就是JSON字符串不要美化（所谓的美化，就带有换行空格）那么你JSON.parse(jsonStr);就转换不了 //2.var jsonStr2="{'name':'李四','age':23}"; 这种格式的JSON字符串是不符合规范的，那么你JSON.parse(jsonStr2)转换不了 var jsonObj2={"name":"赵六","age":23}; //JSON对象转换成JSON字符串 var v=JSON.stringify(jsonObj2); alert(v); </script>

AJAX

/* AJAX AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。什么是 AJAX ？ AJAX = 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。 */ //原生的AJAX的使用 <body> <button type="button" onclick="sendRequest()">点击发送</button> </body> </html> <script type="text/javascript"> //1.创建Ajax对象 // XMLHttpRequest 对象 // 所有现代浏览器均支持 XMLHttpRequest 对象 // XMLHttpRequest 用于在后台与服务器交换数据。 // 这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 //1.创建Ajax对象 var xmlhttp = new XMLHttpRequest(); function sendRequest(){ //2.请求后台 //向服务器发送请求 //如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法： //打开链接 // http://wthrcdn.etouch.cn/weather_mini?city=商洛 xmlhttp.open("GET", "http://wthrcdn.etouch.cn/weather_mini?city=西安", true); //发送 xmlhttp.send(); //3.接收后台返回的JSON数据 // 服务器响应 // 如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 。 //前台准备好接收数据 //当 readyState 等于 4 且状态为 200 时，表示响应已就绪： xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { //xmlhttp.responseText; 接收后台响应的json数据 var jsonStr=xmlhttp.responseText; //document.write(jsonStr); var JsonObj=JSON.parse(jsonStr); alert(JsonObj.desc); } } } </script>

jQuery

//使用 <body> <button type="button">点击</button> </body> </html>  <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $('button').click(function(){ alert("点击") }) </script> //语法 //可以链式编程 <body> <button type="button" id="btn">一个按钮</button> </body> </html> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //var obj=$('#btn'); //var obj2=jQuery('#btn'); //var v=document.getElementById("btn"); //alert($==jQuery); /* var obj=$('#btn').css('background','red'); var obj2=obj.$('#btn').css('background','red');; obj2.css('color','#FFF'); */ $('#btn').css('background','red').css('font-size','50px').css('color','#FFF'); </script> //加载模式 <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //元素：标签。 /* window.οnlοad=function(){ //var btn = document.getElementById("btn"); //alert(btn); //$('button').css('background', 'red'); } */ //等待文档中的标签元素加载完成之后，调用。 $(document).ready(function(){ //$('button').css('background', 'red'); }) // 上面的可以简写 $(function(){ $('button').css('background', 'red'); }) </script> </head> <body> <button type="button" id="btn">一个按钮</button> <button type="button">阿斯顿发射点发生</button> </body> </html> <script type="text/javascript"> $('button').css('background', 'red'); </script> //对象互换 <body> <button type="button" id="btn">一个按钮</button> <input type="button" name="" id="bbtn" value="又是个按钮" /> </body> </html> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //alert($); //jQuery 对象方法内部 //JQuery对象 var obj=$('#btn'); //alert(obj); obj.css('background','red'); //原生的DOM对象 var obj2=document.getElementById("btn"); //alert(obj2); obj2.style.fontSize="50px"; //JQuery对象和原生DOM对象的互换。 //把JQuery对象转换成原生的DOM对象 var v=obj.get(0); //alert(v); v.style.color="#FFF"; //把元素DOM对象转换成Jquery对象。只需要把原生DOM对象，$(原生DOM对象) 这样来包裹一下。 var bbtn=document.getElementById("bbtn"); bbtn.style.color="#FFF"; //alert(bbtn); $(bbtn).css('background','yellow'); </script> //元素的选择 <body> <button type="button" id="btn1">按钮</button> <button type="button" class="bbb">按钮</button> <button type="button">按钮</button> <button type="button">按钮</button> <button type="button">按钮</button> <button type="button">按钮</button> <button type="button">按钮</button> <button type="button">按钮</button> <button type="button">按钮</button> <div id="wai"> <ul> <li><a href="">asdfasdfasdf</a></li> <li><a href="">asdfasdfasdf</a></li> <li><a href="">asdfasdfasdf</a></li> <li><a href="">asdfasdfasdf</a></li> <li><a href="">asdfasdfasdf</a></li> <li><a href="">asdfasdfasdf</a></li> <li><a href="">asdfasdfasdf</a></li> </ul> </div> <div id="d2"> <h1>阿斯顿发斯蒂芬</h1> <h1>阿斯顿发斯蒂芬</h1> <h1>阿斯顿发斯蒂芬</h1> <h1>阿斯顿发斯蒂芬</h1> <h1>阿斯顿发斯蒂芬</h1> <h1>阿斯顿发斯蒂芬</h1> <h1>阿斯顿发斯蒂芬</h1> <h1>阿斯顿发斯蒂芬</h1> <h1>阿斯顿发斯蒂芬</h1> <h1>阿斯顿发斯蒂芬</h1> </div> </body> </html> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> /* var btnArr=document.getElementsByTagName("button"); for(let i=0;i<btnArr.length;i++){ btnArr[i].style.background="blue"; } */ //var btn1=$('#btn1'); // $('button').css('background','red'); var arr = $('button'); //使用Jquery提供的一个遍历方法，来进行遍历 arr.each(function(index, ele) { //alert(index+"====="+ele); //alert(ele); if (index % 2 == 0) { $(ele).css('background', 'red') } else { $(ele).css('background', 'yellow') } }) //$('选择器') //$('div ul li a').css('font-size','50px'); $('#wai').find('ul').find('li').find('a').css('font-size', '50px'); $('#d2>h1').css('color','red'); $('#d2').children('h1').css('background','pink'); </script>

最新回复(0)