JQuery学习随笔

JS对象与Jquery对象的关系：

   1、二者不等价

   2、二者可以相互转换

  

  JS对象转JQuery对象

  var JQ对象 = $(JS对象); ----- 建议书写格式

  var JQ对象 = jQuery(JS对象);

  $ 与 jQuery完全等价，一般使用 $

JQuery将JS操作方法化，JS一般是操作对象的属性，而JQuery对应的操作都变成了方法

          *  比如：获取 input 的value 值

          *  js操作： JS对象.value

          *  JQuery 操作： JQ对象.val()

JS如果重复使用 window.onload 会产生覆盖操作，因为这是属性

          *  而JQuery不会，因为属性函数化了

JQuery的显示与隐藏方法

左对角---右对角的隐藏显示

$(JS对象).hide(毫秒值||空||毫秒值，执行成功后调用的函数）---隐藏

$(JS对象).show(毫秒值||空||毫秒值，执行成功后调用的函数）---显示

上对角---下对角的隐藏显示

slideUp（）---隐藏

slideDown（）--显示

淡入淡出的隐藏显示

feadOut()---隐藏

feadIn()---显示

JQuery的选择器

基本选择器：

$(".class")；

$("#id)

$("标签名")；；

层级选择器：

$("#main div")；---获取 main div 下面的所有(孙子也包含)的 div

$("#main>div")；---获取面main div 下的所有直接子集

$("#header+div")；---获取header下的第一个div

$("#header~div")；---获取header的所有兄弟div

过滤选择器：

//可以和层级选择器连用：即

“ ”表示所有子集

“>”表示所有直接子集

“+” 表示第一个兄弟元素

“~”表示所有兄弟元素

#main :first ---- main 的子集的第一个

#main:first ----- main当前自己

//选择器中的空格表示当前的所有子集

#main :last --- main的子集的最后一个

#main :odd --- main的所有奇数子集

#main :even --- main的所有偶数子集

#main :gt(i) --- main的所有索引大于i的元素

#main :lt(i) --- main的所有索引小于i的元素

#main :eq(i) --- main的索引等于i的元素

属性选择器

$("筛选条件[属性]") ---- 包含该属性

  筛选条件[属性 =/!= 值] ---- 对属性值过滤

   = 属性符合某个固定的值

  ！= 属性不是某个值

表单选择器

$("input:enabled")---选择所有可用的input

$（"input:disabled"）--选择所有不可用的input

$("input[name='hobby']:checked")--选择所有被选中了的那么=hobby的input项

$("#city :selected"）---选择name=city的所有子集总被选中的项

JQuery中修改属性值

var v =$("选择器");

修改class属性的值

v.prop("class","d2");(对于html中标签的故有属性，建议使用prop，一些默认属性使用attr会获得undefined)

            v.attr();自定义属性时建议使用

获取当前对象的 class 的值

v.prop("class");

JQuery的遍历操作

遍历语法：

 *  语法1、JQ对象.each(function(index,node){});

 *    index ---- 元素索引

 *    node ----- 当前元素

 *   

 *      效果：每遍历到一个元素，就调用一次 function

 * 

 *  语法2、$.each(数组,function(index,node){});

 *    语法2和语法1只是书写有区别，效果一直

 JQueryValidate

 

    规则格式

 

    提示位置样式设置：

 必须设置class=‘error'属性以及for属性表示为哪一个属性进行提示

JQuery.form.js插件使用

jQuery.Form.js 插件的作用是实现Ajax提交表单。

方法：

1.formSerilize()  用于序列化表单中的数据，并将其自动整理成适合AJAX异步请求的URL地址格式。

2.clearForm()   清除表单中所有输入值的内容。

3.restForm()    重置表单中所有的字段内容。即将所有表单中的字段恢复到页面加载时的默认值。

ajaxForm()与ajaxSubmit()

都可以没有参数或者接受1个参数。该参数既可以是一个回调函数，也可以是一个options对象

区别：ajaxFrom()会自动阻止表单提交。而ajaxSubmit()不会自动阻止表单提交，想阻止表单提交，要自己return false;

var options={
        url:url, //form提交数据的地址
    type:type, //form提交的方式(method:post/get)
    target:target, //服务器返回的响应数据显示在元素(Id)号确定
    beforeSubmit:function(), //提交前执行的回调函数
    success:function(), //提交成功后执行的回调函数
    dataType:null, //服务器返回数据类型
    clearForm:true, //提交成功后是否清空表单中的字段值
    restForm:true, //提交成功后是否重置表单中的字段值，即恢复到页面加载时的状态
    timeout:6000 //设置请求时间，超过该时间后，自动退出请求，单位(毫秒)。
    }