JQ一些操作案例
链式编程
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./jquery.js"></script> <style> li{ height: 100px; width: 100px; background-color: hotpink; } </style> </head> <body> <ul> <li class="item">小苹果</li> <li>香蕉</li> <li>橘子</li> </ul> <script> var datas=["red","green","yellow"]; //(1) jquery 对象转化为js对象(js包含 jquery) //console.log($("li")[0])// 得到的是小苹果的js对象 // var item=document.getElementsByClassName("item")[0]; // //console.log(item)// 得到的是小苹果的js对象 // //(2) 让js对象转化为 jq 对象 // console.log($(item))///得到的是 jq 对象 // //color 加引号 链式编程 // $(item).css("color","red").click(function(){ // alert(111) // }); // //非链式编程 // $(item).css("color","green"); // $(item).click(function(){ // alert(888); // }); //着重记忆 // for (var i=0 ;i<datas.length;i++){ // $("li")[i].style.backgroundColor=datas[i]; // console.log(22) // } </script> </body> </html>
选项卡:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding:0; margin:0; } .active{ display: none; } </style> </head> <body> <div class="box"> <ul></ul> <div class="active"></div> </div> <form action="#"> <input type="text" value="123"> </form> <script src="jquery.js"></script> <script> $(function () { // val 如果有参数就是来设置text的值,没有参数就是获取值 // console.log($("input[type=text]").val("8888")) //html() 获取.box中所有的文字及标签 // console.log($(".box").html()); $(".box ul").html( ` <li><a href="javascript:void(0)">张三</a></li> <li><a href="javascript:void(0)">张三</a></li> <li><a href="javascript:void(0)">张三</a></li>` ); //点击 a标签的时候执行的操作 $(".box ul li a").click(function () { //排他思想 $(this).css("color","yellow").parent("li").siblings("li").find("a").css("color","green") //设置文本值,相当于 js中innerText $(this).text("wahah"); //获取值 var textVal=$(this).text(); var newVal=`<h1>${textVal}</h1>`; //innerHTML的封装 //设置值 //show() /hide() 是jquery封装的简便方法 $(".active").show().html(newVal) }); }) </script> </body> </html>
筛选选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="father"> <p>苹果</p> <a href="#">橘子</a> <span>臭美1</span> <span>臭美2</span> <span>臭美3</span> <span>臭美4</span> <div class="girl">刘亦菲 <span>周冬雨</span> </div> <div class="girl">刘亦菲 <span>夏雨荷</span> </div> </div> <script src="./jquery.js"></script> <script> $(function () { //选择指定元素的多有后代元素(子子孙孙) // console.log($(".father").find("p")) // $(".father").click(function () { //下方注意 下方注意 下方注意 // console.log(this)//得到的 js 对象 (.father 下的所有标签) // }); // 将会让.father所有标签内的字体变绿 // $(this).css("color", "green"); // }); // find 表示当前标签的所有后代,括号里面的表示要选的后代名字,在此处,有一个自代选择器 //表示选择 .father 下 .所有的.girl下的所有span // $(".father").find(".girl>span").click(function () { // console.log(this) // // }); //children 只选择亲儿子,不选择孙子,,children不指定参数,就选择所有的亲儿子 // console.log($(".father").children("span")) //parent 指的是亲爹 // console.log($(".girl span").parent()); //注意注意 //eq索引从0 开始,.father span 后代选择器 ,选择.father下的所有(子子孙孙)span, // i 为索引值 // var i =4; // console.log($(".father span").eq(i)) // // }); </script> </body> </html>
兄弟之间文档操作
<meta charset="UTF-8"> <title>Title</title> <script src="jquery.js"></script> </head> <body> <ul> <li class="li1">今晚吃什么</li> </ul> <script> $(function () { //兄弟后面加上 兄弟元素 方法一 $(".li1").after("<li class='noddle'>吃面条</li>") // 添加兄弟 方法二 $("<li>不吃发</li>").insertAfter(".noddle") // 替换兄弟 $(".li1").replaceWith("<li>吃肯德基</li>") }) </script> </body> </html>
JQ的ajax 请求
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" placeholder="请输入城市"> <input type="button" value="获取最新天气"> <div class="box"></div> <script src="jquery.js"></script> <script> $(function () { $("input[type=button]").click(function () { //线面这一句的val() 注意打红线 var cityVal=$("input[type=text]").val(); $.ajax({ //下面的模板字符串注意 url: `https://free-api.heweather.com/s6/weather/now?location=${cityVal}&key=4693ff5ea653469f8bb0c29638035976`, type:"get", //data 就是服务器返回的数据 success:function(data) { console.log(data); console.log(data.HeWeather6[0].now.tmp); console.log(data.HeWeather6[0].now.cond_txt); var tmp =data.HeWeather6[0].now.tmp; var nowTmp=`${tmp}℃`; // 将温度写到屏幕上 // $(".box").text(nowTmp); $(".box").html(nowTmp); }, error:function(err){ console.log(err) } } ); } ) }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .box{ width: 200px; height: 200px; background-color: red; display: none; } </style> </head> <body> <a href="javascript"></a> <div class="box"></div> <script src="jquery.js"></script> <script> $(function () { var HeWeather6Data = null; // https://free-api.heweather.com/s6/weather/now?location=beijing&key=4693ff5ea653469f8bb0c29638035976 //加载第一个和风天气的数据 var init = function(){ $.ajax({ url:`https://free-api.heweather.com/s6/weather/now?location=beijing&key=4693ff5ea653469f8bb0c29638035976`, type:'get', success:function (data) { //在这里阔以改变全局变量的值 // 不生命全局变量 这里直接赋值也是全局变量 HeWeather6Data = data; // console.log(data); var cityName = data.HeWeather6[0].basic.location; $('a').html(cityName) }, error:function (err) { console.log(err); }, }); // return HeWeather6Data } init(); $('a').mouseenter(function() { setTimeout(function () { $('.box').show(); console.log(HeWeather6Data); }, 1000) }); //函数对象 }); </script> </body> </html>
获取三天天气
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery.js"></script> <style> .box{ width: 100px; height: 100px; background: peru; display:none; } </style> </head> <body> <div class="box"> <ul> <li> <img src="" alt=""> </li> <li> <img src="" alt=""> </li> <li> <img src="" alt=""> </li> </ul> </div> <a href="javascript:void(0)"></a> <script> $(function () { var HeWeather6Data =null; var weatherArray = []; //定义普通函函数 function init(){ getNowWeather(); //获取未来三天的天气 getForecastWeather(); } //调用函数 init(); //获取实况天气函数 function getNowWeather() { $.ajax({ url:`https://free-api.heweather.com/s6/weather/now?location=beijing&key=4693ff5ea653469f8bb0c29638035976`, type:"get", success:function (data) { HeWeather6Data = data; var cityName = data.HeWeather6[0].basic.location; $("a").html(cityName); }, error:function (err) { console.log(err) } }); } function getForecastWeather() { $.ajax({ url:'https://free-api.heweather.com/s6/weather/forecast?location=beijing&key=4693ff5ea653469f8bb0c29638035976', type:"get", success:function(data){ console.log(data.HeWeather6[0].daily_forecast); weatherArray = data.HeWeather6[0].daily_forecast; }, error:function (err) { console.log(err); } }) } //设置循环定时器 更新预测三天的天气 setInterval(function () { getForecastWeather(); },6000000); $('a').mouseenter(function () { setTimeout(function () { $(".box").show(); //新的一种 遍历 方法 weatherArray.forEach(function(item,index){ console.log(item,index); //cond_code 指代天气状态码 var cond_code = item.cond_code_d; $(".box ul li img").eq(index).attr("src","https://cdn.heweather.com/cond_icon/100.png") $(".box ul li img").eq(index).attr("alt","https://cdn.heweather.com/cond_icon/100.png") }) },1000) }) }) </script> </body> </html>
请求数据处理情况
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .content{ display: none; } </style> </head> <body> <div class="box">alex</div> <div class="content"> <!-- <div class="item"></div> <div class="item"></div> <div class="item"></div> --> </div> <script src="jquery.js"></script> <script> $(function () { document.getElementsByClassName('box')[0].addEventListener('click',function () { alert(1); },false); $('.box').mouseenter(function(event) { $.ajax({ url:'https://free-api.heweather.com/s6/weather/forecast?location=beijing&key=4693ff5ea653469f8bb0c29638035976', type:"get", success:function (data) { console.log(data.HeWeather6[0].daily_forecast); var datas = data.HeWeather6[0].daily_forecast $('.content').show(); $('.content').empty(); //每次都要清空 datas.forEach(function(item,index) { // $('.content .item').eq(index).html(item.tmp_max); $('<div class="item"></div>').appendTo('.content').html(item.tmp_max); }) } }) }); $('.box').mouseleave(function() { $('.content').hide(); }); }) </script> </body> </html>
浙公网安备 33010602011771号