jQuery是一个JavaScript框架,学习jQuery只需要将对应js库下载,并导入到我们项目下进行引用。
1.JQuery和js的转换
js对象转换成jQuery对象,语法:$ (js对象)jQuery对象转换成js对象,语法:$username[index]//js 的方式//页面加载完毕,获取文本框的value属性值//JS的方式window.οnlοad=function(){var val = document.getElementById("in").value;alert(val+"JS");}//Jquery方式$(function(){var val = $("#in").val();alert(val);});
2.Jq的选择器
1.标签选择器
(元素选择器):$("html标签名") //jQuery数组
id选择器:$("#id的属性值") //jQuery对象
类选择器:$(".class的属性值") //jQuery数组
2.层级选择器
1.获得A元素内部的所有的B元素:$("A B ") $("body div").css("background-color","#FF0000"); //选择所有body的后代div标签,层级选择器
2.获得A元素下面的所有B子元素:$("A > B") $("body>div").css("background-color","#FF0000"); //选择body的子标签div
3.获得A元素同级下一个B元素:$("A + B") $("#one+div").css("background-color","#FF0000"); //id为one的下一个div
4.获得A元素同级所有后面B元素:$("A ~ B") $("#two~div").css("background-color","#FF0000"); //id为two后的所有兄弟div
3.属性选择器
获得有属性名的元素:$("A[属性名]")
获得属性名 等于 值 元素:$("A[属性名=值]")
复合属性选择器,多个属性同时过滤:$("A[属性名!=值][属性名!=值[属性名!=值]")
3.状态设置
//获得hobby的选中状态 设置为不选中的状态
alert($("#hobby").prop("checked"));
$("#hobby").prop("checked",false);
4.节点的增删位置修改
//将反恐放置到city的后面
$("#city").append($("#fk"))
//将反恐放置到city的最前面:prepen
$("#city").prepend($("#fk")) //放在最前面
//将反恐插入到天津后面:after();
$("#tj").after($("#fk"))
//删除
$("#bj").remove();
//删除所有的子节点 清空元素中的所有后代节点(不包含属性节点).
$("#city").empty(); //innerHTML = "";
5.隔行换色
//奇数变红 odd奇数 even偶数
$("tr:gt(1):odd").css("background-color","red");
//偶数变蓝
$("tr:gt(1):even").css("background-color","blue");
6.全选全部选
$("#selectAllId").click(function(){
//1:获取全选框的状态
var $flag = $("#selectAllId").prop("checked");
//2:获取行选框,让所有的行选框状态和全选框保持一致
$(".itemSelect").prop("checked",$flag);
// $(".itemSelect").prop("checked",$("#selectAllId").prop("checked"));
});
7. 数组的遍历
方式一: var $optionEles=$("option");
$optionEles.each(function(index,element){
console.log(index+" "+element.value)
$(element).prop("value","sz2");
console.log(index+" "+element.value)
})
方式二:var $optionEles=$("option");
$.each($optionEles, function(index,element) {
alert(index+"---------"+element.value)
});
8.事件的绑定和解绑
//事件的绑定
$("#inputId").bind("focus",function(){
$("#spanId").html("获取焦点")
})
$("#inputId").bind("blur",function(){
$("#spanId").html("失去焦点")
});
function clickFn(){
$("#inputId").unbind();
$("#spanId").html("")
}
9.二级联动
$(function(){
//定义区域信息
var bigArray =
[
["海淀区","昌平区","朝阳区"],//北京
["南开区","和平区","西青区"],//天津
["浦东区","浦西区","闵行区"] //上海
];
//1:给第一个下拉框绑定change事件
$("#cityId").bind("change",function(){
//清空元素
$("#areaId").html("<option>--请选择区域--</option>");
//2:获取被选中直辖市的value值
var $index = $(this).val();
//3:通过这个索引去二维中选择对应的一维
var array = bigArray[$index];
//4:遍历一维
for (var i = 0; i < array.length; i++) {
//5:创建option元素,请数组中的字符串作为文本值:<option>海淀区</option>
var $optionEle = $("<option>"+array[i]+"</option>");
//6:将创建好的元素添加到第二个下拉框
$("#areaId").append($optionEle);
}
});
});
10.ajax
var param=“username=xiaoming & password=123”;1.$.get(url,param,function(){},type);2.$.post(url,param,function(){},type);3.$.ajax({});$.ajax({url:beforeSend:function 发送之前做的一些事情data:发送的参数dataType:服务器返回的数据类型error:function(){} 错误时执行的函数//data返回的数据,status状态码说明,自定义的,xmlhttp 底层核心引擎对象success:function(data,status,xmlhttp){}type:"get"});url:请求地址params:参数function:回调函数type:数据类型
11.json数据格式
1.数组形式:
[ele1,ele2,ele3,ele4,...]
2.对象形式:
属性名必须是字符串
属性值没要求
{
属性名:属性值,
属性名:属性值,
属性名:属性值
}
12Jquery常用事件