1.窗体运行就加载函数的dom写法与jQuery的区别与jQuery的三种写法
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
- <html>
- <head>
- <title>demo1.html</title>
- <!-- 引入jQuery的库 -->
- <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
- <script type="text/javascript">
- /* 第一种写法:第二种winod.onload会覆盖第一种
- window.onload = function(){
- alert("one");
- };
- window.onload = function(){
- alert("two");
- }; */
- /* 第二种写法:同样后面的也会覆盖前面的
- var one=function one(){
- alert("one");
- };
- var two=function one(){
- alert("two");
- };
- window.onload = one;
- window.onload = two; */
- //下面三种jQuery的写法,可以同时加载触发事件
- /* //第一种:
- $(function(){
- alert("one");
- });
- $(function(){
- alert("two");
- });
- //第二种:
- $(document).ready(function(){
- alert("hello one");
- });
- $(document).ready(function(){
- alert("hello two");
- });
- */
- //第三种:
- $().ready(function(){
- alert("hello one");
- });
- $().ready(function(){
- alert("hello two");
- });
- </script>
- </head>
- <body>
- <div>
- </div>
- </body>
- </html>
- 2.仿各大网站的注册插件之jquery编写的条款多选框
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
- <html>
- <head>
- <title>demo2.html</title>
- <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
- <script type="text/javascript">
- $(document).ready(function(){ //当窗体加载完毕触发匿名函数
- //id选择器
- var $submitBtn = $("#submitBtn");
- /* //为按钮注册点击事件
- $submitBtn.click(function(){
- alert("点击");
- }); */
- /* //通过jQuery对象与dom对象相互转换完成操作
- //为按钮绑定点击事件;第一个参数是绑定事件的类型,第二个参数是触发的函数
- $submitBtn.bind("click",function(){
- var $ckb = $("#agreeckb"); //获取checkbox的元素对象
- //把jQuery对象转换成dom对象
- var ckbDom = $ckb[0]; //通过数组下表获取,还有一种通过get(index);
- if(ckbDom.checked){
- alert("同意注册");
- }else{
- alert("请选择同意条款");
- }
- }); */
- //直接通过jQuery对象的操作实现操作
- $submitBtn.click(function(){
- var $ckb = $("#agreeckb");
- //:checked 是表单过滤器必须这样写!
- if($ckb.is(":checked")){
- alert("同意注册");
- }else{
- alert("请选择同意条款");
- }
- });
- });
- </script>
- </head>
- <body>
- 注册条款:<input type="checkbox" id="agreeckb"/>我已仔细阅读并接受注册条款
- <input type="button" value="注册" id="submitBtn"/>
- </body>
- </html>
- 3.Jquery的左右移动
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
- <html>
- <head>
- <title>demo3.html</title>
- <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
- <script type="text/javascript">
- $(document).ready(function() {
- //获取按钮的元素对象
- var $lromve = $("#lromve");
- var $lromves = $("#lromves");
- //右移操作
- //绑定click事件,选中的右移
- $lromve.bind("click", function() {
- //选取id=lopt下面的所有子元素为option的并且被选中的option对象的集合
- var $opts = $("#lopt>option:selected");
- //在id=ropt的的select中添加option对象集合
- $("#ropt").append($opts);
- });
- //绑定click事件;全部右移
- $lromves.bind("click", function() {
- var $opts = $("#lopt>option");
- $("#ropt").append($opts);
- });
- //双击的右移操作
- $("#lopt").bind("dblclick", function() {
- //选取id=lopt下面的所有子元素为option的并且被选中的option对象的集合
- var $opts = $("#lopt>option:selected");
- //在id=ropt的的select中添加option对象集合
- $("#ropt").append($opts);
- });
- //左移操作
- //获取按钮的元素对象
- var $rromve = $("#rromve");
- var $rromves = $("#rromves");
- //绑定click事件
- $rromve.bind("click", function() {
- //选取id=lopt下面的所有子元素为option的并且被选中的option对象的集合
- var $opts = $("#ropt>option:selected");
- //alert($opts.text);
- //在id=ropt的的select中添加option对象集合
- $("#lopt").append($opts);
- });
- //绑定click事件
- $rromves.bind("click", function() {
- var $opts = $("#ropt>option");
- $("#lopt").append($opts);
- });
- //双击的左移操作
- $("#ropt").bind("dblclick", function() {
- //选取id=lopt下面的所有子元素为option的并且被选中的option对象的集合
- var $opts = $("#ropt>option:selected");
- //在id=ropt的的select中添加option对象集合
- $("#lopt").append($opts);
- });
- });
- </script>
- </head>
- <body>
- <div>
- <div style="float: left; width: 200px; height: 300px; background-color: lightsteelblue; text-align: center;">
- <select id="lopt" multiple="multiple" size="9" style="width:80px;">
- <option>选项1</option>
- <option>选项2</option>
- <option>选项3</option>
- <option>选项4</option>
- <option>选项5</option>
- <option>选项6</option>
- <option>选项7</option>
- <option>选项8</option>
- <option>选项9</option>
- </select><br><br><input type="button" id="lromves" value="全部右移"
- style="width: 80px;" /><input type="button" id="lromve"
- value="选中的右移" style="width: 80px;" />
- </div>
- <div style="width: 200px; height: 300px; background-color: red; text-align: center;">
- <select id="ropt" multiple="multiple" size="9" style="width: 80px;">
- </select><br><br><input type="button" id="rromves" value="全部左移"
- style="width: 80px;" /><input type="button" id="rromve"
- value="选中的左移" style="width: 80px;" />
- </div>
- </div>
- </body>
- </html>
- 4.jquery的多选反选和全不选
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
- <html>
- <head>
- <title>demo4.html</title>
- <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
- <script type="text/javascript">
- $(document).ready(function() {
- //全选
- $("#ckbAll").click(function() {
- $("input[name='fav']").each(function() {
- this.checked = true; //dom对象写法
- });
- //$("input[name='fav']").attr("checked", true); //jQuery对象写法,有bug,点击两回之后就不起作用了
- });
- //选不选
- $("#ckbNo").click(function() {
- $("input[name='fav']").attr("checked", false);
- });
- //反选
- $("#ckbRec").click(function() {
- $("input[name='fav']").each(function() {
- //$(this).attr("checked", !$(this).attr("checked")); //jQuery对象的写法
- this.checked = !this.checked; //dom对象写法
- });
- });
- });
- </script>
- </head>
- <body>
- <div>
- <input type="checkbox" name="fav" value="看书1" />看书1 <input
- type="checkbox" name="fav" value="看书2" />看书2 <input type="checkbox"
- name="fav" value="看书3" />看书3 <input type="checkbox" name="fav"
- value="看书4" />看书4 <input type="checkbox" name="fav" value="看书5" />看书5
- </div>
- <div>
- <input type="button" value="全选" id="ckbAll"/>
- <input type="button" value="全不选" id="ckbNo" />
- <input type="button" value="反选" id="ckbRec" />
- </div>
- </body>
- </html>
- 5.仿各大网站的注册移走光标变色操作
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
- <html>
- <head>
- <title>demo5.html</title>
- <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
- <script type="text/javascript">
- $(document).ready(function() {
- /* $("input").bind("blur",function(){
- }); */
- //:input获取的是所有input标签中的各种类型的元素对象,以及textarea、select等多种标签;input只获取前者,即input标签所属的属性
- $(":input").blur(function(){
- $(this).each(function(){
- //if(""==this.value.trim()){
- if(""==$(this).val().trim()){
- $(this).addClass("blur");
- }else{
- $(this).removeClass("blur");
- }
- });
- });
- });
- </script>
- <style type="text/css">
- .blur{
- border:1px solid red;
- }
- </style>
- </head>
- <body>
- <form action="">
- 用户名:<input type="text" name="ubane"/><br><br>
- 密 码:<input type="password" name="ubane"/><br><br>
- 邮 箱:<input type="text" name="ubane"/><br><br>
- 个人介绍:<textarea rows="10" cols="30"></textarea>
- </form>
- </body>
- </html>
- 6.tbody交替变色操作
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
- <html>
- <head>
- <title>demo2.html</title>
- <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
- <script type="text/javascript">
- //当文档加载完毕触发匿名函数
- $(document).ready(function(){
- //有点区别,研究一下
- $("tbody tr:even").css("background-color","blue");
- $("tbody>tr:nth-child(even)").css("background-color","yellow");
- $("tbody>tr:nth-child(odd)").css("background-color","red"); //会替换红颜色
- });
- </script>
- </head>
- <body>
- <table border="1" bordercolor="teal">
- <thead>
- <th>序号</th>
- <th>姓名</th>
- <th>性别</th>
- <th>职位</th>
- </thead>
- <tbody>
- <tr id="row1" bgcolor="red" title="aa">
- <td>1</td>
- <td>redarmy</td>
- <td>M</td>
- <td>僵尸</td>
- </tr>
- <tr id="row2">
- <td>2</td>
- <td>kai</td>
- <td>M</td>
- <td>牛掰</td>
- </tr>
- <tr id="row3">
- <td>3</td>
- <td>redarmy2</td>
- <td>M</td>
- <td>僵尸</td>
- </tr>
- <tr id="row4">
- <td>4</td>
- <td>redarmy3</td>
- <td>M</td>
- <td>僵尸</td>
- </tr>
- <tr>
- <td>5</td>
- <td>redarmy4</td>
- <td>M</td>
- <td>僵尸</td>
- </tr>
- </tbody>
- </table>
- </body>
- </html>