/ jQuery

jQuery

jQuery

jQuery API 英文手册:http://api.jquery.com/

jQuery API 中文手册:https://www.jquery123.com/

$(function() {});$(document).ready(function(){ }) 的简写

jQuery 代码库

http://www.htmleaf.com/

jQuery 版本

console.info('jQuery 版本号:' + jQuery.fn.jquery);

Ajax

get 请求

请求格式:/api/getWeather?zipcode=97201

$.ajax({
  url: "/api/getWeather",
  data: {
    zipcode: 97201
  },
  success: function( result ) {
    $( "#weather-temp" ).html( "<strong>" + result + "</strong> degrees" );
  }
});

post 请求

var csrfToken = $('meta[name="csrf-token"]').attr("content");
$.ajax({
  url: "/api/getWeather",
  data: {
    csrf: csrfToken,
    zipcode: 97201
  },
  type: "post",
  dataType: "json",
  success: function( result ) {
    console.log(result);
  }
});

jQuery 对象 和 DOM 对象

var domObj = document.getElementById("id"); // 获取 DOM 对象
var objHTML = domObj.innerHTML;             // 使用 JavaScript 中的属性 innerHTML

jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象.

$("#foo").html();  // 获取 id 为 foo 的元素内的 html 代码. .html() 是 jQuery 里的方法

这段代码等同于:

document.getElementById("foo").innerHTML;

jQuery 对象 和 DOM 对象的相互转换

如果获取的对象是 jQuery 对象,那么在变量前面加上 $ ,例如:

var $variable = jQuery对象;

如果获取的是 DOM 对象, 则定义如下:

var variable = DOM对象;

jQuery 对象 转换为 DOM 对象:

// jQuery 对象是一个类似数组的对象,可以通过 [index] 的方法得到对应的 DOM 对象
var $cr = $("#cr"); // jQuery对象
var cr = $cr[0];    // DOM 对象
// 或者通过 get(index) 
var cr = $cr.get(0);

DOM 对象 转成 jQuery 对象,只需用 $() 把 DOM 对象包装起来

var cr = document.getElementById("cr");  // DOM 对象
var $cr = $(cr);                         // jQuery 对象

jQuery 选择器

jQuery 中的选择器完全继承了 CSS 的风格. jQuery 选择器支持 CSS1, CSS2 的全部 和 CSS3 的部分选择器, 同时它也有少量独有的选择器. 因此对拥有一定 CSS 基础的开发人员来说, 学习 jQuery 选择器是很容易的事.

向上搜索

$('[data-chosee-city=time]').closest('div').html()

向下搜索

$('[data-chosee-city=time]').find('.weui-cell__ft').html()

$(SERVICE_FUND).find('input').prop('disabled', true).prop('checked', true);

How dectec jQuery version

if (typeof jQuery != 'undefined') {  
    // jQuery is loaded => print the version
    alert(jQuery.fn.jquery);
}

jQuery 与 Form

得到选中属性

$("#id").prop("checked")

设置选中属性

$("#id").prop("checked",true)

或者不使用 jQuery:

if(document.getElementById('isAgeSelected').checked) {
    $("#txtAge").show();
} else {
    $("#txtAge").hide();
}

var ITEM_SELECTOR_FUND = '[data-item="fund"]';
var ITEM_SELECTOR_TAX = '[data-item="tax"]';

$(function() {
  document.getElementById('needFund').checked ? $(ITEM_SELECTOR_FUND).show() : $(ITEM_SELECTOR_FUND).hide();
  document.getElementById('needTax').checked) ? $(ITEM_SELECTOR_TAX).show() : $(ITEM_SELECTOR_TAX).hide();
});

补充

jQuery Validation

// 定义验证规则
$('[data-form="session"]').validate({
    'rules': {
        'username': {required: true},
        'password': {required: true}
    },
    'messages': {
        'username': {
            required: '请输入用户名',
        },
        'password': {
            required: '请输入密码',
        },
    },
    // 自定义错误 wraper
    errorElement: "div",
    // 自定义 error 元素位置
    errorPlacement: function (error, element) {
        error.appendTo(element.parent().parent());
    }
});

默认根据 name 来做验证。