jQuery学习笔记

<!-- toggle事件点击轮番触发-->$('#MyTable tr').toggle(  function () {    $(this).css('background-color', '#efefef');  },  function () {    $(this).css('background-color', '#efefef');  }  function () {    $(this).css('background-color', 'Yellow');  });<!--hover事件，相当mouseEnter & mouseLeave --><!--集成写法-->$('#myTable tr').hover(  $(this).toggleClass('LightHighlight'););<!--分开写法-->$('#myTable tr').hover(  function () {    //mousenter    $(this).css('background-color', '#efefef');  },  function () {    //mouseleave    $(this).css('background-color', '#fff');  });<!--ready方法与on事件 -->$(document).ready(function () {var tbody = $('#myTable tbody');<!-- tbody下所有td绑定click事件 -->tbody.on('click', 'td', function(){alert($(this).text());});});<!--jquery ,find()方法-->var table = $('#myTable");//var tbody = table.find('tbody');table.find('tbody').on('click', function () {//});<!-- on事件，绑定多个事件 -->$(document).ready(function () {$('tr').on('click mouseenter mouseleave', function (e) {alert($(this).html());if (e.type == 'mouseup') {//如果是鼠标点击事件，获取点击位置$(this).text('X: ' + e.pageX + ' Y: ' + e.pageY);}});});<!--写法二：多事件与操作写成map形式$('tr').on({click: function () {},mouseenter: function () {},mouseleave: function () {},<!-- 鼠标点击事件 -->mouseup: function (e) {}});<!-- 事件非绑定写法 -->$("#myDiv").mounseenter(function () {//}).mouseleave(function () {//}).mouseup(funtion (e) {//});<!-- change事件 -->$('.MyInput').change(function () {alert($(this).val());$(this).addClass('Highlight');});<!-- dom, addEventListener及attachEvent属性值及其方法 -->var button = document.getElementById('SubmitButton');if (document.addEventListener) { //大多数浏览器为true//dom元素绑定click事件,事件名前无需+onbutton.addEventListener('click', myFunction, false);} else if (document.attachEvent) { //仅ie8及以下的浏览器为true//dom元素绑定click事件,事件名前需要+onbutton.attachEvent('onclick', myFunction);}//通过函数名来引用外部函数funtion myFunction () {//}<!-- 有关Class的方法 -->$(this).addClass("over");$(this).removeClass("out");$(this).toggleClass("toggle");

Interacting with the DOM

<!-- Iterating Through Nodes -->$('div').each(function(index, elem) {alert(index + '=' + $(elem).text());  //elem = this});<!-- this.propertyName -->$('div').each(function(i) {this.title = "My Index" + i;$(this).attr('title', 'xxx');});<!-- attr() -->var val = $('#CustomerDiv').attr('title');<!-- modifying Attributes -->$('img').attr('title', 'My Image Title');<!-- Multiple Attr -->$('img').attr({title: '',style: ''});<!-- Adding and Removing Nodes -->.append(), .appendTo(),.prepend(),.prependTo(),.remove()<!-- Appending to Nodes -->$('.officePhone').append('<span>(office)</span>');OR$('<span>(office)</span>').appendTo('.officePhone');<!-- Prepending to Nodes -->$('.phone').prepend('<span>Phone:</span>');OR$('<span>Phone:</span>').prependTo('.phone');<!-- Wrapping Elements -->$('.state').wrap('<div class="US_State" />');Results in:<div class="US_State"><div class="state">Arizona</div></div><!-- .remove() -->$('.phone, .location').remove();<!-- Modifying Styles -->$('img').css('background-color', 'yellow');<!-- Multiple Styles -->$('img').css({'background-color': 'yellow','width': '10px','height': '10px'});<!-- Modifying CSS Classes -->.addClass(),.hasClass(),.removeClass(),.toggleClass()<!-- Adding a CSS Classes -->$('p').addClass('classOne classTwo');<!-- Matching CSS Classes -->if($('p).hasClass()) {//Perform work}<!-- Removing CSS Classes -->$('p').removeClass('classOne classTow');<!-- Remove all class -->$('p').removeClass();<!-- Toggling CSS Classes -->$('#PhoneDetails').toggleClass('highlight');  //开关

Using jQuery Selectors

<!--Selectors -->var col1 = ${'p, a, span'};  //multipart tags    var col2 = ${'table tr'};  //descendantsalert(col1.length);<!-- Multiple Class Name -->$('.BlueDiv, .RedDiv')<!-- Selecting by Tag Name and Class Name -->$('a.myClass')or$('div.BlueDiv, div.RedDiv').css('', '');<!-- Selecting By Attr Value -->alert($('div[title]).length);  //[attribute]or $('div[title="Div Title"]')  //[attrName="attrValue"]<!-- Input tag name -->var divs = $('input[type="text"]');alert(divs.length);<!-- all Input Elements:input, select, textarea,button, image, radio and more -->var inputs = $(':input');alert(inputs[1]);  //objectalert($(inputs[1]).val());example2:$(':input').each(function () {var elem = $(this);alert(elem.val('Foo'));  //[object Object]});<!-- Additional Selector Features --><!-- Using Contains in Selectors -->$('div:contains("beautiful")');  //<div>hello beautiful world</div><!-- Using Even or Odd Rows in a Table -->$('tr:odd');  //1,3,5,7,9,etcor$('tr:even');  //0,2,4,6,8,etc<!-- selects the first child of every element group<div><span>First Child,first group</span><span>XXX</span></div><div><span>First Child,second group</span><span>XXX</span></div> -->$('span:first-child'); <!-- Using 'Starts' or 'Ends' With in Selectors<input type="button" value="Events-World"/>  //value^="Events"<input type="button" value="Events-World"/><input type="button" value="World Events"/>  //value$="Events"<input type="button" value="National Events"/> -->$('input[value^="Events"]');or$('input[value$="Events"]'); <!-- Find Attr Containing a Value <input type="button" value="World Events 2011"/>  //value*="Events"<input type="button" value="National Events 2011"/>-->$('input[value*="Events"]'); <!-- jQuery Selectors -->http://codylindley.com/jqueryselectors/<!-- jQuery API Documentation -->http://api.jquery.com/

Getting Started 
<!-- Getting Started with jQuery -->1.Single File 2.Cross-browser3.Selectors4.Events5.Ajax6.Plugins<!-- jQuery script<head><script type="text/javascript" src="jquery.js"></script></head> -->jQuery 1.x  //Need to support Id 6-8jQuery 2.x  //Don't need to support IE 6-8<!-- Using a Content Delivery Network(CDN) --><script type="text/javascript"src="http://ajax.microsoft.com/ajax/jquery/jquery-[version].js"></script>or<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/[version]/jquery.min.js"></script><!-- load the script locally --><script>window.jQuery || document.write('<script src="jquery.js"></script>')</script><!-- $(document).ready()1.detect when a page has loaded and is ready to use2.Called once DOM hierarchy is loaded(but before all images have loaded)--><script type="text/javascript">$(document).ready(function() {alert('DOM loaded');  //First});window.onload = function() {alert('Window loaded');  //Final};</script>

2017/09/16
<!-- closest() && submit() &&  form(options) -- jquery.easyui.min.js    -->$('#MyDiv').change(function() {$form = $(this).closest('form'); $form.form({url: '/fileUpload/upload',ajax:'true',        iframe:'false', success: function(result) {result = $.parseJSON(result);var id = result.obj.id;}});$form.submit();  //submit});<!-- parent.$.modalDialog(options) --><!-- parent: Window $: f m(a,b) jquery对象: jquery.min.js     modalDialog(options): f anonymous(options): extJs.js handler: m.fn.init(1) jquery对象  form(): easyui方法：jquery.easyui.min.js dialog('close'): easyui方法：jquery.easyui.min.js  -->$('#MyDiv').click(function() {parent.$.modalDialog({title: '修改密码',width: 300,height: 250,href: 'user/editUserPwd',method: 'get',buttons: [{text: '保存',iconCls: 'XXX',handler: function() {var form = $.modalDialog.handler.find('#editForm');form.form('submit');$.modalDialog.handler.dialog('close');}}, {}]});});   <!-- $: f m(a,b) jquery对象: jquery.min.js messager: Object对象 easyui.js alert(): easyui方法 easyui.js  --> $.messager.alert();<!-- datagrid('reload') : easyui方法  linkbutton('disable') : easyui方法   -->$('#myDatagrid').datagrid('reload');$('#btnSaveItemSeq').linkbutton('disable');<!-- <input name="price" type="radio" checked="checked" />  <input name="price" type="radio"/>    -->example1:      $("input[type='radio']:checked")example2:    $("input:radio[name='price']").change(function(var value = $("input[type='radio']:checked").val();    ));    <!-- split() -->if(null != params) {var paramArr = params.split(',');  //array}    <!-- prototype: define method or attribute -->  example1: Array.prototype.indexOf = function(val) {var index;for(index in this) {if(this[index] == val)return index;}return -1;}example2:var bill = new Employee('Bill Gates', 'Engineer');    Employee.prototype.salary = null;bill.salary = 20000;document.write(bill.salary);  //20000<!-- format() -->var now = new Date().format('yyyy-MM-dd');    <!-- 正则表达式: 非负数，小数点后保留两位 -->function regValidate(val) {var reg = /^( ([0-9]) | ([1-9][0-9]+) | ([0-9]+/.[0-9]{1,2}) )$/;var isValidate = reg.test(val);return isValidate;} <!-- siblings(): 同层级下其他标签 -->$('li.third-item').siblings().css('background-color', 'red');<!-- 监听元素属性变化事件：待验证 -->原生js添加监听事件：$(function() {if('\v' == 'v') { //true为ie浏览器document.getElementById('a').attachEvent('onpropertychange', function(e) {var propertyName = e.propertyName;alert(propertyName););} else {document.getElementById('a').addEventListener('onpropertychange', function(e) {var propertyName = e.propertyName;alert(propertyName);});}});使用jquery方法绑定事件：$(function() {$('#a').bind('input propertychange', function(e) {var propertyName = e.propertyName;alert(propertyName);});});