Jquery基础

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>
点击等号加法

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值