JQuery

最新推荐文章于 2022-01-23 00:03:09 发布

fighting_cui

最新推荐文章于 2022-01-23 00:03:09 发布

阅读量110

点赞数

本文链接：https://blog.csdn.net/fighting_cui/article/details/119722397

版权

1 JQuery介绍
    1.1 JavaScript与jQuery比较
        Jscript:    1.入口函数只有一个，window.onload
                    2、浏览器兼容性：非常令人头疼，比如textContent虽然作为标准方法但是只支持IE8+以上的浏览器
                    3、DOM错综复杂，实现简单的效果很麻烦
                    4、代码容错性差，出错后导致后面的代码不执行
        Jquery：        1、市场占有率稳步上升，代码比较少，功能强大
                    2、DOM比较强大，事件处理，完全解决了浏览器的兼容性问题
                    3、ajax操作（比较好）
    1.2 什么是Jquery？
        1、jQuery是一个JavaScript函数库。
        2、jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
        3、jQuery库包含以下功能：HTML 元素选取、HTML 元素操作、CSS 操作、HTML 事件函数、JavaScript 特效和HTML DOM 遍历和修改。
2. JQuery 安装
    1、从 jquery.com 下载 jQuery 库
        jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 <script> 标签引用它：
        <head>
        <script src="jquery-1.10.2.min.js"></script>
        </head>
    2、从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery
        <head>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script>
        </head>
