js:原生javascript,
jquery:对原生进行封装!封装成一个js文件!把html和js完全分离!
选择器进行封装,
函数进行封装!
==================================================================
java/js/jquery:需要拼接字符串时,在需要拼接的位置上,写"+xxx+"
String a = "abc"
"xyz"+a+""
"x"+a+"yz"
基本语法:对象.函数(function(){});
如何获得对象:
$("#xxx"): ID选择器
$("font .xxx"): 关联类选择器 所有font标签中,并且class="xxx"的对象! 交集!
$("font,.xxx"): 并集选择器 所有font标签中,和class="xxx"的对象! 并集!
$(".xxx"): 独立类选择器
$("xxx") 标签选择器
$("标签名[属性=属性值]") 根据标签获得对象,并且这些对象中的属性必须=属性值
$(".x:even") 获得所有class=x中下标为偶数的对象! even odd gt(2) lt(2)
$("input[type=checkbox]") 获得所有多选框对象
$("input[type=checkbox]:checked") 获得所有已选中的多选框对象
$("select option:selected) 获得已选中的下拉框对象
都有哪些函数:
常用10个函数!显示/隐藏!hide()/show()
回调函数:当前函数执行完毕后,自动执行回调函数!
.css(): .style
.html() .innerHTML
.val() .value
.attr() .任意html属性
该4个函数即能get又能set
循环遍历:
$.each(a,function(i,n){ //$.each(a,function(i,n){})
对a数组进行循环,循环完成之后,执行function,为回调函数,i为数组下标(0,1,2,3,4......),
n就是每次循环出来的数组中的内容(a[i]), 注意n为dom对象,不是jquery对象!
==================================================================
dom对象和jquery对象的区别:
不同的对象只能调用自己的属性或者函数!
dom对象(原生js对象): var a = document.getElementById("text"); a.value = "哈哈";
jquery对象: $(选择器) $("#text").val("哈哈");
jquery对象如果是数组,可以直接对数组进行调用函数,不用循环!
==================================================================
jquery对象和dom对象的互换:
dom转成jquery对象:$(dom对象)
jquery转成dom对象:
1:$("#a")[0] jquery->dom
2:$(".a").get(5) jquery->dom
==================================================================
原生js:有一个div对象叫a
获得子节点:a.childNodes;
创建节点:var a = $("<div class='h'></div>");
内部添加子节点:
obj.append(obj1) :在obj的里面添加obj1对象,obj1永远在obj里面的最后面!
obj1.appendTo(obj) :在obj的里面添加obj1对象,obj1永远在obj里面的最后面!
obj.prepend(obj1) :在obj的里面添加obj1对象,obj1永远在obj里面的前面!
obj1.prependTo(obj) :在obj的里面添加obj1对象,obj1永远在obj里面的前面!
外部添加兄弟节点:
obj.after(obj1) 在obj对象外面的后面插入obj1对象
obj1.insertAfter(obj) 在obj对象外面的后面插入obj1对象
obj.before(obj1) 在obj对象外面的前面插入obj1对象
obj1.insertBefore(obj) 在obj对象外面的前面插入obj1对象
删除节点:
obj.remove() 把obj节点删除!
obj.empty() 把obj节点的后代元素删除!
==================================================================
获得子父节点(遍历节点)
a.children() 子节点数组
a.parent() 父节点
a.next() 下一个同辈节点
a.prev() 上一个同辈节点
a.siblings 所有同辈节点
==================================================================
绑定事件:bind() one()
a.bind(事件.名字,function(){}) 绑定事件
a.unbind(事件.名字,function(){}) 解绑事件
this:dom对象
$(this):jquery对象,就是触发事件的对象!
自定义动画:
animate({css},2000,回调函数)
==================================================================
封装:打包,只需要对象调用即可!
验证:jquery都已经对验证封装过了!只需要调用函数即可!
自定义验证规则:正则!
$.validator.addMethod("规则名",function(){},"错误提示信息");
$("form").validate({errorPlacement:function(){},rules:{},messages:{}});
==================================================================
js原生数组:var a = new Array(5);
var a = new Array(55,7,9,0,4);
var a = [1,4,6,8];
java中数组: int[] a = {1,4,67,8};
jquery数组(json数组):类似多维数组,js和java都支持json!而原生js的数组不支持在java中运行!
json数组:
var a = [{sid:1,sname:"张三",sage:10},{sid:2,sname:"李四",sage:20},{sid:3,sname:"王五",sage:30}];
$.each(a,function(x,y){
alert(y.sid+y.sname+y.sage);
});
json对象,//a为json对象,不是数组,所以没有.length,不用循环(也可以循环)
var a = {sid:1,sname:"张三",sage:10};
alert(a.sid+a.sname+a.sage);
==================================================================
ajax:异步传输数据!
Jquery的ajax:
1:$.ajax(type:,url:, date:,success:);
$.ajax({
type:"get", 请求方式
url:"1.txt", 请求路径
data:"sid=1&sname=zs", 请求参数
datatype:"text" 返回类型
success:function(aaa){ 回调函数
$("#div1").html(aaa);
}
});
2:$.get(url,data,callback,type); get请求
url:请求路径
data:请求参数
callback:回调函数
type:返回类型
$.get("1.txt?t="+Math.random(),{name:"aaa",pwd:"bbb"},function(data){
$("#div1").html(data);
},"text");
3:$.post(url,data,callback,type); post请求
url:请求路径
data:请求参数
callback:回调函数
type:返回类型
$.post("stu.do?t="+Math.random(),{name:"aaa",pwd:"bbb"},function(data){
$("#div1").html(data);
},"text");
4:$.getJSON(url,data,callback); 返回一定是json
url:待载入页面的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。