jQuery教程

前端-jQuery

本文主要是介绍前端-jQuery,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

概念

jQuery是一个JavaScript函数库。

jQuery是一个轻量级的"写的少,做的多"的JavaScript库。

jQuery库包含以下功能:

  •   HTML 元素选取
  •   HTML 元素操作
  •   CSS 操作
  •   HTML 事件函数
  •   JavaScript 特效和动画
  •   HTML DOM 遍历和修改
  •   AJAX
  •   Utilities

提示: 除此之外,jQuery还提供了大量的插件。目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架,而且提供了大量的扩展。

 

安装

jQuery的版本:

  jQuery版本有很多,分为1.x 2.x 3.x

    1.x版本:能够兼容IE678浏览器

    2.x版本:不兼容IE678浏览器

    1.x和2.x版本jquery都不再更新版本了,现在只更新3.x版本。

    3.x版本:不兼容IE678,更加的精简(在国内不流行,因为国内使用jQuery的主要目的就是兼容IE678)

    国内多数网站还在使用1.x的版本

jQuery的下载

  jQuery有两个版本:生成环境使用的和开发测试环境使用的。

    Production version - 用于实际的网站中,已被精简和压缩。

    Development version - 用于测试和开发(未压缩,是可读的代码)

  以上两个版本都可以从 jquery.com 中下载。

jQuery的使用

  jQuery 库是一个 JavaScript 文件,我们可以直接在 HTML页面中通过script 标签引用它,跟引用自己的 外部JavaScript脚本文件一样的语法。

<head>
    <script src="jquery-1.11.1.js"></script>
</head>

 

jQuery语法结构

jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作(actions)。

基础语法: $(selector).action()

  说明:   美元符号定义 jQuery

       选择符(selector)"查询"和"查找" HTML 元素

        jQuery 的 action() 执行对元素的操作

 

文档就绪事件

  文档就绪事件,实际就是文件加载事件。

  这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码,即在 DOM 加载完成后才可以对 DOM 进行操作。

  如果在文档没有完全加载之前就运行函数,操作可能失败。 所以我们尽可能将所有的操作都在文档加载完毕之后实现。

写法1:
$(document).ready(function(){
    // 开始写 jQuery 代码...
});

写法2:简介写法-推荐
$(function(){
    // 开始写 jQuery 代码...
});

  jQuery的ready方法与JavaScript中的onload相似,但是也有区别:

  window.onload $(document).ready()
执 行 次 数 只能执行一次,如果执行第二次,第一次的 执行会被覆盖 可用执行多次,不会覆盖之前的执行
执 行 时 机 必须等待网页全部加载挖完毕(包括图片 等),然后再执行包裹的代码 只需要等待网页中的DOM结果加载完 毕就可以执行包裹的代码
简 写 方 式 $(function(){ });

 

jQuery选择器

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。

它基于已经 存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头:$()。

<script>
    //1、标签选择器:
    function htmlSelector(){                
        //获取所有的div元素(集合)
        var divList=$("div");
        console.log(divList);//jQuery的对象
        console.log(divList.length);
        for(var i=0;i<divList.length;i++){
            console.log(divList[i]);//js的对象
        //将js对象转换为jQuery的对象
        console.log($(divList[i]));
    } 
    }
    //2、id选择器
    function idSelector(){
        //根据id获取到的元素是惟一的,即使页面上有重名的id,获取的是第一个
        var p=$("#p1");
    console.log(p.html());
    }
    //3、.class选择器
    function classSelector(){
    var list=$(".mydiv");
    console.log(list.length);
    }            
    //4、 全局选择器
    function allSelector(){
        var list=$("*");//包括了html、head、title.....所有标签
        console.log(list.length);
        for(var i=0;i<list.length;i++){
        console.log(list[i]);//js的对象                    
    }  
    }
    //5、并集选择器
    function andSelector(){
        var list=$(".mydiv,p,li");
        printList(list); 
    }
    //6、后代选择器:包括所有的后代,儿子和孙子辈都有
    function subSelector(){
    var list=$("form input");
    printList(list);
    }
    //7、子选择器:只有子元素
    function sunSelector(){
        var list=$("form>input");
        printList(list);
    }
    //8、相邻选择器
    function nextSelector(){
        var list=$("label + input");
        printList(list);
    }
    //9、同辈选择器
    function sublingsSelector(){
        var list=$("form ~ div");
        printList(list); 
    }
    //10、属性选择器
    function attrSelector(){
        var list=$("div[id]");//获取所有有id属性的div的元素集合
    list=$("div[class]");//获取所有有class属性的div的元素集合
    list=$("input[name='userName']");//获取所有input标签中name属性是userName元素的集合
        list=$("input[name^='user']");//获取所有input标签中name属性是user开头的元素的集合
        list=$("input[name$='user']");//获取所有input标签中name属性是user结尾的元素的集合
        list=$("input[name*='user']");//获取所有input标签中name属性包含了user的元素的集合
        list=$("input[id][name^='user']");//获取所有input标签中既有id属性又有name属性以user开头的元素的集合
        printList(list);
    }
    //11、可见性选择器
    function seeSelector(){
        //匹配所有的可见div元素
    var list=$("div:visible");
        //匹配所有的不可见div元素
        var list=$("div:hidden");
        //匹配所有的不可见input元素,样式有display:none的元素和type=hidden的元素
        list=$("input:hidden"); 
        printList(list);
   }
            
    //文档就绪事件:页面加载完毕之后执行:
    $(function(){
        seeSelector();
    });
