jquery笔记

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:载入成功时回调函数。