JQuery

最新推荐文章于 2022-10-17 22:07:41 发布

肉man

最新推荐文章于 2022-10-17 22:07:41 发布

阅读量140

点赞数

分类专栏： javaWeb javaWeb 文章标签： JQery

肉man

本文链接：https://blog.csdn.net/weixin_42166907/article/details/82026215

版权

javaWeb 同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

javaWeb

23 篇文章 0 订阅

订阅专栏

概述

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。
1. jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。
2. 它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：

      ■ 具有独特的链式语法和短小清晰的多功能接口；
      ■ 具有高效灵活的css选择器，并且可对CSS选择器进行扩展；
      ■ 拥有便捷的插件扩展机制和丰富的插件。
      ■ jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。 [1] 
      ■ javascript轻量级框架

特性

jQuery 是一个 JavaScript 函数库。
jQuery 库包含以下特性：
  ● HTML 元素选取
  ● HTML 元素操作
  ● CSS 操作
  ● HTML 事件函数
  ● JavaScript 特效和动画
  ● HTML DOM 遍历和修改
  ● AJAX
  ● Utilities

作用

即倡导写更少的代码，做更多的事情。

将页面的css代码和html代码进行分离

为什么学习JQery

提高代码效率

语法

jQuery 语法是为 HTML 元素的选取编制，可以对元素执行某些操作。
基础语法是：$(selector).action()
● 美元符号定义 jQuery
● 选择符（selector）“查询”和“查找” HTML 元素
● jQuery action() 执行对元素的操作
通过jq改变样式–> .css(“选择样式名”,”样式值”);

实例

$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$("p.test").hide() - 隐藏所有 class="test" 的段落
$("#test").hide() - 隐藏所有 id="test" 的元素
提示：jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。

##文档就绪函数您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：

$(document).ready(function(){

            --- jQuery functions go here ----

        });

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。 ##js与jq的区别 ###互相转换

<script type="text/javascript">
    //js对象
    var input1 = document.getElementById("t1");

    //js==>jq
    //${js对象}
    var $input1 = $(input1);

    //jq==>js
    var $input2= $("#t1");
    var input2 = $input2[0];
    //方法2
    //var input2 = $input2.get(0);
</script>

页面加载

js:
window.onload=fucntion(){        }
--> 只执行一次
jq:
$(docunmet).reday(function(){            })
简写
$(function(){          })
--> 可执行多此

事件绑定写法
js:
document.getElementById("btn").onclick=function () {
    alert("ahaha");
}
jq:
$("#btn").click(function () {
    alert("aaaa");
});

jQuery 名称冲突

jQuery 使用 $ 符号作为 jQuery 的简介方式。

某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。

jQuery 使用名为 noConflict() 的方法来解决该问题。
var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。

结论

由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：
● 把所有 jQuery 代码置于事件处理函数中

● 把所有事件处理函数置于文档就绪事件处理器中
● 把 jQuery 代码置于单独的 .js 文件中
● 如果存在名称冲突，则重命名 jQuery 库

使用JQuery

1.导入文件
<!--导入jq文件-->
<script type="text/javascript" src="../jquery-1.11.0.js"></script>
<script>
    /*基本写法*/
    jQuery(document).ready(function() {
        alert("jQuery(document).ready(function()");
    });
    /*$替换jquery*/
    $(document).ready(function () {
        alert("$(document).ready(function ()")
    });
    /*简单写法*/
    $(function () {
        alert("$(function ()");
    });
</script>

注意 a. 先编译先执行,后编译,后执行,不会覆盖前者的内容 b. id必须唯一 ——————————————————————————– js与jq转换

 <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../jquery-1.11.0.js"></script>
    <script>
        /*js方式*/
        function changeJS() {
            var div = document.getElementById("div1");
            //div.innerText = "成功修改";
            $(div).html("转成JQ对象修改");
        }
        /*jq方式*/
        $(function () {
           //按钮绑定事件
           $("#btn2").click(function () {
               //找到div1
               $("#div1").html("JQ方式修改");
               var $div = $("#div1");
               var jsDiv = $div.get(0);
               jsDiv.innerHTML = "JQ转成JS对象操作";
           });
        });
    </script>
</head>
<body>
    <input type="button" value="JS修改div内容" onclick="changeJS()"/>
    <input type="button" value="JQ修改div内容" id="btn2"/>
    <div id="div1">
        这里的内容会被修改掉
    </div>
</body>
</html>

jq实现动画效果

jq开发步骤

1.导入相关的步骤

2.文档加载完成事件:$(function):    --  页面初始化操作:绑定图片

3.确定相关的时间

4.事件触发函数

5.函数操作相关元素


