一、练习一

1、需求效果分析：

2、代码示例：

！DOCTYPE html html xmlns=' http://www .w3。org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title/title脚本src=' http : jquery-1。9 .1/jquery。js/script脚本类型=' text/JavaScript ' $(function(){//方法一：jQuery //$('p ').单击(function(){//alert(this。文本内容))；////alert($(this).html())；//});//方法二：jQuery - for循环for(var I=0；i $('p ').长度；i ) { $('p')[i].onclick=function(){ alert($(this)).html())；};};});//方法三：JavaScript中的为循环/*窗口。onload=function(){ var temp=document。getelementsbytagname(' p ')；for(var I=0；一、温度长度；i ) { temp[i].onclick=function(){ alert(this。innerhtml)；};};} *//脚本/流浆池p隔壁爪哇老师很肥/p p隔壁爪哇老师很胖/p p隔壁爪哇老师很呆萌/p p隔壁爪哇老师爱捡肥皂/p p隔壁爪哇老师爱撒娇/p p隔壁爪哇老师装嫩/p p隔壁爪哇老师肾虚/p p隔壁爪哇老师等等/p p隔壁爪哇老师很肥/p p隔壁爪哇老师很肥/p p隔壁爪哇老师很肥/p p隔壁爪哇老师很肥/p p隔壁爪哇老师很肥/p p隔壁爪哇老师很肥/p p隔壁爪哇老师很肥/p p隔壁爪哇老师很肥/p p隔壁爪哇老师很肥/p p隔壁爪哇老师很肥/p p隔壁爪哇老师很肥/p p隔壁爪哇老师很肥/p/body/html二、练习二

1、效果分析：

2、代码示例

！DOCTYPE html html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title/title style type=' text/CSS ' p { display : none；border: 1px纯红；}/style脚本src=' http : jquery-1。9 .1/jquery。js '/script脚本类型=' text/JavaScript ' $(function(){ $(' Li ')).单击(function(){调试器；$(“唇”).hide()；$(这个.孩子).show()；});});/剧本/导演dy ul Li中国p台湾/p p钓鱼岛/p p北京/p /li li米国p华盛顿/p p洛杉矶/p /li li韩国p首尔/p p釜山/p p济州岛/p /li /ul/body/html三、练习三

1、效果分析

2、代码示例

！DOCTYPE html html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title/title style type=' text/CSS ' .box { border : 1px solid # aaccff；padd : 10pxmargin 3360 10px } . box 1 { border : 1px }固体# aacc 66 padd : 10pxmargin : 10px }。红色{ color : Red } p { padd : 10pxmargin 3360 10px }/style脚本src=' http : jquery-1。9 .1/jquery。js '/script脚本类型=' text/JavaScript ' $(function(){ $(' # my box ')).单击(function () { $('#mybox ')).css(“”边框，' 5px点绿色');});//$('.方框')。单击(function () { //$(').红色')。css(“”边框，' 5px点绿色');//});$(.方框1 ').单击(函数(){ $(“div”).css(“”边框，' 5px点绿色');});$('.方框')。单击(function () { $('#mybox，p ').css(“”边框，' 5px点绿色');});$('div[class='box red']').单击(function () { $(this)).兄弟姐妹()。hide()；$(.方框3 ').show()；});});函数find1() { $(' .红色')。css(“”边框，' 5px点绿色');};/script/head body div id=' my box ' class=' box 1 '点击我让所有编号为我的盒子的元素边框该为：5px点绿色=>提示$().css(“”边框，' 5px点绿色)/div class=' box ' onclick=' find 1()；'点击我让所有等级=红色的元素边框该为：5px点绿色/div class=' box 1 red ' onclick=' find 2()；'点击我让所有差异的元素边框该为：5px点绿色/div class=' box ' onclick=' find 3()；'点击我让编号为我的盒子的元素p元素边框该为：5px纯绿色/div class=' box red ' onclick=' find 4(this)；'点击我隐藏除了我以外所有的兄弟元素/div p我是段落./p/body/html以上这篇JQuery选择器、DOM节点操作练习实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。