190711-02(jQuery 初见){content}

jQuery = ？

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。

jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。

它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

---

 jQuery：是一个快速、简洁的JavaScript代码库，jQuery设计的宗旨是“write Less，Do More”。

1.jQuery使用

2.修改DOM元素的内容

//设置和修改HTML的内容

$('h1').

html('今晚吃啥？');

document.querySelector("h1").innerHTML = "今晚吃啥？"

//获取DOM对象上的内容,不传参数就是获取内容

var html = $('h1').html()console.log(html)

3.修改DOM元素的属性

//设置和修改dom元素的属性

$('img').attr("src","img/cxk.gif")

//获取dom属性的值

var imgSrc = $("img").attr("src")console.log(imgSrc)

4.修改DOM元素的样式

※注意：属性是由多个单词组成，那么key要用引号引起来，或者使用驼峰命名法，如下所示

//一次性设置多个样式

$(".abc").css({

background:"skyblue",

color:"#fff",

"border-bottom":

"10px solid purple",

borderTop:"10px solid yellow"

})

//一次性只设置1个样式

//$(".abc").css("border","10px solid pink")

4-1.添加和删除classname

$('button').click(function(e){

console.log($('.d1').attr("class"))

if($('.d1').attr("class")=="d1"){

$('.d1').addClass("swiper");//添加类名

}else{

$('.d1').removeClass("swiper");//删除类名

}

//$('.d1').addClass("swiper");

//$('.d1').toggleClass("swiper");//切换类名

})

5.插入和删除DOM元素

-------------------------------------

6.DOM相关的事件

语法：$('css选择器').事件名称(function(事件对象){})

$(".d1").click(function(e){

console.log("1")

})

$(".d1").click(function(e){

console.log("2")

})

$('body').keypress(function(e){

console.log(e)

})

7.jQuery的Ajax的使用方式

只能用于GET请求

$.get()

$.get('dati.json',function(res){

console.log(res)

})

只能用于POST请求

$.post()

$.post("dati.json",function(res){

console.log(res)

})

既可以GET方法请求又可以POST方法请求

$.ajax()

$.ajax({

url:'dati.json',

method:"GET",

success:function(res){

console.log(res)

    }

}) 

※例·天气实况

var httpUrl = "https://free-api.heweather.net/s6/weather/now?location=beijing&key=c8b18212397748599a7fb0bfa1022b56";

var hUrl = "https://free-api.heweather.net/s6/weather/now";

var loc = "beijing";

var weatherKey = "c8b18212397748599a7fb0bfa1022b56" ;

var data = {

location:loc,

key:weatherKey

}

//get方法

$.get(httpUrl,function(res){

console.log(res)

})

//get，请求data方法（与get方法输出内容一致）

$.get(hUrl,data,function(res){

console.log(res)

})

//Ajax方法 （与get方法输出内容一致）

$.ajax({

url:hUrl,

method:"GET", 

data:data,

success:function(res){

console.log(res)

    } 

})