JQuery简单使用

JQuery

一、语法

<script src="jquery-1.8.3.min.js"></script>

导入Jquery

工厂函数，必须用

$(document).ready(function(){

​	alert("a");

});

$:代表Jquery，代替了Jquery这个单词

简写：

$(function(){
    
});

二、使用

$(function(){
    alert($("div p:first").text());
});
//选择偶数行,第一种写法
$(function(){
    $("div p:even").css("color","red");
});
//第二种写法，推荐，可以用一个语句写多个样式，用逗号隔开
$(function(){
    $("div p:even").css({"color":"red"});
});

css选择器在Jquery中都可以用

Jquery写序号注意：Jquery是脚本语言，过滤器序号从零开始

三、事件

1.点击

//单击，:odd 选择器选取每个带有奇数 index 值的元素，:even 选择器来选取偶数序号的元素。
$(function(){
    $("div p:odd").click(function(){
       $(this).css({"background-color":"red"}); 
    });
});
//双击
$(function(){
    $("div p:odd").dblclick(function(){
       $(this).css({"background-color":"red"}); 
    });
});
//鼠标移入
$(function(){
    $("div p:odd").mouseenter(function(){
       $(this).css({"background-color":"red"}); 
    });
});
//鼠标移出
$(function(){
    $("div p:odd").mouseleave(function(){
       $(this).css({"background-color":"#fff"}); 
    });
});
//鼠标移入+移出
$(function(){
    $("div p:odd").hover(function(){
       $(this).css({"background-color":"#fff"}); 
    },function(){a
        $(this).css({"background-color":"#fff"}); 
    });
});
//键盘按下事件，text括号中有值就传参，没有就获取标签中的值
$(function(){
    $("div input").keydown(function(){
 		$(this).next().text($(this).next().text()+"按下");
	});
	$("div input").keypress(function(e){
  		$(this).next().text($(this).next().text()+e.key);
	});
});

2.hover只在css和Jquery中有，Js中没有,hover = enter+leave

3.keypress按下可打印的字符才会触发，keydown只要按下就会出发

4.提交表单

submit：同步提交

​ focus：获取焦点

​ blur：失去焦点

$(function(){
    $("form input").focus(function(){
   		$(this).css({"background-color":"red"});
	});
	$("form input").blur(function(){
   		$(this).css({"background-color":"#fff"});
	});
	$("form input").blur(function(){
    	$(this).next().text("用户名重复");
	});
});

四、动画

$(function(){
   $(".nav2").css({"background-color":"#fff","width":"300px","height":"300px"});
   //显示隐藏
   $("button:eq(0)").click(function(){
       $(".nav2").show(1000);
   });
   $("button:eq(1)").click(function(){
       $(".nav2").hide(1000);
   }); 
   //淡入淡出
   $("button:eq(0)").click(function(){
       $(".nav2").fadeIn(1000);
   });
   $("button:eq(1)").click(function(){
       $(".nav2").fadeOut(1000);
   });
   //延申缩短
   $("button:eq(0)").click(function(){
       $(".nav2").slideDown(1000);
   });
   $("button:eq(1)").click(function(){
       $(".nav2").slideUp(1000);
   });
});

五、Ajax

http:协议，表示网络传输中按照那种方式传输，非安全协议，超文本传输协议

https:安全协议

Tcp/Ip：网络协议，三次握手，确保链接的安全性，三次发的包都有不同的含义(丢包)，这是个安全的协议，我们可以传输大量的数据也不会丢失。

udp：即时通信(飞秋)，不安全，传输速度快

同步和异步

1.同步刷新：整张页面都会被刷新。百度一下，点击按钮，整张页面刷新。

2.异步刷新：在不影响整张页面的情况下，对局部内容进行刷新，不会影响整个页面。速度快。异步刷新远大于同步刷新

Json对象

注意：变量名不能重名

var testJson = [{"name":"张三","age":"18","sex":"女"},
               {"name":"李四","age":"28","sex":"女"},
               {"name":"王五","age":"38","sex":"男"}];
//alert(testJson.name);
//alert(testJson.age);
//alert(testJson.sex);
for(tj in testJson){
    document.write(testJson[tj].name);
}

创建Json.txt

[{"name":"张三","age":"18","sex":"女"},
{"name":"李四","age":"28","sex":"女"},
{"name":"王五","age":"38","sex":"男"}]

Ajax

1.构建异步引擎

//Json
$(function(){
    $("input").blur(function(){
        /*
        $.ajax({
    		type : "get",
    		contentType : "application/json;charset=UTF-8",
   			url : "json.txt",
    		success : function(result){
                result = JSON.parse(result);
        		for(r in result){
                    if($("input").val() == result[r].name){
                        $("input").next().text("用户名重复");
                    }
                }
    		}
    	})*/
        //一般用这个
        $.getJSON("json.txt",function(result){
        	for(r in result){
               if($("input").val() == result[r].name){
                  $("input").next().text("用户名重复");
               }
            }
    	});
	});
});

<input type="text"></input><span></span>

success:如果链接成功，用回调函数

2.连接到服务器

3.发送请求

4.接受返回值

1~3:告诉服务器发什么内容

服务器运行需要时间(无法控制)，服务器处理完把信息返回到回调函数中。

回调函数：等响应从服务器回来之后调用的函数

六、和JS区别

JS拿元素：id，tagname，class

Jquery：代码必须放在工厂函数中，可以直接用css选择器