jQurey入门以及选择器

m0_68285828

已于 2022-03-17 22:31:25 修改

阅读量181

点赞数

文章标签： java

于 2022-03-17 22:31:24 首次发布

本文链接：https://blog.csdn.net/m0_68285828/article/details/123562701

版权

<html>
   <head>
       <meta charset="utf-8" />
       <title>JQurey入门以及选择器</title>
       <script type="text/javascript"></script>
       <script type="text/javascript">
           /* window.οnlοad=function(){//页面加载函数
               //找到按钮
               var b=document.getElementById("btna");
               //给按钮添加点击事件匿名函数
               b.οnclick=function(){
                   //拿到文本框的值
                   var a=document.getElementById("aa");
                   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.基本选择器——层次选择器
               // $("#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(1)").css("background","yellow");//正数加-号倒数
               // $("ul>li:even").css("background","yellow");//偶数下标奇数行
               // $("ul>li:odd").css("background","yellow");//奇数下标偶数行
               // $("ul>li:lt(0)").css("background","yellow");//大于
               // $("ul>li:gt(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 inpuy:radio:checked").val();
//                    console.info(sex);
//                    //拿爱好
//                    $("#myForm inpuy:checkbox:checked").each(function(){
//                        console.info($(this).val());
//                    })
//                    //拿地址
//                    vat addrsss=$("#myForm select option:selected").val();
//                    console.info(address);
               })
           })
       </script>
   </head>
   <body>
       <h2>JQurey入门以及选择器</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>
       <pre>
           

       </pre>
       <h4>2.3过滤选择器</h4>
       <ul>
           <li>0-大炮</li>
           <li>1-欧董</li>
           <li>2-王俊</li>
           <li>3-睡梦</li>
           <li>4-罗汉</li>
       </ul>
       <pre>

       </pre>
       <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" name="sex" value="男" />男
               <input type="radio" name="sex" value="女" />女<br/>
           爱好：<input type="checkbox" value="吃饭" />吃饭
               <input type="checkbox" value="睡觉" />睡觉
               <input type="checkbox" value="看美女" />看美女<br/>

           地址：
           <select>
               <option value ="湖南">湖南</option>
               <option value ="广东">广东</option>
               <option value ="湖北">湖北</option><br/>
           </select><br/>
           <input type="button" id="ok" value="提交" />
       </form>

   </body>
</html>

m0_68285828

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQurey入门以及选择器

<html> <head> <meta charset="utf-8" /> <title>JQurey入门以及选择器</title> <script type="text/javascript"></script> <script type="text/javascript"> /* window.onload=fu...
复制链接

扫一扫