Jquery的运用

1.首先建一个文件夹，在文件夹里面添加JQuery的插件 “ jquery-1.7.2.min.js ”    

2.在html页面去引用这个JQuery插件，并将需要使用JS脚本的JS页面引用也添加到页面中

    
        //"JQuery的插件"
                  //JS页面


    

        
        

            
《前端面试秘籍》课程，秒杀面试!
            
课程中95%是名企面试真题剖析，直攻面试题目软肋，剩下5%主要解决非技术性问题，如：简历如何写，学历不够怎么办等！
            
我是第二个p
                

                    
                    大幅提升成功率
                    学历不是事儿
                    0 人学习
                    
Hello AgainHello ByBy
                
            

                
p1
                
p2
                
p3
                
p4
            

    
    

        
        

            
教你写一份成功率99%的“专业简历”
            
如果没有简历这块敲门砖，再厉害的技术也白搭，想要写出饱满、有竞争力、杀伤力且能瞬间秒杀面试官的专业简历就这么简单！
            

                
                成功率99%
                饱满且有竞争力
                学历低没关系
                0 人学习
            
        
    
    
我是第三个
    
我是第四个
    
    
    
    
    
我是空Div
    
10008
    
    
123
    
        Red
        Yellow
        Blue
    
    
新Div
    

        
        
    
    
    
    
    

        很多时候广东省收到货后是东方红哈哈是发的挥发后发到后发货方式挥洒华师大后是否 
        很多时候广东省收到货后是东方红哈哈是发的挥发后发到后发货方式挥洒华师大后是否 
        很多时候广东省收到货后是东方红哈哈是发的挥发后发到后发货方式挥洒华师大后是否 
        很多时候广东省收到货后是东方红哈哈是发的挥发后发到后发货方式挥洒华师大后是否 
        很多时候广东省收到货后是东方红哈哈是发的挥发后发到后发货方式挥洒华师大后是否 
        很多时候广东省收到货后是东方红哈哈是发的挥发后发到后发货方式挥洒华师大后是否 
        很多时候广东省收到货后是东方红哈哈是发的挥发后发到后发货方式挥洒华师大后是否 
    
    
    
    
    
    

        

            
1
            
2
            
3
        
        

            
4
            
5
            
6
        
        

            
7
            
8
            
9
        
    

3.html页面的内容已经有了，这个时候就可以在JS页面里面开始写js脚本了

