JQUERY：DOM，生成二維碼，on,bind,delegate區(qū)別，事件傳播和默認(rèn)操作【詩書畫唱】
多播事件委托的原生JS代碼：
提醒：下面的代碼要想有效果就要注意相對路徑等等：
可能以后會常用的遍歷：
?? ? ? ? ? ??
//? ? ? ? ? ? ? var?arr = $('input[name="demo"]');
//? ? ? ? ? ? ? for(var i = 0;i < arr.length;i ++) {
//? ? ? ? ? ? ??var e = arr[i];
//? ? ? ? ? ? ??//$(e).attr('value',i + 1);
//? ? ? ? ? ? ??$(e).val(i + 1);
//? ? ? ? ? ? ? }
? ? ? ? ? ? ? ??$('input[name="demo"]').attr('value',function(i){
? ? ? ? ? ? ? ??//return的值就是value屬性的修改值
? ? ? ? ? ? ? ??return i + 1;
? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ??//設(shè)置title屬性第n個輸入文本框
? ? ? ? ? ? ? ? $('input[name="demo"]').attr('title',function(i){
? ? ? ? ? ? ? ??return '這是第' + (i + 1) + '個文本框';
? ? ? ? ? ? ? ? });
生成掃后跳轉(zhuǎn)到對應(yīng)網(wǎng)站等鏈接的二維碼：
<script type="text/javascript" srcc="js/jquery-1.11.0.js" ></script>
<script type="text/javascript" srcc="js/qrcode.js" ></script>
$(document).ready(function(){
$('#code').qrcode("http://www.baidu.com"); //網(wǎng)址或者任意字符串
// $("#code").qrcode({
// render: "table", //table方式
// width: 200, //寬度
// height:200, //高度
// text: "www.taobao.com" //任意內(nèi)容
// });
});
?
<div id="code"></div>
事件的例子集合：
<!doctype html>
<html>
? ? <head>
? ? ? ? <title>Document</title>
<style type="text/css">
html, body {
? margin: 0;
? padding: 0;
}
body {
? font: 62.5% Verdana, Helvetica, Arial, sans-serif;
? color: #000;
? background: #fff;
}
#container {
? font-size: 1.2em;
? margin: 10px 2em;
}
h1 {
? font-size: 2.5em;
? margin-bottom: 0;
}
h2 {
? font-size: 1.3em;
? margin-bottom: .5em;
}
h3 {
? font-size: 1.1em;
? margin-bottom: 0;
}
code {
? font-size: 1.2em;
}
a {
? color: #06581f;
}
.poem {
? margin: 0 5em;
}
.chapter {
? margin: 1em;
}
.switcher {
? float: right;
? background-color: #ddd;
? border: 1px solid #000;
? margin: 10px;
? padding: 10px;
? font-size: .9em;
}
.switcher h3 {
? margin: .5em 0;
}
#header {
? clear: both;
}
? ? ? ? ? ? /* 給large類和chaper類添加字體樣式 */
body.large .chapter {
? font-size: 1.5em;
}
body.narrow .chapter {
? width: 250px;
}
.selected {
? font-weight: bold;
}
.hidden {
? display: none;
}
? ? ? ? ? ? /*
:hover偽類選擇符，這個選擇符可以讓樣式表在用戶鼠標(biāo)指針
懸停在某個元素上時，影響元素的外觀
*/
.hover {
? cursor: pointer;
? background-color: #afa;
}
</style>
<script type="text/javascript" srcc="jquery-1.11.1.min.js"></script>
? ? ? ? <script type="text/javascript">
? ? $(document).ready(function() {
//關(guān)于on,bind,delegate的區(qū)別。
//1.選擇器匹配到的元素比較多時，不要用bind()迭代綁定
? ? ? ? ? ? ? ? //2.用id選擇器時，可以用bind()
? ? ? ? ? ? ? ? //3.需要給動態(tài)添加的元素綁定時，用delegate()或者on()
? ? ? ? ? ? ? ? //4.用delegate()和on()方法，dom樹不要太深
? ? ? ? ? ? ? ? //5.盡量使用on()
/*$('#switcher-default').addClass('selected')
.on('click', function() {? ? ?
$('body').removeClass('narrow');? ? ?
$('body').removeClass('large');? ? ?
$('#switcher button').removeClass('selected');? ? ?
$(this).addClass('selected');? ?
});? ?
$('#switcher-narrow').on('click', function() {? ? ?
$('body').addClass('narrow');? ? ?
$('body').removeClass('large');? ? ?
$('#switcher button').removeClass('selected');? ? ?
$(this).addClass('selected');?
? ? ? ? ? ? ? ? });? ?
$('#switcher-large').on('click', function() {? ? ?
$('body').removeClass('narrow');? ? ?
$('body').addClass('large');??
//注意這里對3個按鈕同時進(jìn)行了移除操作
$('#switcher button').removeClass('selected');? ? ?
$(this).addClass('selected');? ?
}); */
//簡化1
//可以把負(fù)責(zé)突出顯示的代碼提取到一個單獨的處理程序中，因為針對3個按鈕的突出顯示代碼都一樣
/*$('#switcher-default').addClass('selected')
.on('click', function() {? ? ?
$('body').removeClass('narrow').removeClass('large');? ?
});? ?
$('#switcher-narrow').on('click', function() {? ? ?
$('body').addClass('narrow').removeClass('large');? ?
});? ?
$('#switcher-large').on('click', function() {? ? ?
$('body').removeClass('narrow').addClass('large');? ?
});? ?
$('#switcher button').on('click', function() {? ? ?
$('#switcher button').removeClass('selected');? ? ?
$(this).addClass('selected');? ?
}); */
//簡化2
//removeClass()方法的參數(shù)是可選的，當(dāng)省略參數(shù)時，該方法會移除元素中所有的類。
/*$('#switcher-default').addClass('selected')
.on('click', function() {? ? ?
$('body').removeClass();? ?
});? ?
$('#switcher-narrow').on('click', function() {? ? ?
$('body').removeClass().addClass('narrow');? ?
});? ?
$('#switcher-large').on('click', function() {? ? ?
$('body').removeClass().addClass('large');? ?
});? ?
$('#switcher button').on('click', function() {? ? ?
$('#switcher button').removeClass('selected');? ? ?
$(this).addClass('selected');? ?
});*/
//簡化3
//把通用的處理程序轉(zhuǎn)移到特殊的處理程序上方，
//因為removeClass()需要先于addClass()執(zhí)行。
//在jquery中，事件綁定的函數(shù)總是按照注冊順序依次執(zhí)行
/*$('#switcher-default').addClass('selected');? ?
$('#switcher button').on('click', function() {? ? ?
$('body').removeClass();? ? ?
$('#switcher button').removeClass('selected');? ? ?
$(this).addClass('selected');? ?
});? ?
$('#switcher-narrow').on('click', function() {? ? ?
$('body').addClass('narrow');? ?
});? ?
$('#switcher-large').on('click', function() {? ? ?
$('body').addClass('large');? ?
});*/
//簡化5
//根據(jù)單擊的按鈕不同，
//bodyClass變量的值可能是default、narrow或large。
//在用戶單擊<button id="switcher-default">時給<body>
//添加default類。
//雖然在這兒添加這個類也用不著，但與因此降低的復(fù)雜性相比，
//僅僅添加一個用不上的類名還是很劃算的。?
? ? ? ? ? ? ? ? /*$('#switcher-default').addClass('selected');? ?
$('#switcher button').on('click', function() {? ? ?
var bodyClass = this.id.split('-')[1];? ? ?
$('body').removeClass().addClass(bodyClass);? ? ?
$('#switcher button').removeClass('selected');? ? ?
$(this).addClass('selected');? ?
});*/?
//簡化6
//鑒于為某個事件（例如簡單的單擊事件）綁定處理程序極為常用，
//jQuery提供了一種簡化事 件操作的方式——簡寫事件方法，
//簡寫事件方法的原理與對應(yīng)的.on()調(diào)用相同，
//可以減少一定的代碼輸入量。?
/*$('#switcher-default').addClass('selected');? ?
$('#switcher button').click(function() {? ? ?
var bodyClass = this.id.split('-')[1];? ? ?
$('body').removeClass().addClass(bodyClass);? ? ?
$('#switcher button').removeClass('selected');? ? ?
$(this).addClass('selected');??
});*/
? ? ? ? ? ? ? ? //變化1
//實現(xiàn)的效果是在標(biāo)簽上單擊能夠隱藏所有按鈕后只剩一個標(biāo)簽；
//而再次單擊標(biāo)簽則會恢復(fù)這些按鈕
/*$('#switcher h3').click(function() {? ? ?
$('#switcher button').toggleClass('hidden');? ?
});*/?
//變化2
//通過css中的hover偽類和jquery中的hover幫助函數(shù)實現(xiàn)翻轉(zhuǎn)功能
/*$('#switcher h3').hover(function() {? ? ?
$(this).addClass('hover');? ?
}, function() {? ? ?
$(this).removeClass('hover');? ?
});*/?
//變化3
//這種改變會使樣式轉(zhuǎn)換器的整個區(qū)域都可以通過單擊切換其可見性。
//但同時也造成了一個問題，即單擊按鈕會在修改內(nèi)容區(qū)的樣式之后折疊樣式轉(zhuǎn)換器。
/*$('#switcher').click(function() {? ? ?
? ? $('#switcher button').toggleClass('hidden');? ?
? ? });*/
//變化4
//為了在處理程序中使用事件對象，需要為函數(shù)添加一個參數(shù)event：
//事件處理程序中的變量event保存著事件對象。
//而event.target屬性保存著發(fā)生事件的目標(biāo)元素。
//這個屬性是DOM API中規(guī)定的，但是沒有在某些舊版本的瀏覽器中實現(xiàn)。
//jQuery對這個事件對象進(jìn)行了必要的擴(kuò)展，從而在任何瀏覽器中都能夠使用這個屬性。
//通過.target，可以確定DOM中首先接收到事件的元素（即實際被單擊的元素）。
//而this引用的剛好是處理事件的DOM元素
//注意，單擊標(biāo)簽 <h3>同樣什么也不會發(fā)生，因為它也是一個后代元素。
/*$('#switcher').click(function(event) {
? ? if(event.target == this) {
? ? $('#switcher button').toggleClass('hidden');
}?
? ? });*/
//變化5
//通過stopPropagation()方法完全阻止事件冒泡
$('#switcher-default').addClass('selected');? ?
/*$('#switcher button').click(function(event) {? ? ?
var bodyClass = this.id.split('-')[1];? ? ?
$('body').removeClass().addClass(bodyClass);? ? ?
$('#switcher button').removeClass('selected');? ? ?
$(this).addClass('selected');
//避免其他所有DOM元素響應(yīng)這個事件
event.stopPropagation();?
});
$('#switcher').click(function(event) {? ? ?
? ? $('#switcher button').toggleClass('hidden');? ?
});*/
//默認(rèn)操作：例如a標(biāo)簽的href頁面跳轉(zhuǎn)，表單提交等，都是默認(rèn)的操作
//即便在事件對象上調(diào)用.stopPropagation()方法也不能禁止這種默認(rèn)操作，
//因為默認(rèn)操 作不是在正常的事件傳播流中發(fā)生的。
//在這種情況下，preventDefault()方法則可以在觸發(fā)默認(rèn)操作之前終止事件。??
$('#aLink').click(function(event){
alert('hello');
//阻止跳轉(zhuǎn)到百度頁面
event.preventDefault();
//阻止頁面折疊
event.stopPropagation();
//注意：事件傳播和默認(rèn)操作是相互獨立的兩套機(jī)制，
//在二者任何一方發(fā)生時，都可以終止另一方。?
//如果想要同時停止事件傳播和默認(rèn)操作，
//可以在事件處理程序中返回false，
//這是對在事件對象上同時調(diào)用stopPropagation()和preventDefault()的一種簡寫方式。?
});
//變化6
//只有3個button元素注冊了單擊處理程序。
//假如想為更多元素注冊處理程序怎么辦？答案是：事件委托
//在DOM中的一個祖先元素上指定一個單擊處理程序。
//由于事件會冒泡，未遭攔截的單擊事件終會到達(dá)這個祖先元素，
//而我們可以在此時再作出相應(yīng)處理。?
/*$('#switcher').click(function(event) {? ? ?
? ? if ($(event.target).is('button')) {? ? ? ?
? ? var bodyClass = event.target.id.split('-')[1];? ? ? ?
$('body').removeClass().addClass(bodyClass);? ? ? ?
$('#switcher button').removeClass('selected');? ? ? ?
$(event.target).addClass('selected');? ? ? ?
event.stopPropagation();? ? ?
} else {? ? ? ?
$('#switcher button').toggleClass('hidden');? ? ?
}? ?
});*/
//變化7
//實現(xiàn)點擊Narrow Column或Large Print按鈕時，
//switcher面板不進(jìn)行折疊
//以下的寫法會導(dǎo)致兩個按鈕的click處理程序也失效了
/*$('#switcher-narrow, #switcher-large').click(function() {? ? ?
$('#switcher').off('click');? ?
});*/
//變化7
//連續(xù)偶數(shù)次單擊default按鈕后，點擊折疊面板無任何響應(yīng)
//事實上，這是因為切換了hidden類偶數(shù)次，結(jié)果狀態(tài)與開始的時候相同。
/*$('#switcher').click(function(event) {? ? ?
? ? if ($(event.target).is('button')) {? ? ? ?
? ? var bodyClass = event.target.id.split('-')[1];? ? ? ?
$('body').removeClass().addClass(bodyClass);? ? ? ?
$('#switcher button').removeClass('selected');? ? ? ?
$(event.target).addClass('selected');? ? ? ?
event.stopPropagation();? ? ?
}? ?
});
var toggleSwitcher = function(event) {? ? ?
if (!$(event.target).is('button')) {? ? ? ?
$('#switcher button').toggleClass('hidden');? ? ?
}? ?
};? ?
$('#switcher').on('click.collapse', toggleSwitcher);? ?
$('#switcher-narrow, #switcher-large').click(function() {
$('#switcher').off('click.collapse');
});? ?
$('#switcher-default').click(function() {? ? ?
$('#switcher').on('click.collapse', toggleSwitcher);??
})*/
? ? ? ? ? ? ? ? //變化8
//為了解決變化7中的問題， 可以在用戶單擊任意按鈕時解除綁定，
//并在確定單擊按鈕的ID是switcher-default的情況下再重新綁定
? ? ? ? ? ? ? ? $('#switcher').click(function(event) {?
? ? if ($(event.target).is('button')) {? ? ? ?
? ? var bodyClass = event.target.id.split('-')[1];? ? ? ?
$('body').removeClass().addClass(bodyClass);? ? ? ?
$('#switcher button').removeClass('selected');? ? ? ?
$(event.target).addClass('selected');? ? ? ?
event.stopPropagation();? ? ?
}? ?
});
var toggleSwitcher = function(event) {? ? ?
if (!$(event.target).is('button')) {? ? ? ?
$('#switcher button').toggleClass('hidden');? ? ?
}? ?
};? ?
$('#switcher').on('click.collapse', toggleSwitcher);
$('#switcher button').click(function() {? ? ?
$('#switcher').off('click.collapse');? ? ?
if (this.id == 'switcher-default') {? ? ? ?
$('#switcher').on('click.collapse', toggleSwitcher);? ? ?
}? ?
});?
//模擬用戶操作
//假設(shè)想讓樣式轉(zhuǎn)換器面板在一開始時處于折疊狀態(tài)。
//可以模擬單擊樣式轉(zhuǎn)換器，以觸發(fā)設(shè)定的折疊機(jī)制
//$('#switcher').trigger('click');?
//trigger()方法提供了一組與on()方法相同的簡寫方法。
? ? ? ? ? ? ? ? $('#switcher').click();
//給按鈕綁定響應(yīng)鍵盤事件
//如果想知道用戶按了哪個鍵，應(yīng)該偵聽keyup或keydown事件；
//如果想知道用戶輸入的是什么字符，應(yīng)該偵聽keypress事件
var triggers = {? ? ?
D: 'default',? ? ?
N: 'narrow',? ? ?
L: 'large'? ?
};? ?
$(document).keyup(function(event) {
//ascii是個數(shù)字
var ascii = event.which;
//轉(zhuǎn)換成字符
var key = String.fromCharCode(ascii);?
if (key in triggers) {? ? ? ?
$('#switcher-' + triggers[key]).click();? ? ?
}? ?
});
});?
</script>
? ? </head>
? ? <body>
? ? ? ? <div id="container">
? ? <div id="switcher">
<h3>Style Switcher</h3>
<button id="switcher-default">
? Default
</button>
<button id="switcher-narrow">
? Narrow Column
</button>
<button id="switcher-large">
? Large Print
</button>
? ? ? ? <a id="aLink" href="http://www.baidu.com" >點擊測試</a>
? ? </div>
? ? <div id="header">
? ? <h2>A Christmas Carol</h2>
? ? <h2>In Prose, Being a Ghost Story of Christmas</h2>
? ? <div>by Charles Dickens</div>
? ? </div>
? ? <div id="chapter-preface">
? ? <h3>Preface</h3>
? ??
? ? <p>Their faithful Friend and Servant,</p>
? ? <p>C. D.</p>
? ? <p>December, 1843.</p>
? ? </div>
? ? <div id="chapter-1">
? ? <h3>Stave I: Marley's Ghost</h3>
? ? <p>MARLEY was dead: to begin with. </p>
? ? <p>Mind! </p>
? ? <p>Scrooge knew he was dead? </p>
? ? <p>The mention of Marley's funeral brings me back to the point I started from. </p>
? ? <p>Scrooge never painted out Old Marley's name. </p>
? ? <p>Oh!</p>
? ? <p>External heat and cold had little influence on Scrooge. ?</p>
? ? <p>Nobody ever stopped him in the street to say, with gladsome looks, "My dear Scrooge, how are you? </p>
? ? <p>But what did Scrooge care! It was the very thing he liked. </p>
</div>
</div>?
? ? </body>
</html>
DOM和CSS操作：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.bg {
? ? background-color: pink;
}
</style>
<script type="text/javascript" srcc="js/jquery-1.11.0.js" ></script>
<script>
$(function(){
//將id為inp的元素的type屬性修改為button
//document.getElementById('inp').type = 'button';
$('#inp').attr('type','button');
var str = '<img src="img/25.png" />';
//設(shè)置id為ctx的div中的html代碼
$('#ctx').html(str);
//設(shè)置div中的文本
//$('#ctx').text(str);
//獲取id為ctx的div中的html代碼
var s = $('#ctx').html();
//alert(s);
//將id為inp的輸入文本框中的值修改為admin
//document.getElementById('inp').value = 'admin';
$('#inp').val('admin');
//alert($('#inp').val());
//$('#inp')[0].value = 'admin';
//$('#inp').get(0).value='admin';
//$('#inp').attr('value','admin');
//document.getElementById('myImg').src = 'img/25.png';
$('#myImg').attr('src','img/25.png');
//獲取id為myImg的元素的src屬性值
//alert($('#myImg').attr('src'));
// alert($('#inp').attr('id'));
// alert(document.getElementById('inp').id);
// alert($('#inp')[0].id);
// alert($('#inp').get(0).id);
? ? ? ? ? ? ? ? //將id為rd的元素的type屬性設(shè)置為radio,value屬性設(shè)置為男,name屬性設(shè)置為sex
? ? ? ? ? ? ? ? $('#rd').attr({
? ? ? ? ? ? ? ? type:'radio',
? ? ? ? ? ? ? ? value:'男',
? ? ? ? ? ? ? ? name:'sex'
? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? //將id為ig的元素的src屬性修改為img/12.png,并且將它的name屬性設(shè)置為mm
? ? ? ? ? ? ? ? $('#ig').attr({
? ? ? ? ? ? ? ? src:'img/12.png',
? ? ? ? ? ? ? ? name:'mm'
? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ??
//? ? ? ? ? ? ? var arr = $('input[name="demo"]');
//? ? ? ? ? ? ? for(var i = 0;i < arr.length;i ++) {
//? ? ? ? ? ? ? var e = arr[i];
//? ? ? ? ? ? ? //$(e).attr('value',i + 1);
//? ? ? ? ? ? ? $(e).val(i + 1);
//? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? $('input[name="demo"]').attr('value',function(i){
? ? ? ? ? ? ? ? //return的值就是value屬性的修改值
? ? ? ? ? ? ? ? return i + 1;
? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? //設(shè)置title屬性第n個輸入文本框
? ? ? ? ? ? ? ? $('input[name="demo"]').attr('title',function(i){
? ? ? ? ? ? ? ? return '這是第' + (i + 1) + '個文本框';
? ? ? ? ? ? ? ? });
//? ? ? ? ? ? ? var arr1 = $('input[name="demo"]');
//? ? ? ? ? ? ? for(var i = 0;i < arr1.length;i ++) {
//? ? ? ? ? ? ? var e = arr1[i];
//? ? ? ? ? ? ? $(e).attr('title','這是第' + (i + 1) + '個文本框');
//? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? //將頁面中name屬性為tt的所有的img標(biāo)簽設(shè)置對應(yīng)圖片
? ? ? ? ? ? ? ? //要求第一個img標(biāo)簽顯示1.png,第二個img標(biāo)簽顯示2.png,第三個img標(biāo)簽顯示3.png
? ? ? ? ? ? ? ? $('img[name="tt"]').attr('src',function(i){
? ? ? ? ? ? ? ? return 'img/' + (i + 1) + '.png';
? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? //alert($('#inp').css('width'));
? ? ? ? ? ? ? ??
//? ? ? ? ? ? ? var ds = $('div.bg');
//? ? ? ? ? ? ? for(var i = 0;i < ds.length;i ++) {
//? ? ? ? ? ? ? var e = ds[i];
//? ? ? ? ? ? ? $(e).css('width',(i + 1) * 50 + 'px');
//? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? $('div.bg').css('width',function(i){
? ? ? ? ? ? ? ? return (i + 1) * 50 + 'px';
? ? ? ? ? ? ? ? });
})
</script>
</head>
<body>
<div class="bg">AAA</div>
<div class="bg">BBB</div>
<div class="bg">CCC</div>
<img name="tt" />
<img name="tt" />
<img name="tt" />
<input name="demo" type="text"/>
<input name="demo" type="text"/>
<input name="demo" type="text"/>
<input id="inp" type="text" value="登錄"/>
<div id="ctx"></div>
<img id="myImg" />
<input id="rd" />男
<img id="ig" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/jquery-1.11.0.js" ></script>
<script>
$(function(){
//$('div').wrapAll('<ul></ul>').wrap('<li></li>');
$('div').wrapAll('<table border="1"></table>').wrap('<tr><td></td></tr>');
});
</script>
</head>
<body>
<div>語文</div>
<div>數(shù)學(xué)</div>
<div>英語</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/jquery-1.11.0.js" ></script>
<script>
$(function(){
//在頁面中插入一個下拉框
//var dom = '<select><option>本科</option><option>大專</option><option>高中</option></select>';
//將dom元素轉(zhuǎn)換成jquery對象
//內(nèi)部的前面：
//正向的插入元素
//$('body').append($(dom));
//反向的插入元素
//$(dom).appendTo($('body'));
//內(nèi)部的后面：
//var btn = '<input type="button" value="選擇" />';
//$('body').prepend($(btn));
//往id為ctx的元素的內(nèi)部的前面添加一個<label>珠寶</label>標(biāo)簽
//往id為ctx的元素的內(nèi)部的后面添加一個<a href="#">瀏覽</a>標(biāo)簽
var sc = '<label>珠寶</label>';
$('#ctx').prepend($(sc));
var cc = '<a href="#">瀏覽</a>';
$('#ctx').append($(cc));
$('p').append(function(i,html){
return i + 1;
});
// var arr = $('p');
// for(var i = 0;i < arr.length;i ++){
// //獲取到選中的每個元素
// var e = arr[i];
// var html = $(e).html();
// $(e).append(i + 1);
// }
? ? ? ? ? ? ? ? //往id為ctx的元素的外部的前面插入一個a鏈接
? ? ? ? ? ? ? ? $('#ctx').before($('<a href="#">測試</a>'));
? ? ? ? ? ? ? ? //往id為ctx的元素的外部的后面插入一個按鈕
? ? ? ? ? ? ? ? $('#ctx').after($('<input type="button" value="點擊" />'));
});
</script>
</head>
<!-- 外部的前面 -->
<body>
<!-- 內(nèi)部的前面 -->
<h1>學(xué)歷</h1>
<div>Hello world</div>
<div id="ctx"><img src="img/1.png" /></div>
<p><span>A</span></p>
<p><span>B</span></p>
<p><span>C</span></p>
<!-- 內(nèi)部的后面 -->
</body>
<!-- 外部的后面 -->
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/jquery-1.11.0.js" ></script>
<script>
$(function(){
// document.getElementById('btn').onclick = function(e){
// alert(1);
// }
// document.getElementById('btn').onclick = function(e){
// alert(2);
// }
// document.getElementById('btn').onclick = function(e){
// alert(3);
// }
// document.getElementById('btn').addEventListener('click',function(){
// alert(1);
// })
// document.getElementById('btn').addEventListener('click',function(){
// alert(2);
// })
// document.getElementById('btn').addEventListener('click',function(){
// alert(3);
// })
//多播事件委托
// $('#btn').bind('click',function(e){
// alert(1);
// });
//簡化寫法
// $('#btn').click(function(e){
// alert(2);
// });
var obj = {cmd:'done'};
$('#btn').bind('click',obj,function(e){
//e.data其實就是obj
//alert(e['data'].cmd);
console.log(e);
})
});
</script>
</head>
<body>
<input type="button" id="btn" value="測試" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.myCss {
width: 64px;
height: 64px;
position: absolute;
left: 350px;
top: 150px;
}
</style>
<script type="text/javascript" srcc="js/jquery-1.11.0.js" ></script>
<script>
$(function(){
$('body').keydown(function(e){
//獲取到圖片的位置
var os = $('#myImg').offset();
var t = os.top;
console.log('圖片距離上邊的距離是：' + t + '像素');
var l = os.left;
console.log('圖片距離左邊的距離是：' + l + '像素');
//圖片的路徑
var path = '';
if(e.keyCode === 38) {//上
t -= 20;
path = 'img/ele1.png';
} else if(e.keyCode === 40) {//下
t += 20;
path = 'img/ele2.png';
} else if(e.keyCode === 37) {//左
l -= 20;
path = 'img/ele3.png';
} else if(e.keyCode === 39) {//右
l += 20;
path = 'img/ele4.png';
}
//將位置的變化顯示出來
$('#myImg').offset({
top: t,
left: l
});
//改變圖片的src屬性
$('#myImg').attr('src',path);
});
});
</script>
</head>
<body>
<img id="myImg" src="img/ele1.png" class="myCss" />
</body>
</html>
作業(yè)：
? ?<!--?
(1) 在Charles Dickens被單擊時，給它應(yīng)用selected樣式。?
(2) 在雙擊<h3 class="chapter-title">時，切換p文本的可見性。?
(3) 當(dāng)用戶按下向右方向鍵時，切換到下一個body類；右方向鍵的鍵碼是39。?
(4) 挑戰(zhàn)：使用console.log()函數(shù)記錄在段落中移動的鼠標(biāo)的坐標(biāo)位置。?
(5) 挑戰(zhàn)：使用mousedown()和mouseup()跟蹤頁面中的鼠標(biāo)事件。
? ? 如果鼠標(biāo)按鍵在按下它的地方被釋放，則為所有段落添加hidden類。
? ? 如果是在按下它的地方之下被釋放的， 刪除所有段落的hidden類。
-->
// // (1) 在Charles Dickens被單擊時，給它應(yīng)用 selected 樣式。
$(document).ready(function() {
$('#header').on('click',function() {
$('.author').addClass('selected')
});
})
?
// (2) 在雙擊章標(biāo)題（ <h3 class="chapter-title"> ）時，切換章文本的可見性。
$(document).ready(function() {
$('#chapter-preface').on('dblclick',function() {
$('.chapter-title').toggleClass('hidden');
})
})
?
// (3) 當(dāng)用戶按下向右方向鍵時，切換到下一個 body 類；右方向鍵的鍵碼是 39 。
// var setBodyClass=function(className){
// $("body").removeClass().addClass(className);
// $(".switcher button").removeClass("selected");
// $("#switcher-"+className).addClass("selected");
// }
// //頁面初始時默認(rèn)為選中狀態(tài)
// $("#switcher-default").addClass("selected");
// $(document).keyup(function (event) {
// var num=$(".switcher button").filter(".selected").index()-1;
// alert(num);
// if(event.which==39) num=(num+1)%3;
// else if(event.which==37) num=(num-1)%3;
// else return false;
// var btnClassname=$(".switcher button").eq(num).attr("id").split("-")[1];
// setBodyClass(btnClassname);
// })
// 第二種方法
$(function(){
var setBodyClass=function(className){
$("body").removeClass().addClass(className);
$(".switcher button").removeClass("selected");
$("#switcher-"+className).addClass("selected");
}
$("#switcher-default").addClass("selected");//頁面初始時默認(rèn)為選中狀態(tài)
var bodyClass=["default","narrow","large"];
var count=0;//設(shè)置一個計數(shù)器
$(document).keyup(function(event){
if (event.keyCode == 39) {
setBodyClass(bodyClass[(count+1)%3]);//如果設(shè)置為count%3則在第一次按下右鍵時頁面不會有反應(yīng)（因為默認(rèn)是setBodyClass[0]）
count++;
}
})
})
?
?
// (4) 挑戰(zhàn)：使用 console.log() 函數(shù)記錄在段落中移動的鼠標(biāo)的坐標(biāo)位置。（注意： console.log()可以在Firefox的firebug擴(kuò)展、Safari的Web Inspector或Chrome、IE中的Developer Tools中使用。）
//獲取鼠標(biāo)坐標(biāo)函數(shù)
$(document).ready(function(){
//獲取鼠標(biāo)坐標(biāo)函數(shù)
$(document).mouseover(function(e) {
? ? ? ? ?var x = e.pageX;
? ? ? ? ?var y = e.pageY;
console.log('x坐標(biāo)'+x+','+'y坐標(biāo)'+y);
})
})
// (5) 挑戰(zhàn)：使用 .mousedown() 和 .mouseup() 跟蹤頁面中的鼠標(biāo)事件。如果鼠標(biāo)按鍵在按下它的地方被釋放，則為所有段落添加 hidden類。如果是在按下它的地方之下被釋放的，刪除所有段落的 hidden 類。
$(document).ready(function(){
? ? ? ?varposxr=0,posy=0;?
$(document).mousedown(function(event){
? ? ? posx=event.clientX;
? ? ? posy=event.clientY;
})?
$(document).mouseup(function(event){
? ? ?posx1=event.clientX;
? ? ?posy1=event.clientY;?
? ? ?if(posy1==posy&&posx==posx1){
? ? ? ? ? ? ? $('p').addClass('hidden')
}
else if(posy1>posy){?
$('p').removeClass('hidden')
}
})
})
<!doctype html>
<html>
? ? <head>
? ? ? ? <title>Document</title>
<style type="text/css">
html, body {
? margin: 0;
? padding: 0;
}
body {
? font: 62.5% Verdana, Helvetica, Arial, sans-serif;
? color: #000;
? background: #fff;
}
#container {
? font-size: 1.2em;
? margin: 10px 2em;
}
h1 {
? font-size: 2.5em;
? margin-bottom: 0;
}
h2 {
? font-size: 1.3em;
? margin-bottom: .5em;
}
h3 {
? font-size: 1.1em;
? margin-bottom: 0;
}
code {
? font-size: 1.2em;
}
a {
? color: #06581f;
}
.poem {
? margin: 0 5em;
}
.chapter {
? margin: 1em;
}
.switcher {
? float: right;
? background-color: #ddd;
? border: 1px solid #000;
? margin: 10px;
? padding: 10px;
? font-size: .9em;
}
.switcher h3 {
? margin: .5em 0;
}
#header {
? clear: both;
}
body.large .chapter {
? font-size: 1.5em;
}
body.narrow .chapter {
? width: 250px;
}
.selected {
? font-weight: bold;
}
.hidden {
? display: none;
}
.hover {
? cursor: pointer;
? background-color: #afa;
}
</style>
<script type="text/javascript" srcc="jquery-1.11.1.min.js"></script>
? ? ? ? <script type="text/javascript">
? ? $(document).ready(function() {
? ? ? ? ? ? ? ? $('#switcher').click(function(event) {?
? ? if ($(event.target).is('button')) {? ? ? ?
? ? var bodyClass = event.target.id.split('-')[1];? ? ? ?
$('body').removeClass().addClass(bodyClass);? ? ? ?
$('#switcher button').removeClass('selected');? ? ? ?
$(event.target).addClass('selected');? ? ? ?
event.stopPropagation();? ? ?
}? ?
});
var toggleSwitcher = function(event) {? ? ?
if (!$(event.target).is('button')) {? ? ? ?
$('#switcher button').toggleClass('hidden');? ? ?
}? ?
};? ?
$('#switcher').on('click.collapse', toggleSwitcher);
$('#switcher button').click(function() {? ? ?
$('#switcher').off('click.collapse');? ? ?
if (this.id == 'switcher-default') {? ? ? ?
$('#switcher').on('click.collapse', toggleSwitcher);? ? ?
}? ?
});?
? ? ? ? ? ? ? ? $('#switcher').click();
var triggers = {? ? ?
D: 'default',? ? ?
N: 'narrow',? ? ?
L: 'large'? ?
};? ?
$(document).keyup(function(event) {
var ascii = event.which;
var key = String.fromCharCode(ascii);?
if (key in triggers) {? ? ? ?
$('#switcher-' + triggers[key]).click();? ? ?
}? ?
});
});?
</script>
? ? </head>
? ? <body>
?
? ? ? ? <div id="container">
? ? <div id="switcher">
<h3>Style Switcher</h3>
<button id="switcher-default">
? Default
</button>
<button id="switcher-narrow">
? Narrow Column
</button>
<button id="switcher-large">
? Large Print
</button>
? ? ? ? <a id="aLink" href="http://www.baidu.com" >點擊測試</a>
? ? </div>
? ? <div id="header">
? ? <h2>A Christmas Carol</h2>
? ? <h2>In Prose, Being a Ghost Story of Christmas</h2>
? ? <div>by Charles Dickens</div>
? ? </div>
? ? <div id="chapter-preface">
? ? <h3>Preface</h3>
? ?
? ? <p>Their faithful Friend and Servant,</p>
? ? <p>C. D.</p>
? ? <p>December, 1843.</p>
? ? </div>
? ? <div id="chapter-1">
? ? <h3>Stave I: Marley's Ghost</h3>
? ??
? ? <p>Nobody ever stopped him in the street to say, with gladsome looks, "My dear Scrooge, how are you? </p>
? ? <p>But what did Scrooge care! It was the very thing he liked. </p>
</div>
</div>?
? ? </body>
</html>
?
