jQuery 入门&选择器

小然688

于 2022-03-18 09:02:35 发布

阅读量785

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_65089602/article/details/123565621

版权

该博客介绍了jQuery的基本用法，包括通过ID、标签、通配符等选择器操作DOM元素，以及过滤选择器的应用，如`:first`, `:last`, `:eq()`, `:even`和`:odd`等。还展示了如何使用jQuery处理表单元素，如获取选中项的值，并演示了在表格中实现隔行变色的效果。

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

<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"});
               // $("div").css("background","yellow");//标签选择器=元素选择器
               // $("*").css("background","yellow");//通配符代表全部

// $("p,span").css("background","yellow");//并集
// $("div span").css("background","yellow");//所有后代

               // $("div>span").css("background","yellow");//父子关系
               // $("p+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(4):gt(0)").css("background","yellow");//先小于再大于

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

               // 2.4表单选择器
               /* $("#ok").click(function() {
                   //拿性别
                                   var sex=$("#myForm input:radio:checked").val();
                                   console.info(sex)
                   //拿爱好
                                   var h=$("#myForm input:checkbox:checked").each(function(){
                                       console.info($(this).val());
                                   })

                   //拿地址
                                   var add=$("#myForm select option:selected").val();
                                                   console.info(add);

               }) */
           })
       </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里面的段落7nbsp;<span>嘻嘻嘻嘻嘻嘻</span></p>
           <span>哈哈哈哈哈哈哈哈哈哈哈</span>
       </div>
       <div id="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>
       </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.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>