jQuery

最新推荐文章于 2023-07-07 14:28:52 发布

志向自由

最新推荐文章于 2023-07-07 14:28:52 发布

阅读量591

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/lzhgxiaoxiong/article/details/47021113

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、基础选择器：

$(“p”)会得到一组P标签元素,其中“p”表示CSS中的标签选择器。$()中的()不一定是指定元素，也可能是函数。 $()方法是jQuery()简写。
$("div").html("Hello iMooc!”); //元素选择器
$("#my_id”) $(".red”) //id class
$("button").attr("disabled","no”); //attr()方法的功能是设置或获取元素的某项属性值。
$("*”) $(“div *”) //所有元素
$(".red,.green”) //选多个元素
$("div label”) //层次选择器
$("div > label”) //子层次选择器
$(“prev + next”) $("p+label") //查找与“prev”元素紧邻的下一个“next”元素
$(“prev ~ siblings”) $("p~label")//prev ~ siblings获取prev 元素后面全部相邻的元素
$(“li:first”)//一组相同标签元素中的第1个元素
$("li:last”) //给最后的li标签文字添加红色。
$("li:eq(3)”) //从0开始
li:contains('土豪’) $("li:contains('jQuery')")//按照文本内容来查找一个或多个元素
$("li:has('label')”) //包含的元素名称来过滤
$("p:hidden") $("input:hidden") //:hidden过滤选择器的功能是获取全部不可见的元素
$("li:visible”) //:visible过滤选择器获取的是全部可见的元素
$("li[title='蔬菜']”) //属性选择器
$("li[title*='果']”) //包含的所有
$("li:first-child”) //首个子元素
:last-child //末个子元素

实例：

<body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li hidden>6</li>
            <li hidden>7</li>
            <li hidden>8</li>
            <a href="javascript:;">更多</a>
        </ul>
        <script type="text/javascript">
         $("a").click(function(){
                if($("a").text() === "更多"){
                    $("a").text("简化");
                    $("li:hidden").css("display","list-item");
                }else{
                    $("a").text("更多");
                    $("li:eq(6)").css("display","none");       
                    $("li:eq(7)").css("display","none");       
                    $("li:eq(5)").css("display","none");       
                }
            });
        </script>
    </body>

或者：$("li[class=no]").show(); $("li[class=no]").hide();

二、表单选择器：

:input表单选择器获取表单元素,不仅包括所有<input>标记的表单元素，而且还包括<textarea>、<select> 和 <button>标记的表单元素 $(“#frmTest :input")
$("#frmTest :text”) //文本输入框
$("#frmTest :password").addClass("bg_red");
$("#frmTest :radio").attr("disabled”,true); //单选 disable 1.布尔“disabled” 2removeAttr 3“"
$("#frmTest :checkbox").attr("disabled",false); //复选框
$("#frmTest input:submit").addClass("bg_red"); //提交按钮注意筛选表单的按钮
$("#frmTest :image").addClass("bg_red”); //图像
$("#frmTest :button").addClass("bg_blue”); 按钮
$("#frmTest :checked").attr("disabled", true);// true,false没有双引号,表示布尔类型
$("#frmTest :selected").text(); //下拉列表选中状态的

三、操作DOM元素

$("#a1").attr("href" , "www.imooc.com”); var $url = $("#a1").attr("href"); //attr(属性名)格式是获取元素属性名的值，attr(属性名，属性值)格式则是设置元素属性名的值。
var $content = "<b>唉，我又变胖了！</b>";$("#html").html($content); $("#text").text($content);//使用html()和text()方法操作元素的内容，当两个方法的参数为空时，表示获取该元素的内容，而如果方法中包含参数，则表示将参数值设置为元素内容。
$("#content").css({"background-color":"red","color":"white"});//通过addClass()和css()方法可以方便地操作元素中的样式，前者括号中的参数为增加元素的样式名称，后者直接将样式的属性内容写在括号中。
$("#content").removeClass("white blue");//使用removeAttr(name)和removeClass(class)分别可以实现移除元素的属性和样式的功能，前者方法中参数表示移除属性名，后者方法中参数则表示移除的样式名
$("body").append(rethtml());//append(content)方法的功能是向指定的元素中追加内容，被追加的content参数，可以是字符、HTML元素标记，还可以是一个返回字符串内容的函数。
$(content).appendTo(selector),参数content表示需要插入的内容，参数selector表示被选的元素，即把content内容插入selector元素内，默认是在尾部。 var $html = "<span class='red'>小青蛙</span>" $($html).appendTo("div");
$(selector).before(content)和$(selector).after(content)//使用before()和after()方法可以在元素的前后插入内容，它们分别表示在整个元素的前面和后面插入指定的元素或内容 var $html = "<span class='red'>兄弟。</span>" $(".green").after($html);
$("body").append($(".red").clone()); //调用clone()方法可以生成一个被选元素的副本，即复制了一个被选元素，包含它的节点、文本和属性
$(selector).replaceWith(content)和$(content).replaceAll(selector)//replaceWith()和replaceAll()方法都可以用于替换元素或元素中的内容，但它们调用时，内容和被替换元素所在的位置不同 $($html).replaceAll(".green");
$(selector).wrap(wrapper)和$(selector).wrapInner(wrapper)//wrap()和wrapInner()方法都可以进行元素的包裹，但前者用于包裹元素本身，后者则用于包裹元素中的内容 $(".red").wrapInner("<i></i>");
$(selector).each(function(index))//使用each()方法可以遍历指定的元素集合，在遍历时，通过回调函数返回遍历元素的序列号，参数function为遍历时的回调函数，index为遍历元素的序列号，它从0开始，如：

$("span").each(function (index) {

if (index == 1) {

$(this).attr("class", "red");

}

});

remove()方法删除所选元素本身和子元素，该方法可以通过添加过滤参数指定需要删除的某些元素，而empty()方法则只删除所选元素的子元素。 empty()可以理解为删除了本身内容

四、jQuery 事件与应用

$(document).ready(function(){})等价于$(function(){});//ready()只要页面的DOM结构加载后便触发

$(selector).bind(event,[data] function),bind()方法绑定元素的事件非常方便

$(function () {

$("#btntest").bind("click mouseout", function () {

$(this).attr("disabled", "true");

})

});

$(selector).hover(over，out);//over参数为移到所选元素上触发的函数，out参数为移出元素时触发的函数。

$(selector).toggle(fun1(),fun2(),funN(),…);//click事件中绑定多个函数
$("#btntest").bind("click", function () {
                    $("div").toggle({
                   function(){
                       $(this).hide();
                   },function(){
                       $(this).show();
                   }
               });
                });

$("div").unbind("click dblclick");//unbind()方法可以移除元素已绑定的事件

$(selector).one(event,[data],fun)//one()方法可以绑定元素任何有效的事件，但这种方法绑定的事件只会触发一次

$(selector).trigger(event) //trigger()方法可以直接手动触发元素指定的事件 $("div").trigger("change-color");

文本框的focus和blur事件,获得和失去焦点时触发

$("input")
                .bind("focus", function () {
                    $("div").html("请输入您的姓名！");
                });
                $("input").bind("blur", function () {
                    if ($(this).val().length == 0)
                        $("div").html("你的名称不能为空！");
                });
            });

下拉列表框的change事件

$(selector).live(event,[data],fun)   //与bind()功能相同，live()方法还可以绑定动态元素
$(function () {
                $("#btntest").live("click mouseout", function () {
                    $(this).attr("disabled", "false");
                });
                $("body").append("<input id='btntest' type='button' value='点击或移出就不可用了' />");
            });

五、动画特效:

$(selector).hide(speed,[callback])和$(selector).show(speed,[callback]) //参数speed设置隐藏或显示时的速度值，可为“slow”、“fast”或毫秒数值，可选项参数callback为隐藏或显示动作执行完成后调用的函数名。

$(selector).live(event,[data],fun)   //与bind()功能相同，live()方法还可以绑定动态元素
$(function () {
                $("#btntest").live("click mouseout", function () {
                    $(this).attr("disabled", "false");
                });
                $("body").append("<input id='btntest' type='button' value='点击或移出就不可用了' />");
            });

<body>
        <h3>toggle()方法的动画切换效果</h3>
        <div>
            <h4>
               <span class="fl">我喜欢吃的水果</span>
               <span class="fr" id="spnTip">显示</span>
            </h4>
            <ul>
                <li>苹果</li>
                <li>甘桔</li>
                <li>梨</li>
            </ul>
        </div>

        <script type="text/javascript">
            $(function () {
                var $spn = $("#spnTip");
                $("h4").bind("click", function () {
                    $("ul").toggle("slow",function(){
                     $spn.html() == "隐藏" ? $spn.html("显示") : $spn.html("隐藏");
                    });
                });
            });
        </script>
    </body>

$(selector).slideUp(speed,[callback])和$(selector).slideDown(speed,[callback]) //滑动效果

slideToggle()方法可以切换slideUp()和slideDown()

<body>
        <h3>使用slideToggle()方法切换滑动效果</h3>
        <div>
            <h4>
               <span class="fl">我喜欢吃的水果</span>
               <span class="fr" id="spnTip">向下滑</span></h4>
            <ul>
                <li>苹果</li>
                <li>甘桔</li>
                <li>梨</li>
            </ul>
            <input id="hidval" type="hidden" value="0"/>
        </div>

        <script type="text/javascript">
            $(function () {
                var $spn = $("#spnTip");
                $("h4").bind("click", function () {
                    $("ul").slideToggle("slow",function() {
               $spn.html() == "向下滑" ? $spn.html("向上滑") : $spn.html("向下滑");
                    });
                })
            });
        </script>
    </body>

$(selector).fadeIn(speed,[callback])和$(selector).fadeOut(speed,[callback]) //淡入淡出

$(selector).fadeTo(speed,opacity,[callback])//调用fadeTo()方法，可以将所选择元素的不透明度以淡入淡出的效果调整为指定的值,其中speed参数为效果的速度，opacity参数为指定的不透明值，它的取值范围是0.0~1.0，可选项参数callback为效果完成后，回调的函数名 $(this).fadeTo("slow",0.2);

$(selector).animate({params},speed,[callback]) //自定义动画效果,其中，params参数为制作动画效果的CSS属性名与值，speed参数为动画的效果的速度，单位为毫秒，可选项callback参数为动画完成时执行的回调函数名。

$("span").animate({
                    width: "80px",
                    height: "80px"
                },
                3000, function () {
                    $("#tip").html("执行完成!");
                });

调用animate()方法不仅可以制作简单渐渐变大的动画效果，而且还能制作移动位置的动画，在移动位置之前，必须将被移元素的“position”属性值设为“absolute”或“relative”，否则，该元素移动不了。

$("span").animate({
                    left: "+=100px"
                }, 3000, function () {
                    $(this).animate({
                        height: '+=30px',
                        width: '+=30px'
                    }, 3000, function () {
                        $("#tip").html("执行完成!");
                    });
                });

$(selector).stop([clearQueue],[goToEnd])//stop()方法的功能是在动画完成之前，停止当前正在执行的动画效果，这些效果包括滑动、淡入淡出和自定义的动画,其中，两个可选项参数clearQueue和goToEnd都是布尔类型值，前者表示是否停止正在执行的动画，后者表示是否完成正在执行的动画，默认为false

$(selector).delay(duration) //延迟

六、实现Ajax应用

load(url,[data],[callback]) //使用load()方法通过Ajax请求加载服务器中的数据，并把返回的数据放置到指定的元素中，参数url为加载服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数。

$("ul")
                    .html("<img src='Images/Loading.gif' alt=''/>")
                    .load("http://www.imooc.com/data/fruit_part.html",function(){
                        $this.attr("disabled", true);
                    });

jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback]) //使用getJSON()方法可以通过Ajax异步请求的方式，获取服务器中的数组，并对获取的数据进行解析，显示在页面中,url参数为请求加载json格式文件的服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数.

$(function () {
                $("#btnShow").bind("click", function () {
                    var $this = $(this);
                    $.getJSON("http://www.imooc.com/data/sport.json",function(data){
                        $this.attr("disabled", "true");
                        $.each( data,function (index, sport) {
                            if(index==3)
                            $("ul").append("<li>" + sport["name"] + "</li>");
                        });
                    });
                })
            });

jQuery.getScript(url,[callback])或$.getScript(url,[callback]) //使用getScript()方法异步请求并执行服务器中的JavaScript格式的文件

//向服务器发送get\post请求

$.get(url,[callback])
$.get("http://www.imooc.com/data/info_f.php",function(data) {
                        $this.attr("disabled", "true");
                        $("ul").append("<li>我的名字叫：" + data.name + "</li>");
                        $("ul").append("<li>男朋友对我说：" + data.say + "</li>");
                    }, "json");

$.post(url,[data],[callback])
$.post("http://www.imooc.com/data/check_f.php",{
                        num:$("#txtNumber").val()
                    },
                    function (data) {
                        $("ul").append("<li>你输入的<b>  "
                        + $("#txtNumber").val() + " </b>是<b> "
                        + data + " </b></li>");
                    });

$(selector).serialize() //使用serialize()方法可以将表单中有name属性的元素值进行序列化，生成标准URL编码文本字符串，直接可用于ajax请求 $("#litest").html($("form").serialize());

jQuery.ajax([settings])或$.ajax([settings]) //使用ajax()方法是最底层、功能最强大的请求服务器数据的方法，它不仅可以获取服务器返回的数据，还能向服务器发送请求并传递数值, (其中参数settings为发送ajax请求时的配置对象，在该对象中，url表示服务器请求的路径，data为请求时传递的数据，dataType为服务器返回的数据类型，success为请求成功的执行的回调函数，type为发送数据请求的方式，默认为get)

$.ajax({

url:"http://www.imooc.com/data/check.php",

data: { num: $("#txtNumber").val() },

type:"post",

success: function (data) {

$("ul").append("<li>你输入的<b> "

+ $("#txtNumber").val() + " </b>是<b> "

+ data + " </b></li>");

}

});

jQuery.ajaxSetup([options])或$.ajaxSetup([options]) //使用ajaxSetup()方法可以设置Ajax请求的一些全局性选项值，设置完成后，后面的Ajax请求将不需要再添加这些选项值

$(function () {

$.ajaxSetup({

type:"post",

success:function(data){

$("ul").append("<li>你输入的<b> "

+ $("#txtNumber").val() + " </b>是<b> "

+ data + " </b></li>");

}

});

$("#btnShow_1").bind("click", function () {

$.ajax({

data: { num: $("#txtNumber").val() },

url: "http://www.imooc.com/data/check.php"

});

})

$("#btnShow_2").bind("click", function () {

$.ajax({

data: { num: $("#txtNumber").val() },

url: "http://www.imooc.com/data/check_f.php"

});

})

});

$(selector).ajaxStart(function())和$(selector).ajaxStop(function()) //ajaxStart()和ajaxStop()方法是绑定Ajax事件。ajaxStart()方法用于在Ajax请求发出前触发函数，ajaxStop()方法用于在Ajax请求完成后触发函数。 (两个方法中括号都是绑定的函数，当发送Ajax请求前执行ajaxStart()方法绑定的函数，请求成功后，执行ajaxStop ()方法绑定的函数)

七、jQuery插件

$(form).validate({options}) //其中form参数表示表单元素名称，options参数表示调用方法时的配置对象，所有的验证规则和异常信息显示的位置都在该对象中进行设置。

$("#frmV").validate(

{

/*自定义验证规则*/

rules: {

email:{

required:true,

email:true

}

/*错误提示位置*/

errorPlacement: function (error, element) {

error.appendTo(".tip");

}

);

$(form). ajaxForm ({options}) //通过表单form插件，调用ajaxForm()方法，实现ajax方式向服务器提交表单数据，并通过方法中的options对象获取服务器返回数据，其中form参数表示表单元素名称；options是一个配置对象，用于在发送ajax请求过程，设置发送时的数据和参数

$(function () {

var options = {

url: "http://www.imooc.com/data/form_f.php",

target: ".tip"

}

$(form).ajaxForm(options);

});

$(linkimage).lightBox({options}) //该插件可以用圆角的方式展示选择中的图片，使用按钮查看上下张图片，在加载图片时自带进度条，还能以自动播放的方式浏览图片其中linkimage参数为包含图片的<a>元素名称，options为插件方法的配置对象

$(function () {

$('.divPics a').lightBox({

overlayBgColor: "#666", //图片浏览时的背景色

overlayOpacity: 0.5, //背景色的透明度

containerResizeSpeed: 600 //图片切换时的速度

})

});

$(linkimage).jqzoom({options}) //在调用jqzoom图片放大镜插件时，需要准备一大一小两张一样的图片，在页面中显示小图片，当鼠标在小图片中移动时，调用该插件的jqzoom()方法，显示与小图片相同的大图片区域，从而实现放大镜的效果

$(function () {

$("#jqzoom").jqzoom({ //绑定图片放大插件jqzoom

zoomWidth: 123, //小图片所选区域的宽

zoomHeight: 123, //小图片所选区域的高

zoomType: 'reverse' //设置放大镜的类型

});

保存：$.cookie(key，value)；读取：$.cookie(key)，删除：$.cookie(key，null)

//使用cookie插件后，可以很方便地通过cookie对象保存、读取、删除用户的信息，还能通过cookie插件保存用户的浏览记录其中参数key为保存cookie对象的名称，value为名称对应的cookie值。

$(function () {

if ($.cookie("email")) {

$("#email").val($.cookie("email"));

}

$("#btnSet").bind("click", function () {

if ($("#chksave").is(":checked")) {

$.cookie("email",$("#email").val(), {

path: "/", expires: 7

})

}

else {

$.cookie("email",null, {

path: "/"

})

}

});

$(textbox).autocomplete(urlData,[options]); //搜索插件的功能是通过插件的autocomplete()方法与文本框相绑定，当文本框输入字符时，绑定后的插件将返回与字符相近的字符串提示选择 ,其中，textbox参数为文本框元素名称，urlData为插件返回的相近字符串数据，可选项参数options为调用插件方法时的配置对象

var arrUserName = ["王五", "刘明", "李小四", "刘促明", "李渊", "张小三", "王小明"];

$("#txtSearch").autocomplete(arrUserName,{

minChars: 0, //双击空白文本框时显示全部提示数据

formatItem: function (data, i, total) {

return "<I>" + data[0] + "</I>"; //改变匹配数据显示的格式

formatMatch: function (data, i, total) {

return data[0];

formatResult: function (data) {

return data[0];

}

}).result(SearchCallback);

function SearchCallback(event, data, formatted) {

$(".tip").show().html("您的选择是：" + (!data ? "空" : formatted));

}

八、jQuery 工具类函数

$(function () {

var strTmp = "您的浏览器名称是：";

if ($.browser.chrome) { //谷歌浏览器

strTmp += "Chrome";

}

if ($.browser.mozilla) { //火狐相关浏览器

strTmp += "Mozilla FireFox";

}

strTmp += "<br /><br /> 版本号是：" //获取版本号

+$.browser.version;

$(".content").html(strTmp);

});

$.support.boxModel 显示当前浏览器是否属于标准的w3c盒子模型 w3c盒子模型不包含，IE盒子模型则包含，Width和Height这两个属性值中是否包含padding和border的值 <!DOCTYPE html>

$.isEmptyObject(obj); //检测对象是否为空

$.isPlainObject (obj); //检测对象是否为通过{}或new Object()关键字创建的原始对象

$.contains (container, contained); //调用名为$.contains的工具函数，能检测在一个DOM节点中是否包含另外一个DOM节点，如果包含，返回true，否则，返回false值参数container表示一个DOM对象节点元素，用于包含其他节点的容器，contained是另一个DOM对象节点元素，用于被其他容器所包含

$.contains(node_a,node_b)

$.trim (str); 调用名为$.trim的工具函数，能删除字符串中左右两边的空格符，但该函数不能删除字符串中间的空格 var strNew = $.trim(strOld);

$. param (obj); //调用名为$. param的工具函数，能使对象或数组按照key/value格式进行序列化编码，该编码后的值常用于向服务端发送URL请求,参数obj表示需要进行序列化的对象，该对象也可以是一个数组，整个函数返回一个经过序列化编码后的字符串 var objNewInfo =$.param(objInfo);

(p.s:param和serialize的区别是什么？前者是对任意的参数进行URL地址格式的转换)

$. extend ({options}); //调用名为$. extend的工具函数，可以对原有的工具函数进行扩展，自定义类级别的jQuery插件

(function ($) {

$.extend({

"MinNum": function (p1, p2) {

return (p1 > p2) ? p2 : p1;

}

});

})(jQuery);

$(function () {

$("#btnShow").bind("click", function () {

$(".tip").html("");