记得包尾部是".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接口