代码实现

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../jquery-1.11.0.js" ></script>

    <script>
        $(function () {
            //显示图片
            $("#btn1").click(function () {
               $("#img1").show();
            });
            //隐藏图片
            $("#btn2").click(function () {
                //获得img1
                $("#img1").hide(1000);
            });
        })
    </script>
</head>
<body>
    <input type="button" value="显示" id="btn1"/>
    <input type="button" value="隐藏" id="btn2"/><br/>
    <img src="2.jpg" id="img1"/>
</body>

定时弹出广告

分析

1.导入jq文件
2.编写jq文档加载事件
3.页面初始化--启动定时器(setTimeout("",3000))
4.编写显示广告的函数
5.编写广告隐藏的函数

代码

实现

`<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../jquery-1.11.0.js" ></script>
    <script>
        //显示广告
        function showAd() {
            $("#img1").show(2000);
            setTimeout("hideAd()",2000);
        }
        //隐藏广告
        function hideAd() {
            $("#img1").hide(2000);
            setTimeout("showAd()",2000)
        }
        $(function () {
            setTimeout("showAd()",2000);
        });
    </script>
</head>
<body>
    <img src="1.jpg" id="img1" width="100%" style="display: none"/>
</body>

`JQuery选择器
–> 更加精确的找到要操作的元素

基本选择器
id选择器 –> #ID名称
类选择器 –> .名称
元素选择器 –> 标签的名称
通配符选择器 –> *
选择器分组 –> 选择器1,选择器2

案例

    <script type="text/javascript" src="../jquery-1.11.0.js"></script>
    <!--引入jq文件-->
    <script>
        /*文档加载,页面初始化*/
        $(function () {
            //id选择器
            $("#btn1").click(function () {
                $("#two").css("background-color","red");
            });
            //类选择器
            $("#btn2").click(function () {
                $(".mini").css("background-color","green");
            });
            //元素选择器
            $("#btn3").click(function () {
                $("div").css("background-color","blue");
            });
            //通配符选择器
            $("#btn4").click(function () {
                $("*").css("background-color","green");
            });
            //选择器分组
            $("#btn5 ").click(function () {
                $(".mini,span").css("background-color","green");
            });
        });
    </script>
</head>
<body>
    <input type="button" value="找出id为two的元素" id="btn1"/>
    <input type="button" value="找出mini类的元素" id="btn2"/>
    <input type="button" value="找出div元素" id="btn3"/>
    <input type="button" value="找出通配符选择器" id="btn4"/>
    <input type="button" value="找出mini类和span元素" id="btn5"/>
    <div id="one">
        <div class="mini">
            1-1
        </div>
    </div>
    <div id="two">
        <div class="mini">2-1</div>
        <div class="mini">2-2</div>
    </div>
    <div id="three">
        <div class="mini">3-1</div>
        <div class="mini">3-2</div>
        <div class="mini">3-3</div>
    </div>
    <span id="four">span</span>
</body>

层级选择器

子元素选择器: 选择器1 > 选择器2

后代选择器: 选择器1 子孙

相邻选择器: 选择器1+ 选择器2:找出紧挨的一个车弟弟

所有选择器: 选择器1~选择器2

案例

`<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../style.css">
    <script type="text/javascript" src="../jquery-1.11.0.js"></script>
    <!--引入jq文件-->
    <script>
        /*文档加载,页面初始化*/
        $(function () {
            //子元素选择器
            $("#btn1").click(function () {
                $("body>div").css("background-color","red");
            });
            //所有选择器
            $("#btn2").click(function () {
                $("body div").css("background-color","red");
            });
            //相邻
            $("#btn3").click(function () {
                $("#one + div").css("background-color","red");
            });
            //弟弟选择器
            $("#btn4").click(function () {
                $("#one ~ div").css("background-color","red");
            });
        });
    </script>
</head>
<body>
    <input type="button" value="找出body下的子div" id="btn1"/>
    <input type="button" value="找出body下所有div" id="btn2"/>
    <input type="button" value="找出id为one的相邻兄弟div" id="btn3"/>
    <input type="button" value="找出id为one的弟弟div" id="btn4"/>
    <div id="one">
    <div class="mini">
        1-1
    </div>
</div>
<div id="two">
    <div class="mini">2-1</div>
    <div class="mini">2-2</div>
</div>
<div id="three">
    <div class="mini">3-1</div>
    <div class="mini">3-2</div>
    <div class="mini">3-3</div>
</div>
<span id="four">span</span>
</body>
</html>
属性
$(function () {
    $("a[href]").css("color","red");
    $("a[href][title='test']").css("color","green");
});

`表单
input设置注意select.textarea等输入项也会被修改

肉man

关注

0
点赞
踩
0

收藏

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

概述jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。 jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和...
复制链接

扫一扫

专栏目录