Jquery基础

最新推荐文章于 2014-08-12 17:29:54 发布

LsxForLove

最新推荐文章于 2014-08-12 17:29:54 发布

阅读量663

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/LengSeXiZuo/article/details/32080109

版权

web前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Jquery是一个优秀的Javascript框架

js中的属性和事件在Jquery中几乎都变成了方法

顶级对象$。

  <script src="jquery-1.8.3.js" type="text/javascript"></script>
       <script type="text/javascript">  
//把dom对象转成jquery对象,然后再调用jquery中的ready方法
           $(document).ready(function () {
               alert('html onload');
           })
     $(function () {
               alert('页面加载完了');
           });
    </script>

一、选择器

语法	描述
$(this)	当前 HTML 元素
$("p")	所有 <p> 元素
$("p.intro")	所有 class="intro" 的 <p> 元素
$(".intro")	所有 class="intro" 的元素
$("#intro")	id="intro" 的元素
$("ul li:first")	每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']")	所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head")	id="intro" 的 <div> 元素中的所有 class="head" 的元素

<pre name="code" class="javascript"><script type="text/javascript">  
           $(function () {
               //在jq中，js里面的属性和事件几乎都变成了方法。
               //如果在方法中写内容，那么意味着设置，返回当前对象本身
               //如果方法中没写任何的参数，那么意味着获取
               alert($('#btn').val());
               $('#btn').val('click me');
               alert($('#btn').val());
           });
       </script>

二、遍历

   <script type="text/javascript">  
           var tmp = [1, 2, 3, 4, 5, 6];
           var newarr = [];
           newarr= $.map(tmp,function (ele,index) {
               return ele * 2;
           })
           alert (newarr);
       </script>

map方法主要是遍历修改数组和返回新数组的

<script type="text/javascript">  
           var tmp = { "name": "zj", "age": 18 };
           var newarr = [];
           $.each(tmp, function (k,s) {
               alert(k+' is '+s);
           });
       </script>

each方法主要用来遍历键值对，return false退出遍历

三、事件

    <script type="text/javascript">  
           $(function () {
               $('#btn').click(function () {
                   $('div').css({ "background-color":"yellow"});
               });
           });
       </script>

为id=btn的按钮注册click事件,div标签的css属性改变

  <script type="text/javascript">  
           $(function () {
               $('#btn').click(function () {
                   $('div').css({ "background-color": "yellow" });
                   $('p').css({ "background-color": "red" }).click(function () {
                       alert('你真的点我了啊');
                   });
               });
           });
       </script>

链式编程，内部实现了隐式迭代,方法返回对象本身

   <script src="jEasyUI1.3.6_CHS/jquery.min.js"></script>
       <script type="text/javascript">  
           $(function()  {           
               $('#dv').click(function () {
               $('#dv').addClass('cls');  //添加cls样式
               $('#dv').remove('cls');//移除样式
               $('#dv').toggleClass('cls');//替换样式
           })
           })
       </script>

对样式css的操作

    <script type="text/javascript">
        $(function () {
            $('#ui li').mouseover(function () {
                $(this).css('backgroundColor', 'red').siblings().css('backgroundColor', '');//siblings() 获得匹配集合中每个元素的同胞，通过选择器进行筛选是可选的

            }).click(function () {
                //removeAttr()删除样式，.unbind()移除事件
                $('#u2').append($(this).removeAttr('style').unbind());
            });
        })
    </script>

this的使用

    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                //在层中找所有的具有name属性的所有的input标签
                // $('div input[name]').css('backgroundColor', 'red');
                //在层中找所有的具有name属性且属性值等于name1的所有的input标签
                $('div input[name=name1]').css('backgroundColor', 'red');
             
            })
          
        })
    </script>

    <script type="text/javascript">
        $(function () {
            //获取包含x值得div层
            //alert($('div:contains(x)').text());
            //获取不包含内容的div层
            // alert($('div:empty').val());
            //获取包含a标签的层
            // alert($('div:has(a)').val());
            //获取父级元素的层
            //alert($('div:parent').val());
        })
        $(function () {
            //所有ul下面的第一个li字节点
            //$('ul li:first-child').css('backgroundColor', 'red');
            //获得所有ul下的子元素
            $('ul').children().css('backgroundColor', 'red');
        });
    </script>

过滤器的使用

 <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                //获取href属性
                //alert($('a').attr('href'));
                //修改a的href属性
                //$('a').attr('href', 'http://www.hao123.com');
                //添加cls样式
                //$('a').attr('class', 'cls ');
                //删除属性
                //$('a').removeAttr('class');
            });
        });
    </script>

属性添加，修改

<script type="text/javascript">
        var data = ({'百度':'http://www.baidu.com','腾讯':'http://www.tent.com'});
        $(function () {
            $('#btn').click(function () {
                //创建一个层
                // $('<div style="width:300px;height:300px;background-color:orange;"></div>').appendTo($('body'));
                var tb = $('<table  border="1"></table>').appendTo($('body'));
                var tr = $('<tr></tr>').appendTo(tb);
                var td = $('<td>网站</td><td>网址</td>').appendTo(tr);
                $.each(data, function (k, s) {
                    var trs = $('<tr></tr>').appendTo(tb);
                    $('<td>'+k+'</td><td><a href='+s+'>'+k+'</a></td>').appendTo(trs)
                });
            });
        });
    </script>

动态创建元素

    <script type="text/javascript">
        $(function () {
            $('#btn1').click(function () {
                $('<tr><td>' + $('#txt').val() + '<td/><td>' + $('#textContent').val() + '</td></tr>').appendTo($('#tb'));
            });
        });
    </script>
</head>
<body>
    <table id="tb" border="1">
        <tr>
            <td>猫猫:</td>
            <td>沙发！</td>
        </tr>
    </table>
    昵称：<input type="text" name="name"  id="txt" /><br/>
    <textarea id="textContent" rows="10" cols="15"></textarea><br/>
    <input type="button" name="button" id="btn1" value="评论" />
</body>

无刷新评论

  <script src="jquery.min.js"></script>
    <style type="text/css">
        .cls {
            background-color:green;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
               // $('div').empty();//清空div子元素
                $('div').remove();//清空自己肯定包括子元素
                $('div').remove('.cls')//删除这个类样式的div
            });
        });
    </script>

删除元素

    <script type="text/javascript">
        $(function () {
            $('#toRight').click(function () {
                $('#se1 option:selected').appendTo($('#se2'));
            });
            $('#toLeft').click(function () {
                $('#se2 option:checked').appendTo($('#se1'));
            });
            $('#toAllLeft').click(function () {
                $('#se1 option').appendTo($('#se2'));
            });
            $('#toAllRight').click(function () {
                $('#se2 option').appendTo($('#se1'));
            });
        })
    </script>

权限选择

 <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                $('#t3').val(parseInt($('#t1').val()) + parseInt($('#t2').val()));
            });
        });
    </script>

点击等号加法