jQuery = ？
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。
jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。
它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery：是一个快速、简洁的JavaScript代码库，jQuery设计的宗旨是“write Less，Do More”。
1.jQuery使用
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8">
</script><script type="text/javascript">
//$不是特殊符号，只是1个变量的名称
console.log($)
console.log(jQuery)
console.log($==jQuery)
var h1 = document.querySelector('h1')
var h11 = $("h1") var h12 =
jQuery("h1")
console.log(h1)
console.log(h11)
console.log(h12)
</script>
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元素
<img src="img/cxk.gif"/>
<h1>-------------------------------------</h1>
<div id="main"></div>
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//可以追加html代码
$('#main').append("<h1>helloworld</h1>")
//可以追加既存在的元素对象
$('#main').append($("img"))
//删除元素
$(".delete").remove()
</script>
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)
}
})
