jQuery 学习笔记 一 初体验

 

<script type="text/javascript" src="js/jquery-1.7.2.js"></script>

 

 

<style type="text/css">
        .unselect{
            color: #2524ff;
            font-size: 20px;
        }
        .selected{
            color: #f54958;
            font-size: 25px;
        }
        .highlight{
            background-color: #6caeee;
        }
</style>
<div id="divMsg">Hello Word !</div>
    <input id="btnShow" type="button" value="显示"/>
    <input id="btmHide" type="button" value="隐藏" />
    <input id="btnChange" type="button" value="修改内容为  Hello Word, too !">

    <form>
        <input name="check1" type="checkbox" value="an"/>
        <input name="check2" type="checkbox" value="an"/>
        <input type="button" value="ab" />
        <input type="radio" value="ac" />
        <input type="text" value="aa">

        <p> aa</p>
        <p> ba</p>
        <p >
            <span> aa</span>
        </p>
    </form>

    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <h1>h1</h1>
    <h2>h2</h2>

    <table>
        <tr>
            <td name="cc">aa</td><td>bb</td><td><ol>p</ol></td>
        </tr>
        <tr>
            <td name="cc" id="cc">cc</td><td></td>  <td></td>
        </tr>
    </table>

    <img name="imgs" />
    <div>
        <span> aa</span>
    </div>

 

 /* 此示例使用了:
         * (1) jQuery的Id选择器: $("#btnShow")
         * (2) 事件绑定函数 bind()
         * (3) 显示和隐藏函数. show()和hide()
         * (4) 修改元素内部html的函数html()
         */
        $("#btnShow").bind("click",function(event){$("#divMsg").show();});
        $("#btmHide").bind("click",function(event){$("#divMsg").hide();});
        $("#btnChange").bind("click",function(event){$("#divMsg").html("Hello Word ,too !");});

        //创建 DOM 添加到现有的 DIV上
        $("<div id='testDiv' style='border: solid 1px #ff1e37'>动态创建DIV</div> ").appendTo($("#divMsg"));

        //获取匹配的第二个元素 eq 函数 ;  gt 匹配所有大于给定索引值的元素; lt 选择结果集中索引小于 N 的 elements
        $("div:eq(1)").toggleClass("selected");

        //保留子元素中不含有ol的元素      filter 过滤器
        $("div").filter(function(index){  return $("ol",this).size() == 0;  });

        //由于input元素的父元素是一个表单元素，所以返回true       is函数
        logs( $("input[type='checkbox']").parent().is("form") )   ;