前端-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的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

jQuery教程

前端-jQuery

前端开发

后端开发

移动端开发

数据库

服务器运维

人工智能

区块链

游戏开发

网站运营

大数据/云计算

软件工程

软件/开发工具使用

资讯