例子1：对于ID的操作

在长时间没有使用jQuery后，会遗忘很多，所以在这里记录下常用的js方式。

$(function(){
        $('#b1').click(function (){
            $('#a1').html('hello world');    
        });
    });

<body style="font-size:30px;">
    <a href="javascript:;" id="a1">hello</a>
    <input id="b1" type="button" value="clickMe" />
</body>

说明：

$(function(){}) 相当于$(document).ready() 是DOM结构绘制完毕后就执行，不必等到全部加载完毕，而且可以编写多个。

#ID 可以根据Id找到节点。

$()的意思是构造了一个jquery对象，$可以理解为一个jquery的构造器，然后就可以调用jquery的对应函数。注：$().get(0)这个方法可以还原DOM对象。

click方法：点击事件

html方法：修改文本内容

例子二：选择器

<script type="application/javascript">
    <!-- 基本选择器-->
    $(function(){
        $('#b1').click(function (){
            alert($('#d1').html());   //显示出的内容为d1标签下的所有内容  
            $('.s1').css('font-size','70px');  //把class名为s1的对象
            $('#d1,p').css('font-size','70px'); //把d1标签内的所有字段全部改变
            alert('此选择器已经为空');
        });    
        $('#b2').click(function(){
            $('#d1 div').css('background-color','yellow');//修改d1下的所有div
            $('#d1>div').css('background-color','green');//修改d1下的子孙
            $('#d2+div').css('background-color','green');//修改d2的一个师弟    
            $('#d2').siblings().css('background-color','green');
       $('#d2~div').css('background-color','green'););//修改d2的所有师弟 
        });
    });
</script>
<div id="d1000">hello</div>
    <div class="s1">zhangshan</div>
    <input type="button" value="clickMe" id="b1"/>
    <input type="button" value="clickMe2" id="b2" />
    <div id="d1">
        <div>java</div>
        <div id="d2">hello</div>
        <div>hello123</div>
        <div style="background-color:blue;width:300px;height:300px;">
            <div style="background-color:red;width:100px;height:100px;"></div>
        </div>
        <div>hello321</div>
    </div>

例子三：

<script type="application/javascript">
    $(function(){
        $('#b1').click(function(){
            //$('div:contains(你好)').css('font-size','30px');  内容过滤器  
            //$(':empty').html('sss');
            $('div:has(p)').css('font-size','30px');在div标签下拥有p标签的
        });    
    });
</script>

<div>hello</div>
    <div>你好</div>
    <div>
        <p>java</p>
    </div>
    <p>你好</p>
<input type="button" value="clickMe" id="b1"/>

例子四：内容过滤选择器

<script type="application/javascript">
    $(function(){
        //$('#b1').click(function(){
//            $('div:hidden').css('display','block');    
//        });    
//    });
        $('#a1').toggle(function(){
            //$('#d1').css('display','block');
            $('#d1').show();
        },function(){
            //$('#d1').css('display','none');
            $('#d1').hide();
        });
        
        $('#b1').click(function(){
            $('p[id=p1]').html('hello world');    
        });
        
        });
</script>
<body>
    <a href="javascript:;" id="a1">怎样学好java</a>
    <div  id="d1">好好学就能学好</div>
    <p id="p1">hello</p>
    <p>world</p>
    <input type="button" value="click" id="b1"/>
</body>

例子五：

<script type="application/javascript">
    $(function(){
        $('#b1').click(function(){
        $('ul li:nth-child(even)').html('item100');//even意思是偶数的值，对item2 item4 item6 item8修改 对于ul下的子节点li   
        });
    });
    
</script>
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
    </ul>
    <ul>
        <li>item5</li>
        <li>item6</li>
        <li>item7</li>
        <li>item8</li>
    </ul>
    <input type="button" value="click" id="b1"/>