Jquery学习之路(入门)

(1)jQuery使用:*$(document).ready* 的作用是等页面的文档(document)中的节点都加载完毕后,再执行后续的代码,因为我们在执行代码的时候,可能会依赖页面的某一个元素,我们要确保这个元素真正的的被加载完毕后才能正确的使用。

<body>
  <div>div>
body>

<script src="https://code.jquery.com/jquery-3.2.1.min.js">script>  
<script type="text/javascript"> $(document).ready(function() { $("div").html("学习jQuery第一天") }); script>

(二)jquery对象和DOM对象通过jquery包装后的对象,是一个类数组对象,它与DOM对象完全不同,而DOM对象只是单独的一个DOM元素,唯一相似的是都能操作DOM。以下代码比较可以看出jquery简约很多。

<body>
    <p id="ccg1">p>
    <p id="ccg2">p>
body>

    <script type="text/javascript"> window.onload = function() { var p = document.getElementById("ccg1"); p.innerHTML = 'P1: dom对象'; p.style.color = 'red'; } script>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js">script> 
    <script type="text/javascript"> $(document).ready(function() { /** * 通过jQuery语法获取id为imooc2的元素获得一个jQuery对象 * 调用该对象的html()方法进行更改内容 * 调用该对象的css()方法进行更改颜色样式 */ var $p = $('#ccg2'); $p.html('P2:jqeury对象').css('color','blue') }); script>

运行结果如下:
这里写图片描述

(三)jQuery对象转化成DOM对象:因为jquery对象是一个类数组对象,所有可以通过下标索引查找。jquery对象自身提供get()方法直接访问jQuery对象中相关的DOM节点,get方法中提供一个元素的索引

<body>
    <div>元素一div>
    <div>元素二div>
    <div>元素三div>

     <script type="text/javascript"> var $div = $('div'); //jQuery对象 // var div = $div[0]; //方法一 var div = $div.get(0); //方法二 div.style.color = 'red'; //操作dom对象的属性 script>

body>

运行效果:
这里写图片描述

(四)DOM对象转化成jQuery对象:如果传递给$(DOM)函数的参数是一个DOM对象,jQuery方法会把这个DOM对象给包装成一个新的jQuery对象

<body>
<div>元素一div>
<div>元素二div>
<div>元素三div>
    <script type="text/javascript"> var div = document.getElementsByTagName('div'); //dom对象 //将dom节点div转化为$div的jquery对象 $div = $(div) var $first = $div.first(); //找到第一个div元素 $first.css('color', 'red'); //给第一个元素设置颜色 script>
body>

补充:first() 将匹配元素集合缩减为集合中的第一个元素。如果给定一个表示 DOM 元素集合的 jQuery 对象,.first() 方法会用第一个匹配元素构造一个新的 jQuery 对象。

你可能感兴趣的:(jquery学习之路)