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事件,事件名前无需+on
	button.addEventListener('click', myFunction, false);
} else if (document.attachEvent) { //仅ie8及以下的浏览器为true
	//dom元素绑定click事件,事件名前需要+on
	button.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'};  //descendants
alert(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]);  //object
alert($(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,etc
or
$('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-browser
3.Selectors
4.Events
5.Ajax
6.Plugins


<!-- jQuery script
<head>
	<script type="text/javascript" src="jquery.js"></script>
</head>
 -->
jQuery 1.x  //Need to support Id 6-8
jQuery 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 use
2.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);
	});
});