【无标题】

最新推荐文章于 2024-01-18 23:25:36 发布

nncwww

最新推荐文章于 2024-01-18 23:25:36 发布

阅读量110

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/nncwww/article/details/123583979

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>jQuery入门以及选择器</title>
       <script type="text/javascript">
           /* window.οnlοad=function(){//页面加载函数
               //找到按钮
               var b =document.getElementById("btna");
               //给按钮添加点击事件匿名函数
               b.οnclick=function(){
                   //拿到文本框的值
                   var a =document.getElementById("aa").value;
                   alert(a);
               }
           } */



       </script>
       
       <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>

       <script type="text/javascript">
           //页面载入函数相当于windw.onload
           $(function(){
               /* //案例一
               var b =$("#btnb");//拿到按钮
               b.click(function(){//添加到点击事件
                   var a =#("#aa").val();//获取文本框的值
                   alert(a);
               }) */

               //二选择器
               //2.1基本选择器
               //$("#xx").css("background","yellow");//id选择器
               //$(".yy").css({"background":"yellow","color":"red"});//id选择器
               //$("div").css("background","yellow");//标签选择器=元素选择器
               // $("*").css("background","yellow");//所有页面元素
// $("div,span").css("background","yellow");//并集
// $("div span").css("background","yellow");//并集   所有的后代
// $("div>span").css("background","yellow");//父子关系
// $("div p+span").css("background","yellow")//兄弟关系

           // 2.3过滤选择器
               // $("ul>li:first").css("background","yellow");第一个
               // $("ul>li:lasr").css("background","yellow");最后一个
               // $("ul>li:eq(-1)").css("background","yellow");//倒数第几个下标
           // $("ul>li:even").css("background","yellow"); //偶数下标奇数行
           // $("ul>li:odd").css("background","yellow"); //奇数下标偶数行
               // $("ul>li:gt(0)").css("background","yellow");

           //案例5 ：表格隔行换色
               // $("table tr:even").css("background","yellow");
               // $("table tr:odd").css("background","pink");


           //2.4表单选择器
           $("#ok").click(function(){
               //拿性别的值
               // var sex =$("#myForm input；radio:checked").val();
               //console.info(sex);
               //拿爱好
//                $("#myForm input:checkbox:checked").each(function(){
//                    console.info($(this).val());
//                })
//拿地址
               var address= $("#myForm select option:selected").val();
               console.info(address);
           })
           })
       </script>
   </head>
   <body>
       <h2>jQuery入门以及选择器</h2>
       <h3>一、入门</h3>
       <h4>1.1点击按钮弹出文本框的值(js对比jQuery)</h4>
       <input type="text" id="aa"/>
       <input type="button" value="点击(纯js方式)" id="btna"/>
       <input type="button" value="点击(jQuery方式)" id="btnb"/>
       <h3>二、选择器</h3>
       <h4>2.1 基本选择器</h4>
       <div id="xx">
           <p>这是第一个div中的段落 <span>童锦程</span></p>
           <span>道德绑架</span>
       </div>
       <div class="yy">
           这是第二个div
       </div>
       <p>这是外面的段落</p>
       <span>张万森</span>
       <h4>2.3 过滤选择器</h4>
       <ul>
           <li>0-小胖好胖</li>
           <li>1-张万森</li>
           <li>2-欧阳健敏</li>
           <li>3-中二患者</li>
           <li>4-童锦程</li>
           <li>5-舔狗</li>
       </ul>
       <h4>案例5</h4>
       <table border="1px" width="50%">
           <tr>
               <td> </td>
               <td> </td>

           </tr>
           <tr>
              <td> </td>
              <td> </td>

           </tr>
           <tr>
              <td> </td>
              <td> </td>

           </tr>
           <tr>
              <td> </td>
              <td> </td>

           </tr>
           <tr>
              <td> </td>
              <td> </td>

           </tr>
       </table>
<h4>2.4表单选择器</h4>
       <form action=" myForm">
               性别:<input type="radio" value="男"/nname="sex">男
               <input type="radio" value="女"/ name="sex">女<br />
               爱好:<input type="checkbox" value="打球" />打球
               :<input type="checkbox" value="抽烟" />抽烟
               :<input type="checkbox" value="干饭" />干饭<br />
               地址:
               <select>
                   <option value="湖南省">湖南省</option>
                   <option value="福建省">福建省</option>
                   <option value="广东省">广东省</option>
               </select><br />
               <input type="button" value="确定" id="ok"/>
           </form>
       <pre>
       </pre>
   </body>
</html>