初识JQuery，上课笔记

来源：互联网发布：日语软件测试工程师编辑：程序博客网时间：2024/05/14 20:12

1.JQurey 基本应用

<script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript">function onChoose() {var username = $("#name").val();alert(username);}function onChooseA(obj) {//js原生态对象。//jq对象$(obj)，是经过包装的alert($(obj).val());}function onChooseB() {var div1 = $("#div1");alert(div1.text());}//标签选择器function onChooseC() {var div= $("div");//遍历所有某个标签的值div.each(function(i) {alert($(this).text());});}//遍历所有同id标签function onChooseD() {   var classs=$("#div1");   classs.each(function(i) {   alert("第"+ ++i +"个"+$(this).text());});}//类型选择器function onChooseE() {//嵌套标签，上级调用下级class注意打空格//多个div用逗号隔开   var span=$("div,div .a");   alert($(span).text());}function onChooseF() {//空格找其下级所有（子孙）   var span=$("p input");    span.each(function(i) {   alert("第"+ ++i +"个"+$(this).val());});}function onChooseG() {//>只找下级（儿子）   var span=$("p>input");    span.each(function(i) {   alert("第"+ ++i +"个"+$(this).val());});}function onChooseH() {//+找同级第一个（兄弟）   var span=$("span + input");    span.each(function(i) {   alert("第"+ ++i +"个"+$(this).val());});}function onChooseI() {//+找同级所有（兄弟）   var span=$("span ~ input");    span.each(function(i) {   alert("第"+ ++i +"个"+$(this).val());});}function onChooseJ() {$("#first").fadeIn();$("#two").fadeIn("slow");$("#three").fadeIn("3000");}//筛选器function onChooseK() {//查找第一个标签的值  var span=$("li:first");   alert($(span).text());}function onChooseL() {//:not(:属性值) 排除。。。。。   var span=$("p>input:not(:text)");    span.each(function(i) {   alert("第"+ ++i +"个"+$(this).val());});}function onChooseM() {  var span=$("li:eq(3)");   alert($(span).text());}</script></head><body><input type="button" value="试一试 " onclick="onChoose()"><input type="button" value="试一试 " onclick="onChooseA(this)"><input type="button" value="试一试 " onclick="onChooseB()"><input type="button" value="试一试 " onclick="onChooseC()"><input type="button" value="试一试 " onclick="onChooseD()"><input type="button" value="试一试 " onclick="onChooseE()"><input type="button" value="试一试 " onclick="onChooseF()"><input type="button" value="试一试 " onclick="onChooseG()"><input type="button" value="试一试 " onclick="onChooseH()"><input type="button" value="试一试 " onclick="onChooseI()"><input type="button" value="试一试 " onclick="onChooseJ()"><input type="button" value="试一试 " onclick="onChooseK()"><input type="button" value="试一试 LLL" onclick="onChooseL()"><input type="button" value="试一试 LLL" onclick="onChooseM()"><br> 用户名：<input type="text" id="name"><div id="div1" style="width: 100ps;height: 100px;color: green;">谁的手机号</div><div id="div1" style="width: 100ps;height: 100px;color: green;">水电费刚回家</div><div>     <span class="a">我可复杂了</span></div><p>   <span>      <input >   </span>   <input type="text" value="111">   <input type="checkbox" value="woman">woman   <input type="radio" value="man">man</p><div id="first" style="width: 100px;height: 100px;display:none; background: blue;" ></div><div id="two" style="width: 100px;height: 100px;background: violet;display:none; "></div><div id="three" style="width: 100px;height: 100px;background: pink;display:none; "></div><ul>  <li>111</li>   <li>222</li>    <li>333</li>     <li>444</li>      <li>555</li></ul></body>

阅读全文

1 0