jQuery01-CSDN博客

本文链接：https://blog.csdn.net/weixin_65088316/article/details/123566615

<!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(){
//                    // alert(1);
//                    var a=document.getElementById("aa").value;
//                    alert(a);
//                }
//            }
       </script>
       <script crc="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":li(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());
//拿地址
$("myForm select option:selected").val();
console.info(address);
   });

})
})
       </script>
   </head>
   <body>
       <h2>jQuery入门已经选择器</h2>
       <h3>1. 入门</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>2.选择器</h3>
       <h4>2.1-2.2基本选择器&层级选择器</h4>
       <div ia="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>&nbsp</td>
               <td>&nbsp</td>
           </tr>
           <tr>
               <td>&nbsp</td>
               <td>&nbsp</td>
           </tr>
           <tr>
               <td>&nbsp</td>
               <td>&nbsp</td>
           </tr>
           <tr>
               <td>&nbsp</td>
               <td>&nbsp</td>
           </tr>
           <tr>
               <td>&nbsp</td>
               <td>&nbsp</td>
           </tr>
           <tr>
               <td>&nbsp</td>
               <td>&nbsp</td>
           </tr>
           <h4>2.4 表单选择器</h4>
           <form action="">
               性别 :<input type="radio" value="男" name="sex" />男
               <input type="radio" value="女" name="sex" />女<br />
               <input type="radio" value="妖" name="ssex" />妖
               爱好 :<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" value="确定" id="ok"/>
           </form>
       <pre>



       </pre>
   </body>
</html>