jQuery-样式（初识jQuery）

最新推荐文章于 2021-12-14 14:44:03 发布

sundaxiao

最新推荐文章于 2021-12-14 14:44:03 发布

阅读量312

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/sunxiaofre/article/details/56665925

版权

jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

jQuery HelloWorld

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <style>
        div{
            padding: 8px 0;
            font-size: 12px;
            text-align: center;
            border: 1px solid #888;
        }
    </style>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("div").html("你好，我是jQuery！");
        });
    </script>
</head>
<body>
<div></div>
</body>
</html>

1.1 `$(document).ready()` 的作用是：等页面文档document中的节点都加载完毕后，再执行后续的操作代码，因为再执行此段代码时，可能会依赖页面中的某一个元素，所以要保证这个元素真正的被加载完毕后才能正确的使用。

1.2 `$("div").html()` 的作用：相当于获取或设置DOM对象的`innerHTML`属性的作用。

1.3对应于javascript中的各类选择器，如：

$("*") ——所有元素 

$("#idname") ——id="idname" 的元素 

$(".classname") ——所有 class="classname" 的元素 

$("p") ——所有 <p> 元素 

$(".first.second") ——所有 class="first" 且 class="second" 的元素

jQuery对象与DOM对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery对象与DOM对象</title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <!--使用原生js语法-->
    <script type="text/javascript">
        window.onload = function () {
            var oDiv = document.getElementById('jsDiv');
            oDiv.innerHTML = "Hello! I am JavaScript.";
            oDiv.style.color = "red";
        }

    </script>

    <!--使用jQuery语法-->
    <script type="text/javascript">
        $(document).ready(function () {
            var $div = $('#jQueryDiv');
            $div.html('Hello! I am jQuery.').css('color','green');
        });
    </script>

</head>

<body>
<div id="jsDiv">jQuery对象与DOM对象</div>
<div id="jQueryDiv">jQuery对象与DOM对象</div>

</body>
</html>

jQuery对象转化成DOM对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery对象转化成DOM对象</title>
    <script src="http://code.jquery.com/jquery-1.11.3.js"></script>
</head>
<body>
<!--jQuery是一个类数组对象，而DOM对象就是一个单独的DOM对象。-->
<div>元素一</div>
<div>元素二</div>
<div>元素三</div>

<script type="text/javascript">
    var $div = $('div');    //jQuery对象

    //jQuery对象是一个数组结构，通过数组下表索引找。
    var div0 = $div[0];

    // /jQuery自带get()方法允许我们直接访问jQuery对象中相关的DOM节点，get方法中提供一个元素的索引。。
    var div1 = $div.get(1);

    div0.style.color = 'red';
    div1.style.color = 'green';

</script>

</body>
</html>

DOM对象转化成jQuery对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>将DOM对象转化成jQuery对象</title>
    <script src="http://code.jquery.com/jquery-1.11.3.js"></script>

</head>
<body>
<div>元素零</div>
<div>元素一</div>
<div>元素二</div>

<script type="text/javascript">
    var oDiv = document.getElementsByTagName('div');    //dom队形
    var $div = $(oDiv); //jQuery对象
    var $first = $div.first();  //找到第一个div元素
    $first.css('color','red');  //修改颜色

</script>

</body>
</html>