jQuery-01

最新推荐文章于 2022-07-24 23:26:28 发布

weixin_65128149

最新推荐文章于 2022-07-24 23:26:28 发布

阅读量523

点赞数

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

本文链接：https://blog.csdn.net/weixin_65128149/article/details/123560472

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <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">
           //            //页面载入函数
           //            $(function(){
           //                var b=$("#btnb");//拿到按钮
           //                b.click(function(){
           //                    var c=$("#aa").val();
           //                        alert(c);
           //            })

           //二选择器
           //2.1 基本选择器
           // $("#xx").css("background","yellow");//id选择器
           // $(".yy").css({"background":"yellow"} );//id选择器
           //            $("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");//兄弟关系

           //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:selection").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 基本选择器</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>
           <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" id="ok" value="确定" />
       </form>
       <pre>

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

weixin_65128149

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery-01

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> // window.onload=function(){ // ...
复制链接

扫一扫

专栏目录