jQuery_01

T279liujie

已于 2022-03-18 10:40:05 修改

阅读量749

点赞数

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

于 2022-03-18 10:39:40 首次发布

本文链接：https://blog.csdn.net/T279liujie/article/details/123568583

版权

jQuery 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

这篇博客介绍了jQuery的基础知识，包括入门示例和选择器的使用。作者通过对比JavaScript的DOM操作展示了jQuery如何简便地获取元素值并触发事件。文章详细讲解了基本选择器、层次选择器、过滤选择器以及表单选择器的应用，还提供了表格隔行换色和表单数据获取的示例。最后，博客涵盖了点击按钮时如何获取表单中选中项的值。

摘要由CSDN通过智能技术生成

jQuery入门以及选择器

               //2.3过滤选择器
               // $("ul>li:eq(-1)").css("background","yellow");
               // $("ul>li:even").css("background","yellow");
               // $("ul>li:odd").css("background","yellow");
               // $("ul>li:gt(0):lt(3)").css("background","yellow");

               //案例五表格隔行换色
//                $("table tr:even").css("background","yellow")
//                $("table tr:odd").css("background","red")

               //2.4表单选择器
               $("#ok").click(function(){
                   // alert(1)
//                    var sex=$("#myf input:radio:cheked").val();
//                    console.info(sex)
//                    $("#myf input:checkbox:checked").each(function(){
//                        console.info($(this).val());
                   console.info($("#myf select option:selected").val());
                   // })
               })
           })
       </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中的段落</p>
           <span>大炮:睁开眼睛给我说话</span>
       </div>
       <div id="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>案例五</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>
           <tr>
               <td> </td>
               <td> </td>
           </tr>
       </table>
       <h4>2.5 表单选择器</h4>
       <form action="" id="myf">
           性别:<input type="radio" value="男" name="sex"/>男
               <input type="radio" value="女" name="sex" />女
           爱好:<input type="checkbox" value="打篮球" />打篮球
               <input type="checkbox" value="打豆豆" />打豆豆
               <input type="checkbox" value="干饭" />干饭<br>
           地址:
           <select>
               <option value ="湖南省">湖南省</option>
               <option value ="广东省">广东省</option>
               <option value ="湖北省">湖北省</option>
           </select>
           <input type="button" id="ok" value="确定" />
       </form>