)
一、jQuery1.定义、作用及优缺点百度Ai2.下载jQuery官网jQuery版本兼容问题jQuery 详解含最新的3.x版本_jquery3.x-CSDN博客下载方法JQuery安装与下载教程-CSDN博客3.jquery使用jQuery官网jQuery API 文档注使用jQuery需引入js/jQuery*******.js文件script srcjs/jQuery*******.js/script script // * 代表所有字符只是举例不能这么写后面跟使用的版本复制路径即可 /scriptHTML:!DOCTYPE html html head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1 title练习1/title !-- script srchttps://code.jquery.com/jquery-1.12.4.min.js integritysha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQXp8a4MxAQ crossoriginanonymous/script -- style typetext/css /style script typetext/javascript srcjs/jQuery-v1.12.4.min.js/script script $(function() { alert($(.denglu)); $(.mulu).css({ background-color:red }) alert(111); }) /script /head body div iddiv12 div classdenglu iddenglu h2登录系统/h2 form idloginForm methodPOST div classform-group label foruseruser:/label input typetext nameuser iduser /div div classform-group label forpasswordpassword:/label input typepassword namepassword idpassword /div div button namesubmt登录/button /div /form /div /div div classmulu idmulu1 ul idul1 li idli0111 ulspan111/spana hrefhttps://www.baidu.com2 /a/ul /li li idli1222/li li idli0333/li li idli1444/li /ul ul idul2 li1/li li2/li li3/li li4/li /ul /div /body /html示例(js)var $div12 $(#div12); //#div12 为id名 // 与JavaScript 中document.getElementById(div12)类似 $div12.css({width:30px}); var $input $(input[nameuser]); //input 为标签name为input函数内属性名 var $duo $(.mulu ul #li0); var $div $(div); //div 为标签名,若有多个则会获取多个 var $divHasAbc123 $div.has(.mulu); //选择器过滤在$div后再筛选含有classmulu的标签; var $divEq1 $div.eq(1); //选择器过滤索引过滤下标0为第一个 var prev $div.prev(); // 获取上一级同级元素 var prevAll $div.prevAll(); // 获取上一级同级所有元素 var next $div.next(); // 获取下一级同级元素 var nextAll $div.nextAll(); // 获取下一级同级所有元素 var parent $div.parent(); // 获取父元素 var children $div.children(); // 获取所有子元素 var siblings $div.siblings(); // 获取其他同级元素 var find $div.find(#ul2); // 获取指定idul2的元素 $div.html(p111111111111/p) // 修改并覆盖标签div内容 $div.append(p111111111111/p) // 追加内容 $div.porp(class) //获取元素属性 $(input[nameuser]).val(1111) // 修改value值 $div.prop({id:id20240710,name:div1}) //设置元素属性,不会覆盖$(document).ready(function(){ //body... //$ 其本质为函数,函数名为:$ // ready 页面标签加载完成后会执行ready事件无需等待后面的资源数据 // 其缩写 $(function(){}) }); window.onload function(){ //body... //当前页面标签及标签内的资源数据都加载完成后才会触发 }); // 前者速度更快响应4.iQuery事件4.1 常用事件常用事件说明click()鼠标单击blur()元素失去焦点focus()元素获得焦点mouseover()鼠标进入mouseout()鼠标离开ready()DOM加载完成例$(ul li).click(function(){ $(this).css({color:red}) })4.2 object对象创建var obj1 new Object(); obj1.name 张三; obj1.age 18; obj1.show function(){ alert(obj1)}; var obj2 { name:张三, age:18, show:function(){alert(obj2)} };5.事件代理$(function(){ $(mulu1).click(function(){ $(this).css({color:yellow}); alert(mulu1); }) $(#ul1).click(function(){ $(this).css({color:red}); alert(ul1); // 若不想执行父事件可加入以下代码 // return False; }) })若点击标签ul1,事件会先执行点击事件$(#ul1)然后执行点击事件$(#mulu1);即事件会先从子事件慢慢向父事件传递。5.1 事件代理指定可通过父事件.delegate(子事件标签代理事件函数名执行事件函数)进行指定;$(function(){ // 1 $(#ul1).click(function(){ $(this).css({color:red}); alert(ul1); }) // 2 $(#mulu1).click(function(){ $(this).css({color:yellow}); alert(mulu1); }) // 3 $(#mulu1).delegate(#ul1,#ul2,click,function(){ $(this).css({width:40px,background:green}); alert(delegate111); }) })若点击#ul1标签则执行顺序为1-3-2;若点击#ul2标签则执行顺序为3-2;6. Jsonjson 是JavaScript的首字母缩写而JSON是类似于JavaScript对象的字符串是一种数据格式。它有两种格式第一种为对象格式第二种为数组格式。json例var Strjs1 {name:张三,age:18}; // 将数据转成JavaScript对象 var js2 JSON.parse(Strjs1);var Strjs1 [{name:张三,age:18},{name:李四,age:19}]; // 将数据转成JavaScript对象 var js2 JSON.parse(Strjs1);7. ajaxajax 是 Asynchronous JavaScript and XML 的简写。可以同时发送多个请求可以给局部位置使用也可实现前端与后台服务器的数据交互。Ajax不需要任何浏览器插件但需要用户允许JavaScript在浏览器上执行。百度介绍ajaxWeb数据交互方式_百度百科 (baidu.com)Ajax工作原理7.1 ajax使用(不太会会修改)使用1Ajax请求的五个步骤-CSDN博客jquery中$.ajax()可以执行这个请求。$.ajax({ // 请求地址 url:https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1pMnJb.img? h128w128m6, // 请求方式 type:GET, // 设置发送给服务器的数据 // data{name:张三,age:18}, // 设置响应体类型(url返回的数据格式不是js,不能用json) // dataType:json // 请求成功的回调函数 success:function (response) { console.log(response); }, // 请求异常的回调函数 error:function(){ alert(error!) }, // 是否异步 默认Ture // async:Ture });异步请求JQuery使用$.ajax()实现异步请求_jquery使用ajax发送异步请求获取数据-CSDN博客简写$.get() 和$.post():关于JQuery中$.get()和$.post()和$.ajax()的区别和使用-CSDN博客ajax:AJAX 教程 | 菜鸟教程 (runoob.com) 前端笔记——Jquery(4)
一、jQuery1.定义、作用及优缺点百度Ai2.下载jQuery官网jQuery版本兼容问题jQuery 详解含最新的3.x版本_jquery3.x-CSDN博客下载方法JQuery安装与下载教程-CSDN博客3.jquery使用jQuery官网jQuery API 文档注使用jQuery需引入js/jQuery*******.js文件script srcjs/jQuery*******.js/script script // * 代表所有字符只是举例不能这么写后面跟使用的版本复制路径即可 /scriptHTML:!DOCTYPE html html head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1 title练习1/title !-- script srchttps://code.jquery.com/jquery-1.12.4.min.js integritysha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQXp8a4MxAQ crossoriginanonymous/script -- style typetext/css /style script typetext/javascript srcjs/jQuery-v1.12.4.min.js/script script $(function() { alert($(.denglu)); $(.mulu).css({ background-color:red }) alert(111); }) /script /head body div iddiv12 div classdenglu iddenglu h2登录系统/h2 form idloginForm methodPOST div classform-group label foruseruser:/label input typetext nameuser iduser /div div classform-group label forpasswordpassword:/label input typepassword namepassword idpassword /div div button namesubmt登录/button /div /form /div /div div classmulu idmulu1 ul idul1 li idli0111 ulspan111/spana hrefhttps://www.baidu.com2 /a/ul /li li idli1222/li li idli0333/li li idli1444/li /ul ul idul2 li1/li li2/li li3/li li4/li /ul /div /body /html示例(js)var $div12 $(#div12); //#div12 为id名 // 与JavaScript 中document.getElementById(div12)类似 $div12.css({width:30px}); var $input $(input[nameuser]); //input 为标签name为input函数内属性名 var $duo $(.mulu ul #li0); var $div $(div); //div 为标签名,若有多个则会获取多个 var $divHasAbc123 $div.has(.mulu); //选择器过滤在$div后再筛选含有classmulu的标签; var $divEq1 $div.eq(1); //选择器过滤索引过滤下标0为第一个 var prev $div.prev(); // 获取上一级同级元素 var prevAll $div.prevAll(); // 获取上一级同级所有元素 var next $div.next(); // 获取下一级同级元素 var nextAll $div.nextAll(); // 获取下一级同级所有元素 var parent $div.parent(); // 获取父元素 var children $div.children(); // 获取所有子元素 var siblings $div.siblings(); // 获取其他同级元素 var find $div.find(#ul2); // 获取指定idul2的元素 $div.html(p111111111111/p) // 修改并覆盖标签div内容 $div.append(p111111111111/p) // 追加内容 $div.porp(class) //获取元素属性 $(input[nameuser]).val(1111) // 修改value值 $div.prop({id:id20240710,name:div1}) //设置元素属性,不会覆盖$(document).ready(function(){ //body... //$ 其本质为函数,函数名为:$ // ready 页面标签加载完成后会执行ready事件无需等待后面的资源数据 // 其缩写 $(function(){}) }); window.onload function(){ //body... //当前页面标签及标签内的资源数据都加载完成后才会触发 }); // 前者速度更快响应4.iQuery事件4.1 常用事件常用事件说明click()鼠标单击blur()元素失去焦点focus()元素获得焦点mouseover()鼠标进入mouseout()鼠标离开ready()DOM加载完成例$(ul li).click(function(){ $(this).css({color:red}) })4.2 object对象创建var obj1 new Object(); obj1.name 张三; obj1.age 18; obj1.show function(){ alert(obj1)}; var obj2 { name:张三, age:18, show:function(){alert(obj2)} };5.事件代理$(function(){ $(mulu1).click(function(){ $(this).css({color:yellow}); alert(mulu1); }) $(#ul1).click(function(){ $(this).css({color:red}); alert(ul1); // 若不想执行父事件可加入以下代码 // return False; }) })若点击标签ul1,事件会先执行点击事件$(#ul1)然后执行点击事件$(#mulu1);即事件会先从子事件慢慢向父事件传递。5.1 事件代理指定可通过父事件.delegate(子事件标签代理事件函数名执行事件函数)进行指定;$(function(){ // 1 $(#ul1).click(function(){ $(this).css({color:red}); alert(ul1); }) // 2 $(#mulu1).click(function(){ $(this).css({color:yellow}); alert(mulu1); }) // 3 $(#mulu1).delegate(#ul1,#ul2,click,function(){ $(this).css({width:40px,background:green}); alert(delegate111); }) })若点击#ul1标签则执行顺序为1-3-2;若点击#ul2标签则执行顺序为3-2;6. Jsonjson 是JavaScript的首字母缩写而JSON是类似于JavaScript对象的字符串是一种数据格式。它有两种格式第一种为对象格式第二种为数组格式。json例var Strjs1 {name:张三,age:18}; // 将数据转成JavaScript对象 var js2 JSON.parse(Strjs1);var Strjs1 [{name:张三,age:18},{name:李四,age:19}]; // 将数据转成JavaScript对象 var js2 JSON.parse(Strjs1);7. ajaxajax 是 Asynchronous JavaScript and XML 的简写。可以同时发送多个请求可以给局部位置使用也可实现前端与后台服务器的数据交互。Ajax不需要任何浏览器插件但需要用户允许JavaScript在浏览器上执行。百度介绍ajaxWeb数据交互方式_百度百科 (baidu.com)Ajax工作原理7.1 ajax使用(不太会会修改)使用1Ajax请求的五个步骤-CSDN博客jquery中$.ajax()可以执行这个请求。$.ajax({ // 请求地址 url:https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1pMnJb.img? h128w128m6, // 请求方式 type:GET, // 设置发送给服务器的数据 // data{name:张三,age:18}, // 设置响应体类型(url返回的数据格式不是js,不能用json) // dataType:json // 请求成功的回调函数 success:function (response) { console.log(response); }, // 请求异常的回调函数 error:function(){ alert(error!) }, // 是否异步 默认Ture // async:Ture });异步请求JQuery使用$.ajax()实现异步请求_jquery使用ajax发送异步请求获取数据-CSDN博客简写$.get() 和$.post():关于JQuery中$.get()和$.post()和$.ajax()的区别和使用-CSDN博客ajax:AJAX 教程 | 菜鸟教程 (runoob.com)