JQuery

JQuery

多：功能多

快：实现功能快

好：好用

省：省代码，省时间

JavaScript + 查询（Query）

特点

• 轻量级JavaScript框架
• 应用广泛
• 免费开源，文档丰富
• 众多第三方js库都采用jQuery辅助编写

jQuery核心功能

• HTML元素选取：对dom元素选取
• HTML元素操作：对dom元素操作
• CSS操作：dom元素样式修改
• HTML事件函数：扩展JavaScript事件
• JavaScript特效和动画
• HTMLDOM遍历和修改
• AJAX：简化JavaScript对AJAX的调用
• Utilities：提供多种工具

JQuery使用

页面加载后操作

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script>
	//必须先引入js
	//$()：JQuery核心函数，获取DOM对象
    //ready():jQuery提供的事件函数，加载后响应
	//当加载完页面进行操作
	$(document).ready(function () {
		//后续操作
        ……
    });
</script>

获取jQuery对象

<script>
    var $name = $("#name");
    //DOM -> jQuery
    var username = document.getElementById("name");
    var $name = $(username);
    console.log($name);
    //jQuery -> DOM
    console.log($name.get());//返回元素数组
    console.log($name.get(0));//返回单个元素
    console.log($name.get(0).value = "韩梅梅");
</script>

jQuery选择器

基本语法：

$(“选择器表达式”)

过滤选择器

//单选
var sex = $("input[name = 'sex']:checked").val();
console.log(sex);
//多选
var like = $("input[name = 'like']:checked");
for(var i = 0;i < like.length;i++){
	console.log(like.get(i).value);
}
var likeArray =[];
$('input[name="like"]:checked').each(function(){
	likeArray.push($(this).val());
});
console.log(likeArray);

设置控件值

//设置输入控件的值、select控件选中
$("#name").val("李雷")
//设置checkbox、radio选中
$("#enable").prop('checked',true);
$("input[name='sex'][value='1']").prop("checked", true);

事件处理

带参调用

function opt(e) {
    var lan = e.data.ee;
}
lan.on("click", {ee:lan},opt);

公共事件绑定方式

on：绑定

$("#btn").on("click",function (){
    alert("Ok");
});

off：移除

特殊事件

//点击
$("#btn").click(function () {
    alert("Ok");
});
//窗口
resize
//滚动条
scroll

焦点

//失去焦点
$("input[name = 'username']").blur(function () {
	if($("input[name = 'username']").val() == ""){
		console.log($("input[name = 'username']").val());
		$("input[name = 'password']").attr("disabled","disabled");
	}
});

AJAX

注意： 是发送 json 格式的 字符串，而不是发送 json对象

$("#reg").click(function() {
    // 将表单数据转为 json 对象
    var jsonObj = $("#myform").serializeObject();
    console.log( jsonObj )
    //将json对象转为json字符串
    var jsonStr=JSON.stringify( jsonObj )
    console.log( jsonStr )
    $.ajax({
        type: "POST",
        url: "student",
        contentType: "application/json; charset=utf-8",
        data: jsonStr,//发送json字符串
        dataType: "json",
        success: function (data) {
            alert(1)
        },
        error: function (data) {
            alert(JSON.stringify(data));
        }
    });
});

解释： $("#myform").serializeObject() 在 jquery扩展方法-将表单数据转为json对象