jquery练习笔记

DOCTYPE html>

html lang="en" xmlns="http://www.w3.org/1999/xhtml">
head>
    meta charset="utf-8" />
    title>title>
    style>
        #pannel {
            position:relative;
            width:100px;
            height:100px;
            border:1px solid #0050d0;
            background:#96e555;
            cursor:pointer;
        }
    style>
    script type="text/javascript" src="../Packages/jQuery.1.8.3/jquery-1.8.3.min.js">script>
    script type="text/javascript">
        //选择器总结
        //jquery中选择器编写均可以以元素名为开头  后跟id,class或则属性选择器来组成。
        //$("input[name$=‘3‘]")  input为元素名,[]中包含属性name,name的值以3结尾
        //$("input#none5")                                              不能有空格
        //$("input.cls1")                                               不能有空格
        //$("input:first")
        //$("input[class][name^=‘none‘]") 复合选择器，返回含有class属性且name属性的值以none值开头
        //$("input.cls1[name^=‘none‘]") 返回class为.cls1且name属性的值以none值开头
        //form所有后代input元素
        var Init1 = function () {
            $("form input").each(function () {
                alert($(this).attr("name"));
            })
        };
        //form所有input子元素
        var Init2 = function () {
            $("form > input").each(function () {
                alert($(this).attr("name"));
            })
        };
        //紧接form后的所有input同辈元素
        var Init3 = function () {
            $("form ~ input").each(function () {
                alert($(this).attr("name"));
            })

            //$("input[name=‘none2‘] ~ input").each(function () {
            //    alert($(this).attr("name"));
            //})
        };
        //紧接form的第一个input同辈元素
        var Init4 = function () {
            $("form + input").each(function () {
                alert($(this).attr("name"));
            })
        };
        //返回属性name包含none的所有input元素
        var Init5 = function () {
            $("input[name*=‘none‘]").each(function () {
                alert($(this).attr("name"));
            })
        }
        //返回class为cls1的所有input元素
        var Init6 = function () {
            //alert($("input.cls1").attr("name"));
            $("input.cls1").each(function () {
                alert($(this).attr("name"));
            })
        }
        //返回id为none5的所有input元素
        var Init7 = function () {
            //alert($("input.cls1").attr("name"));
            $("input#none5").each(function () {
                alert($(this).attr("name"));
            })
        }
        //返回第一个input元素
        var Init8 = function () {
            $("input:first").each(function () {
                alert($(this).attr("name"));
            })
        }

        //返回第一个input元素
        var Init9 = function () {
            //$("input[class][name^=‘none‘]").each(function () {
            //    alert($(this).attr("name"));
            //})
            $("input.cls1[name^=‘none‘]").each(function () {
                alert($(this).attr("name"));
            })
        }
        //$(Init9);

        var GetDom = function (id) {
            //alert($("#none7").val());
            var $id = $("#" + id);
            alert($id);
            alert($id.get(0));
            alert($id.val());
        }
        //此处如果直接调用GetDom("none7")，$id.val()值为undefined
        //因为$()时，dom元素只是绘制完成，但未加载完成
        //$(GetDom("none7"));

        //jquery对象与dom对象间的转换
        //jquery转dom var $none7=$("#none7");var none7=$none7[0];或 var none7=$none7.get(0);
        //dom转jquery var none7=document.getElementById("none7"); var $none7=$(none7);

        //与$(GetDom("none7"));对应，
        //将方法调用加载到按钮点击事件上，点击可成功获取数据
        $(function () {
            $("#Button1").bind("click", function () {
                GetDom("none7");
            });
        })

        $(function () {
            var $cr = $("#cr");
            $cr.click(function () {
                if ($cr.is(":checked"))
                {
                    alert("恭喜！请继续下一步操作");
                }
                else
                {
                    alert("请阅读规章制度！");
                }
            })
        })

        //让渡变量$的控制权
        //jQuery.noConflict();
        //(function ($) {
        //    $(function () {
        //        //$("#Button2").click(function () {
        //        //    alert("让渡测试");
        //        //})
        //        alert("让渡测试");
        //    });
        //})(jQuery);

        //判断一个元素是否存在
        //两种方式
        if ($("#none7").length > 0)
        { }
        if ($("#none7")[0])
        { }

        //基本选择器 #id \ .class \ element \ * \ selector1,selector2...
        //层次选择器 $(ancestor descendant)  ancestor所有后代descendant元素
        //$("parent>child")
        //$("prev+next")   等同于方法$("prev").next("next") 获取后一个元素
        //$("prev~siblings") 等同于$("prev").nextAll("siblings") 获取prev后所有兄弟元素
        //$("doc").siblings()方法是获取所有同辈元素，跟位置无关
        //过滤选择器
        
        //子元素过滤选择器nth-child(index/odd/even/equation),其中index是从1开始的。
        //eq(index),index是从0开始的

        //$(html) 根据传入的html标记字符串，创建一个dom对象，并将dom对象包装为jquery对象返回。
        //含创建元素、文本、属性节点
        //var $li1=$("