</script>        

 

jQuery常用函数

与标签内容相关函数

与标签属性相关函数

与标签样式相关函数

<script>
    //1、与标签内容相关函数
    function textFun(){
        var str1=$("div").html();//获取的是第一个匹配元素的围堵标签中的内容,包含了嵌套在内容的标签的内容
        console.log(str1);
        var str2=$("div").text();//获取的是所有匹配元素的标签中的文本信息,不包含标签内容
        console.log(str2);
        var str3=$("div").val();//val()只能获取到表单项元素的值,div不是表单元素,所有获取不到
        console.log(str3);
        var str4=$("input").val();//获取的是第一个匹配表单元素的value值,input是表单元素,所以可以获取到值
        console.log(str4);
    }
    //2、与属性相关的函数
    function attrFun(){
        var img=$("img");
        //设置属性
        img.attr("src","img/cat.jpg");
        img.attr("title","不服!");
        //移除属性
        img.removeAttr("title");
        //获取属性
        var src=img.attr("src");
        var title=img.attr("title");
        console.log(src+"===="+title);
        //获取checked属性使用prop函数,获取到的值是boolean类型,表示十分被选中
        var list=$("input[type='radio']");
        for(var i=0;i<list.length;i++){
            var flag=$(list[i]).prop("checked");
        console.log("checked="+flag);
        }                
    }
    //3、与css相关的函数
    function cssFun(){
        //给获取的元素添加、删除、切换已有的样式 PS:样式一定是在样式表中提前定义好的
        $("div").addClass("redBg");
        $("div").addClass("redBg fontColor");
        $("div").removeClass("fontColor");
        $("div").removeClass();//没有参数的时候直接移除所有的样式
        //$("div").toggleClass("fontColor");//匹配元素如果有当前的样式就删除,如果没有就添加
        //给所有的元素添加样式,样式直接添加,无需提前定义
        $("input").css("border-color","blue");
        $("input").css({"color":"red","border-color":"green"});
    }        
</script>

 

jQuery中的事件

页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

常用DOM事件列表

鼠标事件 键盘事件 表单事件 件 文档/窗口事件
click keydown submit load
dblclick keyup change  
mouseover   focus  
mouseout   blur  
hover      

常用的 jQuery 事件方法

在 jQuery 中,大多数 DOM 事件都有一个等效的 jQuery 方法。

<script>
    //页面加载事件
    $(function(){
        //给所有的button绑定单击事件
        $("button").click(function(){
            //alert(this);//this是当前对象,哪个按钮触发的单击事件this就是那个按钮,this此时是JS对象
            $(this).css("color","red");//给当前的触发对象添加一个css
        });
        //给所有的超链接绑定鼠标移上事件
        $("a").mouseover(function(){
            var str=$(this).html();
            $(this).html("鼠标移上-"+str);
        });
        //给所有的超链接绑定鼠标移出事件
        $("a").mouseout(function(){
            var str=$(this).html();
            $(this).html(str.substr(5));
        });
        $("a").hover(function(){
            $(this).css("color","red");
        });
    });
</script>

 

jQuery操作DOM

元素的增加

  • append() - 在被选元素的结尾插入内容
  • prepend() - 在被选元素的开头插入内容
  • after() - 在被选元素之后插入内容
  • before() - 在被选元素之前插入内容
