HTML-jQuery入门

来源：互联网发布：淘宝电影票能退吗编辑：程序博客网时间：2024/06/06 09:18

参考资料：
jQuery中文在线手册

jQuery入门

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>jquery入门</title>        <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>        <script>            $(function(){                alert("hello jquery!");            });        </script>    </head>    <body>    </body></html>

JS与JQ页面加载区别

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>JS与JQ页面加载区别</title>        <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>        <script>            window.onload = function(){                alert("张三");            }            //传统的方式页面加载会存在覆盖问题，加载比JQ慢(整个页面加载完毕<包括里面的其它内容，比如图片>)            window.onload = function(){                alert("老王");            }            //JQ的加载比JS加载要快！(当整个dom树结构绘制完毕就会加载)            jQuery(document).ready(function(){                alert("李四");            });            //JQ不存在覆盖问题，加载的时候是顺序执行            $(document).ready(function(){                alert("王五");            });            //简写方式            $(function(){                alert("汾九");            });        </script>    </head>    <body>    </body></html>

JQ获取

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>JQ的获取</title>        <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>        <script>            $(function(){                //1.JS方式获取                /*document.getElementById("btn").onclick= function(){                    location.href="惊喜.html";                }*/                //2.JQ方式获取=====>>>$("#btn")                $("#btn").click(function(){                    location.href="惊喜.html"                });            });        </script>    </head>    <body>        <input type="button" value="点我有惊喜" id="btn"/>    </body></html>

Dom与JQ对象之间的转换

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>Dom与JQ对象之间的转换</title>        <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>        <script>            function write1(){                //1.JS的DOM操作                //document.getElementById("span1").innerHTML="萌萌哒！";                //DOM对象无法操作JQ对象里面属性和方法                //document.getElementById("span1").html("萌萌哒！");                var spanEle = document.getElementById("span1");                //将DOM对象转换成JQ对象                $(spanEle).html("思密达");            }            $(function(){                $("#btn").click(function(){                    //JQ对象无法操作JS里面的属性和方法！！！                    //$("#span1").innerHTML="呵呵哒！"                    $("#span1").html("呵呵哒！");                    //JQ对象向DOM对象转换方式一                    $("#span1").get(0).innerHTML="美美哒！";                    //JQ对象向DOM对象转换方式二                    $("#span1")[0].innerHTML="棒棒哒！";                });            });        </script>    </head>    <body>        <input type="button" value="JS写入" onclick="write1()"/>        <input type="button" value="JQ写入" id="btn"/><br />        班长：<span id="span1">你好帅！</span>    </body></html>

jQuery基本选择器

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>基本选择器</title>        <link rel="stylesheet" href="../../css/style.css" />        <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>        <script>            $(function(){                $("#btn1").click(function(){                    $("#one").css("background-color","pink");                });                $("#btn2").click(function(){                    $(".mini").css("background-color","pink");                });                $("#btn3").click(function(){                    $("div").css("background-color","pink");                });                $("#btn4").click(function(){                    $("*").css("background-color","pink");                });                $("#btn5").click(function(){                    $("#two,.mini").css("background-color","pink");                });            });        </script>    </head>    <body>        <input type="button" id="btn1" value="选择为one的元素"/>        <input type="button" id="btn2" value="选择样式为mini的元素"/>        <input type="button" id="btn3" value="选择所有的div元素"/>        <input type="button" id="btn4" value="选择所有元素"/>        <input type="button" id="btn5" value="选择id为two并且样式为mini的元素"/>        <hr/>        <div id="one">            <div class="mini">                111            </div>        </div>        <div id="two">            <div class="mini">                222            </div>            <div class="mini">                333            </div>        </div>        <div id="three">            <div class="mini">                444            </div>            <div class="mini">                555            </div>            <div class="mini">                666            </div>        </div>        <span id="four">        </span>    </body></html>

jQuery层级选择器

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>层级选择器</title>        <link rel="stylesheet" type="text/css" href="../../css/style.css"/>        <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>        <script type="text/javascript">            $(function(){                $("#btn1").click(function(){                    $("body div").css("background-color","gold");                });                $("#btn2").click(function(){                    $("body>div").css("background-color","gold");                });                $("#btn3").click(function(){                    $("#two+div").css("background-color","gold");                });                $("#btn4").click(function(){                    $("#one~div").css("background-color","gold");                });            });        </script>    </head>    <body>        <input type="button" id="btn1" value="选择body中的所有的div元素"/>        <input type="button" id="btn2" value="选择body中的第一级的孩子"/>        <input type="button" id="btn3" value="选择id为two的元素的下一个元素"/>        <input type="button" id="btn4" value="选择id为one的所有的兄弟元素"/>        <hr/>        <div id="one">            <div class="mini">                111            </div>        </div>        <div id="two">            <div class="mini">                222            </div>            <div class="mini">                333            </div>        </div>        <div id="three">            <div class="mini">                444            </div>            <div class="mini">                555            </div>            <div class="mini">                666            </div>        </div>        <span id="four">        </span>    </body></html>

jQuery基本过滤选择器

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>基本过滤选择器</title>        <link rel="stylesheet" href="../../css/style.css" type="text/css"/>        <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>        <script>            $(function(){                $("#btn1").click(function(){                    $("body div:first").css("background-color","red");                });                $("#btn2").click(function(){                    $("body div:last").css("background-color","red");                });                $("#btn3").click(function(){                    $("body div:odd").css("background-color","red");                });                $("#btn4").click(function(){                    $("body div:even").css("background-color","red");                });            });        </script>    </head>    <body>        <input type="button" id="btn1" value="body中的第一个div元素"/>        <input type="button" id="btn2" value="body中的最后一个div元素"/>        <input type="button" id="btn3" value="选择body中的奇数的div"/>        <input type="button" id="btn4" value="选择body中的偶数的div"/>        <hr/>        <div id="one">            <div class="mini">                111            </div>        </div>        <div id="two">            <div class="mini">                222            </div>            <div class="mini">                333            </div>        </div>        <div id="three">            <div class="mini">                444            </div>            <div class="mini">                555            </div>            <div class="mini">                666            </div>        </div>        <span id="four">        </span>    </body></html>

jQuery属性选择器

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>属性选择器</title>        <link rel="stylesheet" href="../../css/style.css" />        <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>        <script>            $(function(){                $("#btn1").click(function(){                    $("div[id]").css("background-color","red");                });                $("#btn2").click(function(){                    $("div[id='two']").css("background-color","red");                });            });        </script>    </head>    <body>        <input type="button" id="btn1" value="选择有id属性的div"/>        <input type="button" id="btn2" value="选择有id属性的值为two的div"/>        <hr/>        <div id="one">            <div class="mini">                111            </div>        </div>        <div id="two">            <div class="mini">                222            </div>            <div class="mini">                333            </div>        </div>        <div id="three">            <div class="mini">                444            </div>            <div class="mini">                555            </div>            <div class="mini">                666            </div>        </div>        <span id="four">        </span>    </body></html>

jQuery表单选择器

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>表单选择器</title>    </head>    <body>        <input type="button" id="btn1" value="选择所有input元素" />        <input type="button" id="btn2" value="选择文本框" />        <br/>        <form>            <input type="text" /><br />            <input type="checkbox" /><br />            <input type="radio" /><br />            <input type="image" /><br />            <input type="file" /><br />            <input type="submit" />            <input type="reset" /><br />            <input type="password" /><br />            <input type="button" /><br />            <select><option/></select><br />            <textarea></textarea><br />            <button></button>        </form>    </body></html>

jQuery实现复选框的全选和全不选

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>使用jQuery完成复选框的全选和全不选</title>        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>        <!--<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>-->        <script>            $(function(){                $("#select").click(function(){                    //获取下面所有的 复选框并将其选中状态设置跟编码的前端 复选框保持一致。                    //attr方法与JQ的版本有关，在1.8.3及以下有效。                    //$("tbody input").attr("checked",this.checked);                    $("tbody input").prop("checked",this.checked);                });            });        </script>    </head>    <body>        <table border="1" width="500" height="50" align="center" id="tbl" >            <thead>                <tr>                    <td colspan="4">                        <input type="button" value="添加" />                        <input type="button" value="删除" />                    </td>                </tr>                <tr>                    <th><input type="checkbox" id="select"></th>                    <th>编号</th>                    <th>姓名</th>                    <th>年龄</th>                </tr>            </thead>            <tbody>                <tr >                    <td><input type="checkbox" class="selectOne"/></td>                    <td>1</td>                    <td>张三</td>                    <td>22</td>                </tr>                <tr >                    <td><input type="checkbox" class="selectOne"/></td>                    <td>2</td>                    <td>李四</td>                    <td>25</td>                </tr>                <tr >                    <td><input type="checkbox" class="selectOne"/></td>                    <td>3</td>                    <td>王五</td>                    <td>27</td>                </tr>                <tr >                    <td><input type="checkbox" class="selectOne"/></td>                    <td>4</td>                    <td>赵六</td>                    <td>29</td>                </tr>                <tr >                    <td><input type="checkbox" class="selectOne"/></td>                    <td>5</td>                    <td>田七</td>                    <td>30</td>                </tr>                <tr >                    <td><input type="checkbox" class="selectOne"/></td>                    <td>6</td>                    <td>汾九</td>                    <td>20</td>                </tr>            </tbody>        </table>    </body></html>

阅读全文

0 0