jQuery入门及选择器

最新推荐文章于 2024-11-13 01:18:00 发布

m0_67294268

最新推荐文章于 2024-11-13 01:18:00 发布

阅读量58

点赞数 1

文章标签： jquery javascript ecmascript

本文链接：https://blog.csdn.net/m0_67294268/article/details/123579197

版权

<!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">
           //页面载入函数相当于window.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");//通配符:所有页面元素
               // $("p,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:last").css("background","yellow");//最后一一个
               //$("ul>li:eq(-2)").css("background","yellow");//倒数下标找到指定位置的
               //            $("ul>li:even").css("background","yellow");//偶数下标奇数行
               //            $("ul>li:odd").css("background","yellow");//奇数下标偶数行

               // $("ul>li:gt(0)").css("background","yellow");//大于
               // $("ul>li:lt(4)").css("background","yellow");//小于
               //注意: 先小于后大于
               // $("ul>li:lt(4):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-2.2 基本选择器&层次选择器</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-席大炮好s</li>
           <li>1-网红明bt</li>
           <li>2-建敏dm</li>
           <li>3-欧阳钦ds</li>
           <li>4-王俊nt</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="" id="myForm">
           性别:<input type="radio" value="男" name="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>