3. JQuery 语法
    1.基础语法
        1、美元符号定义 jQuery
        2、选择符（selector）"查询"和"查找" HTML 元素
        3、jQuery 的 action() 执行对元素的操作。
    2. 实例
        1、您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：
            $(document).ready(function(){
            // 开始写 jQuery 代码... }
            );
        2、简洁写法（与以上写法效果相同）:
            $(function(){
            // 开始写 jQuery 代码...
            })
    3.了解jQuery的$符号
        $是什么
            其实$就是一个函数：$();参数不一样，功能不一样
        $(function() {});//参数是function，说明是入口函数
        $(“#btnSetConent”);//参数是字符串，并且以#开头，是一个标签选择，查找id=“btnSetContent”的元素
        $(“div”);//查找所有的div元素
        $(document).ready(funciton(){})//将document转换成jQuery对象
    4. jQuery 入口函数与 JavaScript 入口函数的区别
         jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
         JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。
4. JQuery 选择器
    1. 什么是JQuery选择器
        1、jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
        2、jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意：jQuery选择器返回的是jQuery对象。
        3、jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
        4、jQuery 中所有选择器都以美元符号开头：$()。
    2. 基本选择器
        ID选择器        $(“#id”);            获取指定ID的元素
        类选择器        $(“.class”);        获取同一类class的元素
        标签选择器    $(“div”);            获取同一类标签的所有元素
        并集选择器    $(“div,p,li”);        使用逗号分隔，只要符合条件之一就可。获取所有的div、p、li元素
        交集选择器    $(“div.redClass”);    注意选择器1和选择器2之间没有空格，class为redClass的div元素，注意区分后代选择器。
    3. 层级选择器
        子代选择器    $(“ul>li”);    使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
        后代选择器    $(“ul li”);    使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等
    4. 过滤选择器
        :eq（index）    $(“li:eq(2)”).css(“color”, ”red”);    获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
        :odd        $(“li:odd”).css(“color”, ”red”);    获取到的li元素中，选择索引号为奇数的元素
        :even        $(“li:even”).css(“color”, ”red”);    获取到的li元素中，选择索引号为偶数的元素
    5. 筛选选择器
        children(selector)    $(“ul”).children(“li”)    相当于$(“ul>li”)，子类选择器
        find(selector)        $(“ul”).find(“li”);    相当于$(“ul li”),后代选择器
        siblings(selector)    $(“#first”).siblings(“li”);    查找兄弟节点，不包括自己本身。
        parent()            $(“#first”).parent();    查找父亲
        eq(index)            $(“li”).eq(2);    相当于$(“li:eq(2)”),index从0开始
        next()                $(“li”).next()    找下一个兄弟
        prev()                $(“li”).prev()    找上一次兄弟
        Index()                $(“li”).index()    获取当前的位置（索引）
        not()                $("p").not(".intro")    返回不带有类名 "intro" 的所有 <p> 元素
5. JQuery 事件
    1.什么是事件
        1、页面对不同访问者的响应叫做事件。
        2、实例：在元素上移动鼠标、选取单选按钮、点击元素
    2. 事件语法
        1、单击事件
        $("p").click(function(){
        // 动作触发后执行的代码!!
        });
        2、双击事件
        $("p").dblclick(function(){
            $(this).hide();
        })
        3、鼠标进入
        $("#p1").mouseenter(function(){
        alert('您的鼠标移到了 id="p1" 的元素上!');
        });
        4、鼠标离开
        $("#p1").mouseleave(function(){
        alert("再见，您的鼠标离开了该段落。");
        });
        5、获取焦点
        $("input").focus(function(){
        $(this).css("background-color","#cccccc");
        });
        6、失去焦点
        $("input").blur(function(){
        $(this).css("background-color","#ffffff");
        });
6.JQuery css()方法
    1)、jQuery css() 方法是什么
        css() 方法设置或返回被选元素的一个或多个样式属性。
    (2)、返回 CSS 属性
        如需返回指定的 CSS 属性的值，请使用如下语法：
        css("propertyname");
        $("p").css("background-color");
    (3)、设置CSS属性
        如需设置指定的 CSS 属性，请使用如下语法：
        css("propertyname","value");
        $("p").css("background-color","yellow");
    (4)、设置多个CSS属性
        如需设置多个 CSS 属性，请使用如下语法：
        css({"propertyname":"value","propertyname":"value",...});
        $("p").css({"background-color":"yellow","font-size":"200%"});
7.jQuery css类
    (1)    、addClass()
        向被选元素添加一个或多个类
        .important { font-weight:bold; font-size:xx-large; }
        .blue { color:blue; }
        $("button").click(function(){
        $("h1,p").addClass("blue");
            $("div").addClass("important");
        });
    (2)    、removeClass()
         从被选元素删除一个或多个类
        $("button").click(function(){ $("h1,h2,p").removeClass("blue"); });
    (3)    、toggleClass()
        对被选元素进行添加/删除类的切换操作
        $("button").click(function(){ $("h1,h2,p").toggleClass("blue"); });
    (4)    、eq()
         方法返回带有被选元素的指定索引号的元素，索引号从 0 开头，所以第一个元素的索引号是 0（不是 1）。
        $(selector).eq(index)
    (5)    、index()
         index() 方法返回指定元素相对于其他同级元素的 index 位置。
        $("li").click(function(){
          alert($(this).index());
        });
    (6)、not()
         Not() 方法返回指定元素之外的元素。
        $("input").not(".in1")
8. JQuery 动画
    (1)    、jQuery隐藏显示
        可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素。
        $("#hide").click(function(){
        $("p").hide();
        });
        $("#show").click(function(){
        $("p").show();
        });
        可以使用 toggle() 方法来切换 hide() 和 show() 方法。
        $("button").click(function(){ $("p").toggle(); });
    (2)    、jQuery淡入淡出
        fadeIn() 用于淡入已隐藏的元素， fadeOut() 方法用于淡出可见元素。
        $("button").click(function(){
          $("#div1").fadeIn();
        $("#div2").fadeIn("slow");
        $("#div3").fadeOut(3000);
        });
         fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
    $("button").click(function(){ ("#div2").fadeToggle("fast");});
         fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
    $("button").click(function(){ $("#div1").fadeTo("slow",0.15);});
    (3)    、jQuery滑动
         slideDown() 方法用于向下滑动元素， slideUp() 方法用于向上滑动元素。
        $("#flip").click(function(){ $("#div1").slideDown(); $("#div1").slideUp();});
         slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
        $("#flip").click(function(){ $("#panel").slideToggle(); });
    (4)    、jQuery自定义动画
        animate() 方法用于创建自定义动画。可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是动画完成后所执行的函数名称。
        $("button").click(function(){
        $("div").animate({
        left:'250px', opacity:'0.5', height:'150px', width:'150px'
         }); });
    (5)    、stop方法
        jQuery stop() 方法用于停止动画或效果，在它们完成之前，适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
        $("#stop").click(function(){ $("#panel").stop(); });
    (6)    、回调函数
        在当前动画 100% 完成之后执行。
    $("button").click(function(){
    $("p").hide("slow",function(){
    alert("段落现在被隐藏了");
    }); });
9.jQuery 事件机制
    1.注册事件
    bind() 、on() 方法向被选元素添加一个或多个事件处理程序，以及当事件发生时运行的函数。
        $("p").bind("click",function(){
             alert("这个段落被点击了。");
    }"dbClick",function(){
             alert("这个段落被双击了。");
    });
     $("p").on("click",function(){ alert("段落被点击了。"); });
    2.委托事件
        delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数
                $("div").delegate("p","click",function(){
            $("p").css("background-color","pink");
        });
    (3)    、事件对象event
        event对象有以下属性
        type：事件类型，比如click。
        which：触发该事件的鼠标按钮或键盘的键。
        target：事件发生的初始对象。
        data：传入事件对象的数据。
        pageX：事件发生时，鼠标位置的水平坐标（相对于页面左上角）。
        pageY：事件发生时，鼠标位置的垂直坐标（相对于页面左上角
        $("button").click(function(event){
          console.log(evet);
         });
    (4)    、each()方法
        each() 方法为每个匹配元素规定要运行的函数。
        $("button").click(function(){
        $("li").each(function(){
        alert($(this).text())
        });
        });

fighting_cui

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery

1 JQuery介绍 1.1 JavaScript与jQuery比较 Jscript: 1.入口函数只有一个，window.onload 2、浏览器兼容性：非常令人头疼，比如textContent虽然作为标准方法但是只支持IE8+以上的浏览器 3、DOM错综复杂，实现简单的效果很麻烦 4、代码容错性差，出错后导致后面的代码不执行 Jquery：...
复制链接

扫一扫