jquery笔记(仅供个人参考)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>jquery 练习 </title>
<script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript">
        $().ready(function(){    //这一句一定不能忽略啊!!!
            // 基础选择器  id class html标签 多个一起
        /*    $("#div1").text('a');
            $('div').text('b');
            $('.p1').text(333);
            $('div,p').text(10086);
         <body>
         <div id="div1">456</div>
         <div>789</div>
         <p class="p1">0</p>
         </body>
        */
        /************************************************************/
          // 层级选择器  后代  子代 >   紧挨 +
        //$("#div1 p").html(123);   //后代        段落1 2 3
          //$("#div1 > p").html(456);  //子代     段落1 3
        //    $('#div1 + p').html(789);   //紧挨    段落4 变了
        /*
        * <div id='div1'>
         <p>段落1</p>
         <form>
         <p>段落2</p>
         </form>
         <p>段落3</p>
         </div>
         <p>段落4</p>
         <p>段落5</p>
         */
            /*******************简单*************************/
            // 重要的  :eq(index) :匹配索引为指定值的元素
            //        :not(selector) :匹配除了指定选择器之外的所有元素
         /*   $('td:first').text('ab');
            // :first :last :even(偶数) :odd(奇数)
            $('td:eq(1)').text('cd');  //下标从0开始
            $('td:not(td:eq(2))').text('fg');  //除了 第2 ,其他都为 fg
        */
            /*
            * <table width=800 border=1>
             <tr>
             <td>0</td>
             <td>1</td>
             <td>2</td>
             <td>3</td>
             <td>4</td>
             </tr>
             </table>
             */
        /*****************内容********************/
        //  :constains(text) 匹配内容中包含指定内容的元素
        //  :empty    匹配内容为空的元素
     /*   $('li:contains("三国")').text(123);
            $('li:empty').text(456);
     */   /*
        * <ol>
         <li>三国</li>
         <li>
         西
         <a>游</a>
         记
         </li>
         <li></li>
         <li>水浒传</li>
         </ol>

         */
            /*****************:hidden :visible********************/
          /*  $('#btnOk').bind('click', function () {
              //  $('div:hidden').show();  //显示 div2
                $('div:visible').hide();  //隐藏 div1
            })*/
        /*<div>div1</div>
         <div style='display: none'>div2</div>
         <hr>
         <input type='button' id='btnOk' value='确定' />
        */
            /*****************属性********************/
            //[attribute]    :匹配具有指定属性的元素
            //[attribute=value] :匹配属性等于指定值的元素

       // $('font[color]').html(123);
  //        $('font[color="#ccccc5"]').html(456);
           /*<font>test1</font>
            <hr>
            <font color='#ccccc5'>test2</font>
            <hr>
            <font color='#cc3cc5'>test3</font>
*/
            /*****************表单********************/
            // :input 匹配所有表单元素
               //$(":input")  匹配所有表单元素 select textarea
            //$("input") 匹配Input 标签

            //  jquery转dom 操作 :jquery[0]    jquery.get[0]
            //  dom 转 jquery 操作:  $(dom)

            /***************************************/
            //  属性操作
                    /*attr(name) :获取指定属性的值
                     attr(key,value) :设置指定属性的值
                     attr(properties) :一次设置多个属性的值,要求参数必须是json对象
                     attr(key,fn) :通过一个函数的返回值设置指定属性的值
                     removeAttr(name) :删除指定的属性
                     */
            /*var a=$("#id1").attr('src');
            document.write(a);*/
            //$("#id1").attr("src","../img/2.jpg");
            /*var data={
                src:'../img/2.jpg',
                width:100
            }
            $("#id1").attr(data);
            */
            /*$("#id1").attr('src', function () {
                return '../img/2.jpg';
            });
            $("#id1").removeAttr('src');

             <img id="id1" src="../img/1.jpg"/>
            */
            /**********css操作************/
 /*       $("#btnOk").bind('click',function(){
$("#div1").addClass('cls2'); // 添加css样式
$("#div1").removeClass('cls1'); // 删除 css 样式
$("#div1").toggleClass('cls3'); // 切换 样式
if($("#div1").hasClass('cls3')){ // 判断是否有样式
alert('yes');
}else{
alert('no');
}
});

*/
/*<style>
.cls1 {
color: red;
}

.cls2 {
font-size: 30px;
}

.cls3 {
border: 1px solid green;
}
</style>
<div id='div1' class='cls1'>jQuery</div>
<hr>
<input type='button' id='btnOk' value='确定' />
*/
/***********html 文本 val ************************/
// 获取值 html() 设置值 html('<font color=red>abc</font>');
// html
// 文本
// val 表单

/***********css 操作 ************************/
// $("#btnOk").bind('click', function () {
//$("#div1").css('color'); // 获取 css 属性值
// $("#div1").css('color','red'); //设置 css
//设置多个 json格式
/* var data={
color:'green',
fontSize:'30px'
}
$("#div1").css(data);
*/
// 获取 div1元素位置
//var data=$("#div1").offset();
// alert(data.left + ':'+ data.top);
// 设置 div1元素的位置
/* var data={
left:50,
top:100
}
$("#div1").offset(data);
*/
// 设置 尺寸 width() height()
/* $("#div1").css({
'border':'1px solid red'
});
$("#div1").width(500);
$("#div1").height(100);
})
<div id='div1'>jQuery</div>
<hr>
<div id='div2'>Ajax</div>
<hr>
<input type='button' id='btnOk' value='确定' />
*/
/*********** 事件编程 ************************/
//mouseover();
/* $("#content").bind('mouseover', function () {
$(this).css('color','red');
})
$("#content").bind("mouseout", function () {
$(this).css('color','blue');
})
<div id='content'>jQuery</div>
*/
/*


* blur(fn) :失去焦点
 change(fn) :内容改变
 click(fn) :点击
 dblclick(fn) :双击
 focus(fn) :获得焦点
 keydown(fn) :键盘按下
 keyup(fn) :键盘抬起
 keypress(fn) :键盘点击
 load(fn) :页面载入
 unload(fn) :页面关闭
 mousedown(fn) :鼠标按下
 mouseup(fn) :鼠标抬起
 mousemove(fn) :鼠标移动
 mouseover(fn) :鼠标经过
 mouseout(fn) :鼠标离开
 resize(fn) :改变尺寸
 scroll(fn) :滚动条滚动
 select(fn) :选择内容
 submit(fn) :提交按钮

* */
/*********** 事件切换 ************************/
/* $("#content").hover(function () { // $().hover( function(){},function(){} 注意写法 );
$(this).css('color','red');
},function(){
$(this).css("color","blue");
});
// toggle(fn,fn2,[fn3,fn4,...]); 鼠标点击时的事件绑定 切换 // $().toggle( function(){},function(){},function(){});
$("#result").toggle(function () {
$(this).css('color','red');
}, function () {
$(this).css('color','green');
}, function () {
$(this).css('color','blue');
});
*/
/*<div id='content'>jQuery</div>
<div id='result'>Smarty</div>
*/
/*********** 事件绑定 bind ************************/
//绑定多个
/* var data={
mouseover: function () {
//$(this).css('color','red');
this.style.color='red';
},
mouseout: function () {
$(this).css('color','blue');
}
};
$("#div1").bind(data);
*/
/*<div id='div1'>div1</div>
<hr>
<p id='p1'>p1</p>
<hr>
<input type='button' id='btnOk' value='确定' />
*/

//one方法绑定的事件只触发一次
/* $('#div1').one('click', function() {
alert('hello!');
});

//移除所有事件绑定
$('#div1').unbind();
\
*/

// jquery 解决事件冒泡 取消默认行为 已经写了
}); </script> </head> <body> </body> </html>

 

你可能感兴趣的:(jquery笔记(仅供个人参考))