jQuery 学习（二）

来源：互联网发布：世界ol装备进阶数据编辑：程序博客网时间：2024/06/05 17:50
觉得学习选择器也算是学习了css。真是前端一家亲。
主要学到的是jQuery的DOM筛选和遍历查找。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>learnJquery-2</title><script type="text/javascript" src="jquery-2.1.1.js"></script><style type="text/css">#outer{/*position: relative;*/}#wrap{/*position: absolute;*/}</style></head><body><p class="first">I Am The 11111 p tag</p><p class="second">I Am The 22222 p tag</p><p class="third">I Am The 33333 p tag</p><p class="fourth">I Am The 44444 p tag</p><p class="">I Am The 55555 p tag</p><p>I Am The 66666 p tag</p><p>I Am The 77777 p tag</p><div id="outer">outer<div id="wrap">wrap<p id="p1">I am<span>the 1</span>p tag</p><div>i am div 2</div><p>I am the 2 p tag</p><p id="p3">I am the 3 p tag</p><p>I am the 4 p tag</p><p>I am the 5 p tag</p><div>I am div</div></div></div><form action=""><input type="text" name="alert" id="" value="I am the 1111 input" /><input type="text" name="alert" id="" value="I am the 2222 input" /><input type="text" name="alert" id="" value="I am the 3333 input" /><input type="text" name="alert" id="" value="I am the 4444 input" /><input type="checkbox" name="" id="" value="I am the checkbox1[] " /><input type="checkbox" name="" id="" value="I am the femal " /><input type="checkbox" name="" id="" value="I am the male " /><input type="checkbox" name="" id="" value="I am the secret " /><input type="sbumit" name="" id="" value="I post" /><input type="reset" value="reset" /></form><!-- JS JQuery  --><!-- jquery的DOM 方法操作，不同于选择器！！！ --><!-- 所有的选择器只能操作一个，所有的选择器都能在dom操作中使用通过filter()函数等函数!!!! --><script type="text/javascript">// $('p').eq(1).css('background', 'green');// $('p').filter(':odd').css('background', 'green');// $('p').filter(':last').css('background', 'green');// $('p').filter('.first').css('background', 'green');// $('p').filter(':contains("111")').css('background', 'green');// $('p').filter('[class="fourth"]').css('background', 'green');// $('p').click(function() {if($(this).is('.second')) {$(this).css('background', 'green');};});// $('p').not('.first').css('background', 'green');// $('p').slice(0, 1).css('background', 'green');/*遍历查找*/// $('#wrap>p').css('background', 'pink');// $('#wrap').children('p').css('background', 'pink');// $('#wrap').children().css('background', 'pink');// $('#wrap').children().not('div').css('background', 'pink');// $('#p1').parent().css('background', 'red');// $('#p1').parents().css('background', 'red');// $('#p1').parents('#outer').css('background', 'red');// $('#p1').offsetParent().css('background', 'red');// $('#p1').next().css('background', 'green');// $('#p1').next('div').css('background', 'green');// $('#p1').nextAll().css('background', 'green'); //$('#p1').nextAll().not('div').css('background', 'green');//$('#p1').nextAll('p').css('background', 'green');// $('#p3').prev().css('background', 'green');// $('#p3').prevAll().css('background', 'green');//!!!!!Important below!// $('#p3').siblings().css('background', 'green');// $('#p3').siblings('div').css('background', 'green');// $('span').parent().css('background', 'green');// $('span').parent().css('background', 'green').end().css('background', 'pink');// alert($('input').val());    /*$('input').each(function() {    alert($(this).val())    });*///  zhuan yi zi fu \\ huo zhe \/*$('input[name=alert]').click(function() {alert($(this).val());});*/</script></body></html>
0 0