香蕉
");$("ul").append($li1);

        //插入节点
        //append() 向每个匹配的元素内追加内容
        //prepend() 向每个匹配的元素内前置内容
        //appendTo() 将所有匹配的元素追加到指定的元素内
        //prependTo()

        //after() 每个匹配的元素后插入内容。 
我爱你
  $(‘p‘).after(‘你好！‘)  结果是 
我爱你
你好！
        //insertAfter() 将所有匹配的元素插入到指定元素后面。 
我爱你
  $(‘你好！‘).insertAfter(‘p‘)  结果是 
我爱你
你好！
        //before()
        //insertBefore()

        //删除节点
        //remove() 将匹配的元素及其子元素一起删除，返回的是已被删除的节点引用，删除后可再次使用
        //empty() 清空元素中所有后代节点，可用于清空内容

        //替换节点
        //replaceWith() 将所有匹配的元素替换成指定的dom或html
        //replaceAll() 用指定dom或html替换后面括号里的元素，与replaceWith相反
        $(function () {
            //$(‘p‘).replaceWith("你喜欢的水果是?");//将$(‘p‘)替换为后面的内容
            $("你喜欢的水果是?").replaceAll(‘p‘);//用前面的内容替换$(‘p‘)
        })

        //克隆
        $(function () {
            $("ul li").click(function () {
                //$(this).clone().appendTo($(‘ul‘));
                $(this).clone().appendTo(‘ul‘);//克隆点击li并追加到ul内尾
                $(this).clone(true).appendTo(‘ul‘);//clone(true)复制元素的同时也复制元素所绑定事件
            })
        })

        //包裹节点
        $(function () {
            //$("strong").wrap("");//将每个stong用包裹
            //$("strong").wrapAll("");//将strong组合并用包裹,中间的元素依次提取靠后
            $("strong").wrapInner("");//将strong子元素或内容用包裹
        })

        //addClass()
        //removeClass()

        //toggle()
        //toggleClass()
        //hasClass()

        //css() 有单位
        //元素的高度获取  
        //css("height")获取的高度与样式设置有关，有可能为‘anto’。获取的高度包含px   $(‘p‘).css("color",red); $(‘p‘).css("fontSize","10px")采用骆驼写法，尽量用引号
        //height()方法获取的是元素实际高度，与样式设置无关。不含px单位

        //$(‘p‘).is(‘:visible‘) p元素是否显示
        //jquery自定义方法ready(),hover(),toggle()
        //hover(enter,leave)模拟光标悬停事件,光标移到元素上触发enter，移除触发leave
        //hover(enter,leave)是用于替换bind("mouseenter")和bind("mouseleave"),不是用于替换bind("mouseover")和bind("mouseout")
        //toggle(fn1,fn2,...,fnN)模拟鼠标连续点击事件
        //toggle()还能切换元素的可见状态。$(this).toggle();

        ////x = 0;
        ////y = 0;
        ////$(document).ready(function () {
        ////    $("div.over").hover(
        ////       function () { $(".over span").text(x += 1); },
        ////       function () {$(".enter span").text(y += 1);}
        ////    )
        ////});

        //获取事件对象
        //$(p).bind("click",function(event){});//event就是事件对象
        //event只有处理函数可以访问，当事件处理函数执行完后，就会被销毁

        //事件冒泡
        //停止事件冒泡 event.stopPropagation()
        //$(p).bind("click",function(event){//函数内容;event.stopPropagation();});

        //阻止元素的默认行为 event.preventDefault()
        //例如超链接有默认跳转事件，提交按钮会提交表单等
        //验证表单内容可用到
        //$(function () {
        //    $("#sub").bind("click", function (event) {
        //        var username = $("#username").val();
        //        if (username == "")
        //        {
        //            //处理说明
        //            //...
        //            event.preventDefault();//阻止表单提交
        //        }
        //    })
        //})
        //如果同时想对事件对象停止冒泡和阻止默认行为可适用 return false;

        //jquery不支持事件捕获，事件捕获是从上到下

        //事件对象属性
        //event.type() 获取事件类型
        //event.stopPropagation() 停止冒泡
        //event.preventDefault() 阻止默认行为
        //event.target() 获取触发事件元素  event.target.href 连接地址
        //event.relatedTarget() 获取相关元素
        //event.pageX()//event.pageY() 获取光标相对页面的x和y坐标
        //event.which() 鼠标单机事件中获取左中右键,在键盘中获取键盘的按键
        //event.metaKey() 键盘事件中获取ctrl按键
        //event.originalEvent() 指向原始的事件对象

        //移除事件 
        //可以为同一元素绑定多个事件，也可以为多个元素绑定同一个事件 bind()
        //unbind([type],[,data]) 移除事件绑定 
        //$(‘p‘).unbind(); //移除所有绑定
        //$(‘p‘).unbind("click");//移除click事件
        //$(‘p‘).unbind("click",fun1);//移除click的事件方法fun1

        //one() 使用方式和bind()一致
        //用于只绑定一次的事件，当处理函数被执行一次后将移除

        //模拟操作
        //$(‘p‘).trigger("click");模拟点击事件  简化写法$(‘p‘).click();
        //trigger()不仅可以触发浏览器支持的事件，也能触发自定义事件
        //trigger(type,[,data]) 第二个用于传递参数
        //bind()可以绑定自定义事件
        //$(function () {
        //    $("#sub").bind("Myclick", function (event, msg1, msg2) {
        //        alert(msg1 + msg2);
        //    })
        //    $("#sub").trigger("Myclick", ["我的自定义", "事件"]);
        //})

        //trigger()会触发浏览器的默认操作，如果只触发事件 不触发默认操作可用triggerHandler()
        //triggerHandler("focus") 只触发focus中的事件方法，不会获得焦点

        //jquery中的动画
        //$("elment").hide(); 等价于 $("elment").css("display","none");
        //jquery的动画效果应放在标准模式下，不然可能会引起动画抖动

        //hide()和show() 同时改变元素的高宽度和透明度

        //fadeIn()和fadeOut()改变元素的透明度，淡入淡出
        //fadeIn()
        //fadeOut() 在一定时间内 降低元素的透明度，直至消失

        //slideUp()与slideDown()改变的是元素的高度
        //slideUp() 元素由下至上缩短隐藏
        //slideDown() 元素由上至下延伸显示

        //自定义动画animate(params,speed,callback)
        $(function () {
            $(this).css("opacity", 0.5);//设置不透明度
            $("#pannel").bind("click", function () {
                //$(this).animate({ left: "500px" }, 3000);//向右移动500px
                //$(this).animate({ left: "+=500px" }, 3000);//+=表示在当前位置累加
                //$(this).animate({ left: "500px",height:"200px" }, 3000);//+=表示在当前位置累加
                //动画先后顺序，写成多个animate即可
                //$(this).animate({ left: "500px", height: "200px", opacity: 1 }, 3000)//向右逸动500的同时高度逐渐变为200 并设置不透明度为100%
                //       .animate({ top: "200px", width: "200px" }, 3000)
                //       .fadeOut("slow");

                //执行一系列动作后，改变css样式，写字最后一个动画的回调方法中.
                //这样就将css加入到了动画的队列中
                $(this).animate({ left: "500px", height: "200px", opacity: 1 }, 3000)//向右逸动500的同时高度逐渐变为200 并设置不透明度为100%
                      .animate({ top: "200px", width: "200px" }, 3000, function () {
                          $(this).css("border", "5px solid blue");
                      });
            })
            //stop([clealQuene][,gotoEnd])
            //clealQuene设为true，把当前元素尚未执行完的动画序列清空
            //gotoEnd设为true，让正在执行的动画直接到达结束时的状态
            $("#pannel").hover(function () {
                $(this).stop()//停止当前动画，进入下一个动画序列
                .animate({ left: "500px", height: "200px", opacity: 1 }, 3000);
            },
            function () {
                $(this).stop(true)
                .animate({ top: "200px", width: "200px" }, 3000);
            }
            )
            //判断元素是否处于动画状态
            //$("#pannel").is(":animated")

            //其他动画方法
            //toggle()切换元素的可见状态
            //slideToggle()通过高度切换元素的可见性
            //fadeTo() 设置匹配元素的不透明度，高宽度不会发生变化

            //Javascript Math ceil()、floor()、round()三个函数的区别
            //Math.ceil(12.2) 向上取整
            //Math.floor(12.2) 向下取整
            //Math.round(12.2) 四舍五入

            //scrollTop:"50px" 控制滚动条

            //表单验证
            //表单中必填元素的验证，采用blur(function(){}).光标移除时触发
            //要做到即时验证，可为表单元素绑定keyup()和focus()事件
            $("form :input").blur(function () {
                //失去焦点 验证处理
                //多条件分支判断
            }).keyup(function () {//键盘松开时触发
                $(this).triggerHandler("blur");
            }).focus(function () {//获取焦点时触发
                $(this).triggerHandler("blur");//triggerHandler()只触发元素事件，不触发元素默认事件方法
            })
        })

        //filter() 筛选出与指定表达式匹配的元素集合
        //$(‘p‘).filter(‘.selected‘);//筛选出含有selected样式的p元素

        //has() 保留包含特定后代的元素
        //

        //  