<script>
    $(function(){
        // append() - 在被选元素的结尾插入内容
        $("#btn1").click(function(){
            $("div").append("<br/>新添加的文本<br/>");
            $("div").append("<p>新添加的段落</p>");
        });
        //prepend() - 在被选元素的开头插入内容
        $("#btn2").click(function(){
            $("div").prepend("<br/>新添加的文本<br/>");
            $("div").prepend("<p>新添加的段落</p>");
        });
        //after() - 在被选元素之后插入内容
        $("#btn3").click(function(){
            $("div").after("<br/>新添加的文本<br/>");
            $("div").after("<p>新添加的段落</p>");
        });
        //before() - 在被选元素之前插入内容
        $("#btn4").click(function(){
            $("div").before("<br/>新添加的文本<br/>");
            $("div").before("<p>新添加的段落</p>");
        });
    });
</script>

元素的克隆

clone(boolean)-克隆匹配的DOM元素并且选中这些克隆的副本

语法:$(selector).clone(includeEvents);

参数:可选。布尔值。规定是否复制元素的所有事件处理。默认地,副本中不包含事件处理器。

<script>
    $(function(){
        $("#btn3").click(function(){
            alert("试试就试试!");
        });
        // clone(true)
        $("#btn1").click(function(){
            $("p").clone(true).appendTo("div");
        });
        //clone(false)
        $("#btn2").click(function(){
            $("p").clone(false).appendTo("div");
        });
    });            
</script>

元素的替换

  • replaceWith() -将所有匹配的元素替换成指定的HTML或DOM元素。
  • replaceAll()-用匹配的元素替换掉所有 selector匹配到的元素。
<script>
    $(function(){
        //replaceWith() -将所有匹配的元素替换成指定的HTML或DOM元素。
        $("#btn1").click(function(){
            //$("div").replaceWith("<br/>新替换的文本<br/>");
            $("div").replaceWith("<p>新替换的段落</p>");//所有的div被后面的参数替换掉
        });
        //replaceAll()-用匹配的元素替换掉所有 selector匹配到的元素。
        $("#btn2").click(function(){
            $("<div>新的div</div>").replaceAll("p");//用前面的内容替换掉所有的段落p
        });
    });
</script>

元素的删除

  • remove() - 删除被选元素(及其子元素)
  • empty() - 从被选元素中删除子元素
<script>
    $(function(){
        //remove() - 删除被选元素(及其子元素)
        $("#btn1").click(function(){
            $("div").remove();//所有的div元素及其子元素被删除
        });
        //remove(筛选条件) - 删除符合筛选条件的元素
        $("#btn2").click(function(){
            $("div").remove(".test");//所有的div元素中引用了class="test"的div被删除
        });
        //empty() - 从被选元素中删除子元素
        $("#btn3").click(function(){
            $("div").empty();//删除div中的所有子元素
        });
    });
</script>

 

jQuery效果

隐藏和显示

  语法:

    •    $(selector).hide([speed,callback]);
    •   $(selector).show([speed,callback]);
    •    $(selector).toggle([speed,callback]);

  参数说明: 可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。

        可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

<script>
    $(function(){
        $("#btnHide").click(function(){
            //$("div").hide();
            //$("div").hide(2000);
            $("div").hide(2000,function(){
                alert("隐藏完成!");
            });
        });
        $("#btnShow").click(function(){
            //$("div").show();
            //$("div").show(2000);
            $("div").show(2000,function(){
                alert("显示完成!");
            });
        });
        $("#btnToggle").click(function(){
            //$("p").toggle();
            //$("p").toggle(2000);
            $("p").toggle(2000,function(){
                alert("切换完成!");
            });
        });
    });
</script>

淡入和淡出

  语法:

    • $(selector).fadeIn([speed,callback]);
    • $(selector).fadeOut([speed,callback]);
    • $(selector).fadeToggle([speed,callback]);

  参数说明: 可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。

        可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

<script>
    $(function(){
        $("#btnIn").click(function(){
            //$("div").fadeIn();
            //$("div").fadeIn(2000);
            $("div").fadeIn(2000,function(){
                alert("淡入完成!");
            });
        });
        $("#btnOut").click(function(){
            //$("div").fadeOut();
            //$("div").fadeOut(2000);
            $("div").fadeOut(2000,function(){
                alert("淡出完成!");
            });
        });
        $("#btnToggle").click(function(){
            //$("p").fadeToggle();
            //$("p").fadeToggle(2000);
            $("p").fadeToggle(2000,function(){
                alert("切换完成!");
            });
        });
    });
</script>
    

 

这篇关于前端-jQuery的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!