$(function () {//初始化     等同于 $(document).ready(function () {
    
    //$("*"):表示获取所有对象的html
    var cp=$("*").html();

    //自定义一个控件元素
    $("", {
        type: "text",
        val: "Test",
        focusin: function () {
            $(this).addClass("NewTest");//加入样式
            $(this).css("background-color","yellow");//加入背景颜色
        },
        focusout: function () {
            $(this).removeClass();//移除样式
            $(this).css("background-color", "white");//移除背景颜色
        },
        click: function () {
            alert("test");//点击事件
        }
    }).appendTo("#div1");//追加到Id为"div1"的元素下面s

    //val()： 获取值
    //获取某一个Id的值，等同于document.getElementById("coursePicId");
    cp = $("#coursePicId").val();

    //获得HTML中所有的div元素的html
    cp = $("div").html();

    //each(callback):循环元素的子集对象
    //循环查找样式为“courseBlock”的对象（index:序号；dom：对象）
    $(".courseBlock").each(function (index, dom) {
        //alert(index);
        cp = $(dom).find("input").attr("valuecopy");
        //dom和this都是对象，效果一样
        cp = $(this).find("input").attr("valuecopy");
        //alert(cp);
    });

    //find：找到样式为“courseSummary”的子元素中为“p”的元素,以及子元素为“h4”的元素
    cp = $(".courseBlock").eq(0).find(".courseSummary p,.courseSummary h4").each(function (index, dom) {
        //alert($(dom).html());
    });
    //在样式为“courseBlock”的第一个集合中，从他的子集中找出所有的“p”元素
    cp = $(".courseBlock").eq(0).children().last().find("p").each(function (index, dom) {
        //alert($(this).text());
    });

    //attr("","");设置或返回被选元素的属性值。
    //在样式为“courseBlock”的第二个集合中，找到input元素的属性名为“valuecopy”的值，并给他赋值为“520”
    $(".courseBlock").eq(1).find("input").attr("valuecopy", "520");
    //在样式为“courseBlock”的第二个集合中，找到input元素的属性名为“valuecopy”的值
    cp = $(".courseBlock").eq(1).find("input").attr("valuecopy");
    //当然也可以同时加几个属性，值，俗称键值对
    cp = $(".courseBlock").eq(1).find("input").attr({ "test": "test", "alt": "Test Image" });

    //removeAttr(name)   从每一个匹配的元素中删除一个属性 
    //1.6以下版本在IE6使用JQuery的removeAttr方法删除disabled是无效的。解决的方法就是使用$("XX").prop("disabled",false);
    //1.7版本在IE6下已支持删除disabled。
    $("#btnClick").removeAttr("accter");


    //data(key) 获取key的值
    //在html页面div中加入属性“data-value="hello" data-last-value="helloLast"”   就可以直接通过键来获取值了
    cp = $("#divSetData").data("value");
    cp = $("#divSetData").data("last-value");
    cp = $("#divSetData").data("options").name;
    //alert(cp);

    //data(key,value)
    //建一个Key为NewFile的 Value为File1的 临时存储键/值对
    $("#divSetData").data("NewFile", "File1");
    cp = $("#divSetData").data("NewFile");
    //alert(cp);  //结果为File1
    //removeData(key) 移除键名
    $("#divSetData").removeData("NewFile");
    cp = $("#divSetData").data("NewFile");   //结果为undefined ，是因为把NewFile键给移除了，找不到

    //prop(name|properties|key,value|fn)  获取在匹配的元素集中的第一个元素的属性值。在性能上高于attr(name|properties|key,value|fn)，接着高于data(key,value)
    $("input[type='checkbox']").prop({
        disabled: true    //禁用页面上的所有复选框
    });
    $("input[type='checkbox']").prop("disabled", false);//解禁页面上的所有复选框
    //选中复选框为true，没选中为false
    var b = $("input[type='checkbox']").prop("checked");
    //将所有复选框选中
    $("input[type='checkbox']").prop("checked", true);
    $("input[type='checkbox']").prop("checked", function (i, val) {
        return !val;   //如果选中，则不选中；如果不选中，则选中
    });
    //分配键值，然后删除键
    $("#cbTest").prop("cccc", "Acrinve");
    $("input[type='checkbox']").removeProp("newProp");

    //size()
    //在样式为“courseBlock”的第一个集合中，获取他子集中的个数  size()和length效果一样
    cp = $(".courseBlock").eq(0).find(".courseSummary").children().size(); 
    //cp = $(".courseBlock").eq(0).find(".courseSummary").children().length;
   
    //parent > child:在给定的父元素下匹配所有的子元素
    cp = $("body>.checkbox").val();

    //index:搜索匹配的元素，并返回相应元素的索引值，从0开始计数。
    cp = $(".courseBlock").eq(0).children().last().find("p").index($(".p3"));

    //:first 获取第一个元素,:last 获取最后个元素
    cp = $(".courseBlock").eq(0).children().last().find("p:first").html();
    cp = $(".courseBlock").eq(0).children().last().find("p:last").html();

    //:even 匹配所有索引值为偶数的元素，从 0 开始计数 :odd 匹配所有索引值为奇数的元素，从 0 开始计数
    $(".courseBlock:even").each(function (index, dom) {
        //alert($(this).html());
    });
    
    //:eq(index)  匹配一个给定索引值的元素
    cp = $(".courseBlock:eq(1)").html();

    //eq(index)  匹配一个给定索引值的元素
    //eq(-1)是倒数第一个，eq(-2)是倒数第二个,eq(0)是第一个
    cp = $("#bodyMain").children().eq(-1).attr("cblack");

    //:gt(index)  匹配所有大于给定索引值的元素 从 0 开始计数     lt(index)  匹配所有小于于给定索引值的元素 从 0 开始计数)
    cp = $(".courseBlock:gt(2)").html();
    //alert(cp);

    //queue：扫描所有的div元素，并一个一个的进入队列
    $("div").queue(function () {
        //alert($(this).html());
        $(this).dequeue();//出队列，当前元素执行完才可以执行下一个元素
    });
    $("div").clearQueue();//清除队列

    //在样式为“courseBlock”的第一个集合中，从他的子集中找出所有的“p”元素,然后从第三个“P”元素开始选择，选取2个“P”元素截止
    //slice(x,y)   x代表开始选取子集的位置。第一个元素是0.如果是负数，则可以从集合的尾部开始选起。 
    //slice(x)     y代表结束选取自己的位置，如果不指定，则就是本身的结尾。
    cp = $(".courseBlock").eq(0).children().last().find("p").slice(2, 4).text();
    //相等
    cp = $(".courseBlock").eq(0).find(".courseSummary p").slice(2, 4).text();

    //first()：获取第一个元素html
    cp = $("#bodyMain").children().first().html();

    //last()：获取最后一个元素的html
    cp = $("#bodyMain").children().last().html();

    //has：判断是否有“courseSummary”的样式，如果有，就给背景附上红色
    $("#bodyMain").children().first().has(".courseSummary").css("background-color", "red");
    //表示获得HTML中所有使用了abc这个样式的元素

    //:animated   只有对不在执行动画效果的元素执行一个动画特效，当然自己可以去掉试试，不要这个，一直点击的话，就会不停的累积
    //stop([clearQueue],[jumpToEnd])   停止所有在指定元素上正在运行的动画。
    $("#btnClick").click(function () {
        $("#divSetData:not(:animated)").animate({ left: "+=20" }, 1000);
    });

    //:contains(text) 匹配包含给定文本的元素
    cp = $("div:contains('我是')").each(function () {
        //alert($(this).html());
    });

    //:empty  匹配所有不包含子元素或者文本的空元素
    cp = $("div:empty").attr("propp");

    //:hidden 匹配所有不可见元素，或者type为hidden的元素
    //相反  :visible   是匹配所有的可见元素  这里就不举例了
    cp = $("div:hidden").html();
    cp = $("input:hidden").attr("value1");

    //[attribute=value]  匹配给定的属性是某个特定值的元素
    cp = $("input[name='youkown']").each(function () {
        //alert($(this).val());
    });
    //[attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素。
    cp = $("input[name!='youkown']").each(function () {
        //alert($(this).val());
    });

    //[attribute^=value]  匹配给定的属性是以某些值开始的元素
    cp = $("input[name^='ou']").val();

    //[attribute$=value]  匹配给定的属性是以某些值结尾的元素
    cp = $("input[name$='s']").val();

    //[attribute*=value]  匹配给定的属性是以包含某些值的元素
    cp = $("input[name*='sk']").val();

    //[selector1][selector2][selectorN]  复合属性选择器，需要同时满足多个条件时使用。
    //$("input[id][name$='man']")

    //:selected  匹配所有选中的option元素
    cp = $("select option:selected").text();
    //手动添加一个选项进去，然后再循环显示
    var option = "White";
    $("#Select").append(option);
    $("#Select").children().each(function (index,dom) {
        var text=$(this).text();
        var value = $(this).val();
        //alert(text + "-" + value);
    });

    //addClass(class|fn)  为每个匹配的元素添加指定的类名。
    //removeClass([class|fn])   从所有匹配的元素中删除全部或者指定的类。
    $("#Select").addClass("select");
    $("#Select").removeClass("select");

    //toggleClass(class|fn[,sw])   如果存在这个样式就删除这个样式，如果不存样式，就添加这个样式。
    $("#Select").toggleClass("select");

    //hasClass(class) //检查当前的元素是否含有某个特定的类，如果有，则返回true。这其实就是 is("." + class)。
    cp = $("#Select").hasClass("select");
    //is(expr|obj|ele|fn)   根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。
    cp = $("#Select").is(".select");


    //map()和each()两者的区别
    //map()方法主要用来遍历操作数组和对象，each()主要用于遍历jquery对象。
    //each()返回的是原来的数组，并不会新创建一个数组。
    //map()方法会返回一个新的数组。如果在没有必要的情况下使用map，则有可能造成内存浪费。
    cp=$("input").map(function () {
        return $(this).val();
    }).get().join("|");
     
    //next() : 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。 还有nextAll()  查找当前元素之后所有的同辈元素
    //get(index)  取集合的index元素，返回的是dom对象，所以没法用JQuery对象
    //dom对象和JQuery对象的区别：var cr=document.getElementById("cr"); //dom对象,Js固有的一组对象
    //                           var cr = $("#cr"); //转换成jquery对象
    //jquery提供了两种方法将一个jquery对象转换成一个dom对象，即[index]和get(index)
    cp = $("#TextControl").next().get(0).innerHTML;
    //prev():取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。 还有prevAll()   查找当前元素之前所有的同辈元素
    cp = $("#TextControl").prev().get(0).value;

    //siblings()  取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。
    $(".courseBlock").eq(0).children().last().find("p:last").siblings().each(function (index, dom) {
        //console.log($(dom).html());
    });

    //andSelf()  加入先前所选的加入当前元素中,包括自己
    $("#Select").find("option").andSelf().addClass("border");

    //appendTo(content)  把所有匹配的元素追加到另一个指定的元素元素集合中。
    //A.appendTo(B)和A.append(B)的区别在于：appendTo是将A的内容追加到B元素中去，而append是将B的内容添加到A元素中去
    var content = "我是代码";
    $(content).appendTo("#divSetData");

    //after(content|fn)  在每个匹配的元素之后插入内容。
    //insertAfter(content)  把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
    $("#NewDiv").after(content);
    $(content).insertAfter("#NewDiv");

    //before(content|fn)  在每个匹配的元素之前插入内容。
    //insertBefore(content)  把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
    $("#NewDiv").before(content);
    $(content).insertBefore("#NewDiv");

    //wrap(html|ele|fn)   把所有匹配的元素用其他元素的结构化标记包裹起来。
    content = "
";
    $("#NewDiv").wrap(content);

    //unwrap()  这个方法将移出元素的父元素
    //$("#NewDiv").unwrap();

    //wrapInner(htm|ele|fnl)  将内容包裹在元素里面
    $("#NewDiv").wrapInner(content);

    //clone([Even[,deepEven]]) 克隆匹配的DOM元素并且选中这些克隆的副本。
    //Events 一个布尔值（true 或者 false）指示事件处理函数是否会被复制。V1.5以上版本默认值是：false
    $("#NewBtn").click(function () {
        $(this).clone(true).insertAfter(this);
    });

    //remove([expr])   从DOM中删除所有匹配的元素,包括自己。
    $("#OldDiv").remove();
    $("input").remove(".btnClass");//从DOM中删除匹配内容的元素

    //replaceWith(content|fn)   将所有匹配的元素替换成指定的HTML或DOM元素。
    $("#NewDiv").replaceWith("
");

    //empty() 清空匹配的元素集合中所有的子节点。
    $("#NewDiv").empty();

    //offset([coordinates])   获取匹配元素在当前视口的相对偏移。
    $("#NewBtn").offset({ top: 50, left: 60 });
    console.log($("#NewBtn").offset().top);
    console.log($("#NewBtn").offset().left);

    //position() 获取匹配元素相对父元素的偏移。
    console.log($("#NewBtn").position().top);
    console.log($("#NewBtn").position().left);
    console.log(cp);

    //width([val|fn])  设置或获取宽度    
    //height([val | fn])   设置或获取高度    
    $("#NewBtn").width(100);
    $("#NewBtn").height(100);
    
    //bind(type,[data],fn)    为每个匹配元素的特定事件绑定事件处理函数。
    $("#BindBtn").bind({
        click: function () { $("p").slideToggle(); },
        mouseover: function () { $("body").css("background-color", "Blue"); },
        mouseout: function () { $("body").css("background-color", "#FFFFFF"); }
    });
    //unbind(type,[data|fn]])   bind()的反向操作，从每一个匹配的元素中删除绑定的事件。
    //$("#BindBtn").unbind("click")

    //one(type, [data], fn)  为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。
    $("#OneBtn").one("click", function () {
        alert($(this).val());
    });

    //change([[data],fn])  触发每个匹配元素的change事件
    $("input[type='text']").change(function () {
        console.log($(this).val());
    });

    //focus([[data],fn])  触发每一个匹配元素的focus事件。   
    //$("input[type=text]").focus(function () {
    //    this.blur();  //使人无法使用文本框
    //});

    //toggle([speed],[easing],[fn])  如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
    //用于确定显示 / 隐藏的开关。如：true - 显示元素，false - 隐藏元素
    $("#BtnShowHide").click(function () {
        $("#Poor").toggle(1000);
    });
    
    //slideToggle([speed],[easing],[fn])    通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。
    //slideDown([speed],[easing],[fn])  通过高度变化（向下增大）来动态地显示所有匹配的元素
    //slideUp([speed,[easing],[fn]])   通过高度变化（向上减小）来动态地隐藏所有匹配的元素
    $("#BtnSlide").click(function () {
        $("#Poor").slideToggle("slow", "linear");
    });

    //fadeToggle([speed,[easing],[fn]])   通过不透明度的变化来开关所有匹配元素的淡入和淡出效果
    //fadeIn([speed],[easing],[fn])    通过不透明度的变化来实现所有匹配元素的淡入效果(显示)
    //fadeOut([speed],[easing],[fn])   通过不透明度的变化来实现所有匹配元素的淡出效果(隐藏)
    $("#BtnFad").click(function () {   
        $("#Poor").fadeToggle("slow");
    });

   
   

    //delay(duration,[queueName])   设置一个延时来推迟执行队列中之后的项目。
    $("#BtnDelay").click(function () {
        $("#Poor").slideUp(1000).delay(1000).fadeIn(1000);
    });
    
    //jQuery.ajax(url,[settings])    通过 HTTP 请求加载远程数据。
    $.ajax({
        type: "post",//get,post  
        url: "xxx.asp",
        data: {
            id:1
        },
        dataType: "html",//预期服务器返回的数据类型
        async: true,//异步请求
        success: function (data) {

        }
    });

    //jQuery.each(object, [callback])
    //通用例遍方法，可用于例遍对象和数组。
    //不同于例遍 jQuery 对象的 $().each() 方法，此方法可用于例遍任何对象。
    //回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。
    //如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。
    $.each([1, 2, 3], function (i, n) {
        console.log("key:" + i + "  " + "value:" + n);
    });
    $.each({ name: "流", age: 15 }, function (i, n) {
        console.log("key:" + i + "  " + "value:" + n);
    });

    //jQuery.type(obj)    检测obj的数据类型。
    console.log($.type(3));
    //jQuery.isNumeric(value)  确定它的参数是否是一个数字。
    console.log($.isNumeric("-10"));
    //jQuery.trim(str)   去掉字符串起始和结尾的空格。
    var c = "  hello, how are you?  ";
    console.log($.trim(c));
    //jQuery.merge(first,second)  合并两个数组，但不会去除重复元素
    console.log($.merge([0, 1, 2], [2, 3, 4]));
    //jQuery.unique(array)   删除数组中重复元素。只处理删除DOM元素数组，而不能处理字符串或者数字数组。
    console.log($.unique([0, 1, 2, 2, 3, 3, 4]).reverse());

    //jQuery.parseJSON(json)  接受一个JSON字符串，返回解析后的对象。
    //如果你什么都不传入，或者一个空字符串、null或undefined，parseJSON都会返回 null 。 
    var jsonObj = $.parseJSON('{"name":"陈锋","age":"16"}');
    console.log(jsonObj.name + "今年：" + jsonObj.age);

    //jQuery.proxy(function,context)
    //这个函数还有另一种用法，jQuery.proxy( scope, name )
    //第一个参数是要设定的作用域对象。第二个参数是将要设置作用域的函数名（必须是第一个作用域对象的一个属性）
    var obj = {
        name: "王一鸣",
        age: 15,
        sleep: function () {
            console.log(obj.name + "今年：" + obj.age);
        }
    };
    $.proxy(obj, obj.sleep());


    var add=EnumList.method.add; //获取add的值1
});

//定义JS枚举类型
var EnumList = {
    /*
    **method枚举类型
    */
    method: {
        add: 1,
        update: 2,
        del: 3
    }
};

上面JS脚本中这个JQuery里面的方法基本上都涵盖了，只要掌握了，以后对JQuery的运用，基本没什么问题了。建议自己全部练习一遍，或者熟悉下，以后需要用到，也可以直接在网上看JQuery的文档，直接用也可以。但是最基本的运用一定要掌握。比如each()等等。