list item 1
        //  
list item 2
        //    

        //      
list item 2-a
        //      
list item 2-b
        //    
        //  
        //  
list item 3
        //  
list item 4
        //
        //jQuery 代码: $(‘li‘).has(‘ul‘).css(‘background-color‘, ‘red‘);//将包含ul的li背景色改为红色

        //hasClass() 检查当前元素是否含有特定的类

        //$(this)["removeClass"]("selected") 等价于 $(this).removeClass("selected")

        //var thisEle=$(""#paras).css("font-size");//获取id为paras的字体大小
        //var textFontSize=parseFloat(thisEle,10);//去掉字体的单位
        //var unit=thisEle.slice(-2)//获取字体的单位

        //index() 搜索匹配元素，并返回相应元素的索引值，从0开始 

        //jquery的cookie插件运用

        //jquery的ajax. load(url [,data] [,callback])
        //$("#divT").load("test.html")
        //$("#divT").load("test.html .para")//加载test页面中样式为para的元素至divT中。para为URL参数
        //load()中 若无data参数采用get方式传输，若有data参数采用post方式传输
        //load() 回调函数callback 请求完成后，无论是否成功都会被调用
        //load() 回调函数callback有三个参数 
        //$("#divT").load("test.html", function (responseText,textStatus,XMLHttpRequest) {
        //    //responseText 请求返回的内容
        //    //textStatus 请求状态：success,erro,notmodified,timeout4种
        //    //XMLHttpRequest XMLHttpRequest对象
        //})

        //$.get(url [,data] [,callback] [,type])
        //callback在请求成功后才会触发与load()不一样
        //type 请求返回内容的格式

        //$(selector).serialize()
        //
        //serialize() 通过序列化表单值，创建 URL 编码文本字符串。包含自动编码
        //serializeArray() 将dom元素序列化后，返回json格式
        //表单元素必须使用name属性，才会被序列化到字符串中
        //$.param() 用于对一个数组或对象按key/value进行序列化
        //var obj = { a: 1, b: 2, c: 3 };
        //var objstr = $.param(obj);
        //alert(objstr);//a=1&b=2&c=3

        //ajax全局事件方法。只要ajax请求发生，就会触发
        //ajaxStart(callback) ajax请求开始时触发
        //ajaxStop(callback) ajax请求结束时触发
        //ajaxComplete(callback) 完成时
        //ajaxError(callback) 发生错误时执行的函数，捕捉的错误最后一个参数传递
        //ajaxSend(callback) 请求发送前执行
        //ajaxSuccess(callback) 请求成功时触发

        //ajaxStart(callback)示例 loading为div 内容为加载中...
        //$("#loading").ajaxStart(function () {
        //    $(this).show();
        //});
        //$("#loading").ajaxStop(function () {
        //    $(this).hide();
        //})
        //使某个ajax请求不受全局方法影响。可将global设置为false
        //$.ajax({
        //    url: "test.html",
        //    global:false //不触发全局事件
        //})

        //html lable的for属性规定与那个表单元素绑定.
        //for="element_id"  element_id为label 要绑定的元素的 id。
        //当点击lable（male或female），绑定的单选按钮被选中
        //

        //  Male
        //  
        //  

        //  Female
        //  
        //

        //可以运用验证插件，cookie插件

        //jQuery.extend() 可以用传入的参数覆盖默认值
        //jquery的插件this是指jquery对象
        //封装jquery对象方法的插件
        ; (function ($) {
            $.fn.extend({
                "color": function (value) { },
                "border": function (value) { },
                "backgroud": function (value) { }
            })
        })(jQuery)
        
        //封装全局函数插件
        ; (function ($) {
            $.extend({
                ltrim: function (text) {
                    return (text || "").replace(/^\s+/g, "");
                    //(text||"")用于防止传入尽量的text这个字符串变量处于未定义状态
                    //如果text为undefined,则返回"" 否则返回text
                },
                rtrim: function (text) {
                    return (text || "").replace(/\s+$/g, "");
                }
            });
        })(jQuery);
        $("#trimTest").val(
            jQuery.trim("      text    ") + "\n" +
            jQuery.ltrim("      text    ") + "\n" +
            jQuery.rtrim("      text    ")//自定义全局函数插件的使用
            );
        script>
head>
body>
    input name="none2" />
    form>
        label>Name:label> 
        input name="name" />
        fieldset>
            label>Newsletter:label> 
            input name="newsletter" />
        fieldset>
    form>
    input class="cls1" name="none" />
    input class="cls1" name="none5" />
    input id="none6" class="cls1" name="none6" />
    input name="none3" />
    input id="none7" type="text" value="none7" name="none7"/>
    input id="Button1" type="button" value="button" />br />
    input type="checkbox" id="cr" />label for="cr" >我已阅读制度label>
    input id="Button2" type="button" value="button" />br />
    ul>
        li>菠萝li>
        li>雪梨li>
        li>苹果li>

        li>香蕉li>
    ul>
    p title="你喜欢的水果">strong>你喜欢的水果是?strong>p>
        input name="none8" value="dddd" />
    strong title=‘你喜欢的水果‘>你喜欢的水果是?strong>
    div>分隔div>
    strong title=‘你喜欢的水果‘>你喜欢的水果是?strong>

    div id="pannel">div>
body>
html>