js jquery
记得包尾部是".js"
自己下载一个iquery包，然后在<script>中引入，例如：
<script arc="1.js"></script> <script>alert($)</script>
引用了之后要输入其他东西，必须重新写一行<script>,然后在那一行中的<script>中写
上面一行代码引入包，下面输入代码，点击运行后出现
function(e,t)(return new S.fn.init(e,t))
就证明代码没什么问题
JS的alert，作用是在浏览器中弹出一个警告框
而使用alert，有三种方式，不同的方式，所呈现的效果也不相同
第一种方式：直接写在script标签中
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> alert("这是一个警告框"); </script> </head> <body> <p>你看我出不出来</p>； </body> </html>
本该被执行的p标签都没有被执行，
是因为该方法使用alert，则alert以后的代码，最开始都不会被执行
只用在关闭警告框以后，才会执行后面的内容
第二种方式：写在body中的某个标签内部
<body> <!--将alert编写到onclick属性中，单击后，会弹出警告框--> <button onclick="alert('点，点什么点')">你点我一下</button><br /><br /> <!--将alert写在超链接的href属性中，点击超链接，会弹出警告框--> <a href="javascript:alert('叫你别点，你非要点')">别点我</a><br /> <p>你看我出不出来</p> </body>
用这种方式，一个页面中 alert可能出现很多地方，不方便维护，也不推荐使用
第三种方式：使用外部alert
外部alert代码如下：
alert("这是外部alert");
//重新创建一个js文件，专门用于写alert
引用外部alert的代码如下:
<script type="text/javascript" src="alert.js"> /*加入src="路径"，可以引入外部alert*/ alert("这是一个警告框"); </script>
jQuery语法实例
$(this).hide()
演示jQuery hide函数，隐藏当前的HTML元素
$("#test").hide()
演示jQuery hide函数，隐藏id="test"元素
$("p").hide()
演示jQuery hide函数，隐藏所有<p>元素
$(".test").hide()
演示jQuery hide函数，隐藏所有class="test"元素
文档就绪函数
等整个页面全都加载完以后才可以继续运行括号内的代码
$(document).ready(function{
});
jQuery元素选择器
$("p")选取<p>元素
$("p.intro")选取所有class="intro"的<p>元素
$("p#demo")选取所有id="demo"的<p>元素
jQuery属性选择器
jQuery使用XPath表达式来选择带有给定属性的元素
$("[href]")选取所有带有herf属性的元素
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
jQuery CSS选择器
把所有p元素的背景颜色改为红色
$("p").css("background-color","red");
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").css("background-color","red"); }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button type="button">Click me</button> </body> </html>
| $(this) | 当前 HTML 元素 |
| $("p") | 所有 <p> 元素 |
| $("p.intro") | 所有 class="intro" 的 <p> 元素 |
| $(".intro") | 所有 class="intro" 的元素 |
| $("#intro") | id="intro" 的元素 |
| $("ul li:first") | 每个 <ul> 的第一个 <li> 元素 |
| $("[href$='.jpg']") | 所有带有以 ".jpg" 结尾的属性值的 href 属性 |
| $("div#intro .head") | id="intro" 的 <div> 元素中的所有class="head"元素 |
$("button")定位到button标签
$("button").click(） 点击button触发里面的事件
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
一个p标签会被隐藏的事件
| $(document).ready(function) | 将函数绑定到文档的就绪事件（当文档完成加载时） |
| $(selector).click(function) | 触发或将函数绑定到被选元素的点击事件 |
| $(selector).dblclick(function) | 触发或将函数绑定到被选元素的双击事件 |
| $(selector).focus(function) | 触发或将函数绑定到被选元素的获得焦点事件 |
| $(selector).mouseover(function) | 触发或将函数绑定到被选元素的鼠标悬停事件 |
jQuery hide()和show()
通过jQuery,您可以使用hide()和show()方法来隐藏和显示HTML元素
jQuery toggle()
切换hide()和show()方法
点击一下，隐藏，再点击一下，显示
括号内可以设置速度
淡入fadeIn()
$(selector).fadeIn(speed,callback);
speed可以取:"slow"、"fast"或毫秒
淡出fadeOut()
fadeToggle()
切换fadeIn()和fadeOut()方法
滑动Toggle()
slideToggle()
动画 animate()方法
$(selector).animate({params},speed,callback);
$("button").click(function(){
$("div").animate({left:'250px'});
});
获取内容和属性
text()设置或返回所选元素的文本内容
html()设置或返回所选元素的内容（包括HTML标记）
val()设置或返回表单字段的值
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ alert("Value: " + $("#test").val("返回的内容")); }); }); </script> </head> <body> <p>姓名：<input type="text" id="test" value="米老鼠"></p> <button>显示值</button> </body> </html>
attr()
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ alert($("#w3s").attr("href")); }); }); </script> </head> <body> <p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p> <button>显示 href 值</button> </body> </html>
17素材网
jQuery first()
first() 方法返回被选元素的首个元素。
$(document).ready(function(){
$("div p").first();
});
last()返回最后一个元素
eq()返回被选元素中带有指定索引号的元素
索引号从0开始
filter()允许规定一个标准，不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回
not()返回不匹配标准的所有元素
AJAX=异步
在不重载整个网页的情况下，AJAX通过后台加载数据，并在网页上进行显示
$(document).ready(function(){
$("button").click(function(){
$.get("网址",function(data,status)){
alert("数据"+data.city+"状态："+status);
};
});
});
循环接口里面所有的值
$(document).ready(function(){
$("button").click(function(){
$.get("网址",function(data,status){
var json=data.data;
$.each(json,function(index,value){
alert(index+' '+value.day);
})
});
});
});
<!DOCTYPE html> <html> <head> <script src="1.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $.get("https://www.tianqiapi.com/api?version=v1&appid=21375891&appsecret=fTYv7v5E&city=%E7%A6%8F%E5%B7%9E",function(data,status){ var json =data.data; // $.each(json,index){ // var date =json[index].date; // var day =json[index].day; //} $.each(json, function(index, value) { alert(index + ': ' + value.day); }) //for(var index in json){ //其实index 就是个索引 // var date =json[index].date; //} // alert("数据：" + json + "\n状态：" + date); }); }); }); </script> </head> <body> <button>向页面发送 HTTP GET 请求，然后获得返回的结果</button> </body> </html>
各种天气接口：https://www.nowapi.com/api/weather.today
接口：https://www.tianqiapi.com/api?version=v1&appid=21375891&appsecret=fTYv7v5E&city=%E7%A6%8F%E5%B7%9E
$.each(json,function())
免费api接口
浙公网安备 33010602011771号