<!-- 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); }); });