jQuery简介、实现、选择器操作、属性操作

最新推荐文章于 2020-05-22 16:01:28 发布

赵大土

最新推荐文章于 2020-05-22 16:01:28 发布

阅读量126

点赞数

文章标签： jQuery

本文链接：https://blog.csdn.net/weixin_43647393/article/details/100143735

版权

1. jQuery

1. jQuery

jQuery是实现了一定功能的js代码的封装后的框架，类似于一个工具箱

1.1 在idea中使用jQuery

导入jquery包

 <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

第一次导包需要下载：光标移动至该行代码，同时按住 alt 和 enter 键，按提示下载即可
下载后会提示应用在那个package，可以选择当前package，后面无论哪个package使用只需再次导包（如上），无需再次下载

如果在另个package中导入了包，但在使用时提示“unresolved function or method $()”，说明缺少库，解决办法是在 Settings - Languages & Frameworks - JavaScript - Libraies-Download 中下载安装jquery后重启即可

使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script>
        $(function () {
            var p=$("p");//将p标签的地址赋值给p
            p.text("hello jquery");//设置p标签的文本内容
            p.css("color","pink");//设置p标签文本内容的字体颜色
            p.css("text-align","center");//设置p标签文本内容的字体居中
            p.css("font-size","66px");//设置p标签文本内容的字体大小
            p.css("font-family","comic sans MS");//设置p标签文本内容的字体
            p.css("font-weight","bold");//设置p标签文本内容的字体加粗
        })
    </script>
</head>
<body>
    <p></p>
</body>
</html>

显示效果

1.2 页面加载函数

因为HTML是从上往下一次解析代码，所以如果js代码写在了body代码之前，但js代码引用了body代码中某个数据，那么这个数据将在js代码中失效。例如，以下js代码中的功能是实现不了的，因为在解析js代码时，div还未被创建。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script>
        function f() {
            $("#div").text("更改之后的数据")
        }
    </script>
</head>
<body>
    <div id="div">初始数据</div>
</body>
</html>

如果要实现js中的功能，需要先加载body（预加载）

方式一_body实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script>
        function f() {
            $("#div").text("更改之后的数据")
        }
    </script>
</head>
<body onload="f()">
    <div id="div">初始数据</div>
</body>
</html>

方式二_jsDOM实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script>
        window.onload=function f() {
            $("#div").text("更改之后的数据")
        }
    </script>
</head>
<body>
    <div id="div">初始数据</div>
</body>
</html>

方式三_jQuery实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script>
        $(
            function f() {
                $("#div").text("更改之后的数据")
            }
        )
    </script>
</head>
<body>
    <div id="div">初始数据</div>
</body>
</html>

$(function f(){})
等同于
$(document).ready(function f(){})
等同于
jQuery(document).ready(function f(){})
$时 j Q u e r y 中的一种 ‘ 重载方法 ’ ，当$ ()的参数为function时，表示body已被加载完毕

1.3 jQuery获取标签元素对象——选择器

id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script>
        $(
            function f() {
                $("#div").text("更改之后的数据")
            }
        )
    </script>
</head>
<body>
    <div id="div">初始数据</div>
</body>
</html>

class选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script>
        $(
            function f() {
                $(".div").text("更改之后的数据")
            }
        )
    </script>
</head>
<body>
    <div class="div">初始数据</div>
</body>
</html>

元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script>
        $(
            function f() {
                $("div").text("更改之后的数据")
            }
        )
    </script>
</head>
<body>
    <div>初始数据</div>
</body>
</html>

1.4 操作属性

获取属性_.attr(“属性名”)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script>
        $(
            function f() {
                var str=$("font").attr("color");
                console.info(str);//输出red
            }
        )
    </script>
</head>
<body>
    <font color="red" size="20px"></font>
</body>
</html>

赵大土

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery简介、实现、选择器操作、属性操作

1. jQuery1.1 在idea中使用jQuery1.2 页面加载函数1.3 jQuery获取标签元素对象——选择器1.4 操作属性1. jQueryjQuery是实现了一定功能的js代码的封装后的框架，类似于一个工具箱1.1 在idea中使用jQuery导入jquery包 <script src="http://code.jquery.com/jquery-1.8.3....
复制链接

扫一扫