jQuery基础详解（一）

来源：互联网发布：什么网站有利于优化编辑：程序博客网时间：2024/06/01 12:37

jQuery(JQ)
你将了解

JQ是什么
JQ怎么环境搭建
第一个helloword
jQuery对象与DOM对象的区别
jQuery对象DOM对象怎么相互转换
jQuery选择器有哪些，具体用法是怎么样的。

一、JQ简介

JQ就是JavaScript库，不仅兼容了CSS3还兼容各种浏览器

优点：

容易上手
强大的选择器
解决浏览器的兼容
完善的事件机制
出色的Ajax封装
丰富的UI

特有的特性、工具方法

链式操作
回调函数
迭代器
延迟对象
队列
。。。。。。

二、JQ环境搭建

官网最新版本 http://jquery.com/download/ ，
注意 jQuery 分 2 个版本 1.x 与 2.x，区别在于 2.x 不再兼容 IE6、7、8浏览器，目的是为了兼容移动端开发。
由于减少了一些代码，使得该版本比 jQuery 1.x 更小、更快。

若开发者比较在意老版本 IE 用户，只能使用 jQuery 1.9 及之前的版本了。
我们这里为了兼容性问题，使用的是 1.9 版本。
jQuery 每一个系列版本分为：压缩版(compressed) 与开发版(development)，我们在开发过程中使用开发版（开发版本便于代码修改及调试），项目上线发布使用压缩版（因为压缩版本体积更小，效率更快）。

jQuery是一个JavaScript脚本库，不需要特别的安装，只需要我们在页面 <head> 标签内中，通过 script 标签引入 jQuery 库即可

<!DOCTYPE HTML><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>    <title>环境搭建</title></head> <body>    <script type="text/javascript"> alert($) </script></body></html>

alert 弹出以下信息，说明环境已经搭建成功了

这里写图片描述

三、第一个helloword

<!DOCTYPE html><html><head>    <meta charset="utf-8"/>    <title>第一个简单的jQuery程序</title>    <style type="text/css">        div{            padding:8px 0px;            font-size:12px;            text-align:center;            border:solid 1px #888;        }    </style>    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>    <script type="text/javascript">            //$(document).ready的作用是等页面的文档（document）中的节点都加载完毕后，再执行后续的代码            //因为我们执行代码得到时候可能会依赖页面的某个元素，我们要确保这个元素真正的被加载完毕后才能正确使用            $(document).ready(function() {                 $("div").html("您好！我在学习JQ老");            });    </script></head><body>    <div></div></body></html>

浏览器中央出现
这里写图片描述

四、jQuery对象与DOM对象的区别

我们用代码来解释

首先我们要实现如下效果
这里写图片描述

我们获取id为imooc的P元素，然后给这个文本节点增加一段文字，并改色

<!DOCTYPE html><html><head>    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />    <title></title>    <script src="http://code.jquery.com/jquery-1.11.3.js"></script>    <!-- 使用JS原生语法 -->    <script type="text/javascript">        window.onload = function(){            // 通过原生JS语法获取id为imooc1的元素p            var p = document.getElementById('imooc1');            // 将元素p在html中内容改变            p.innerHTML = 'P1：您好！我叫大锅饭';            // 将元素p的内容颜色改为红色            p.style.color = 'blue';         }    </script>    <!-- 使用jQuery语法 -->    <script type="text/javascript">        $(document).ready(function() {            /**             * 通过jQuery语法获取id为imooc2的元素获得一个jQuery对象             * 调用该对象的html()方法进行更改内容             * 调用该对象的css()方法进行更改颜色样式             */               //$p 是一个类数组对象这个对象里包含了DOM对象的信息，然后封装了很多操作方法            //调用自己的方法html与css，得到的效果与标准的JavaScript处理结果是一致的。            var $p = $('#imooc2');            $p.html('P2：我叫大锅饭').css('color','red');        });    </script></head><body>    <p id="imooc1"></p>    <p id="imooc2"></p></body></html>

总结：

通过jQuery方法包装后的对象，是一个类数组对象。它与DOM对象完全不同，唯一相似的是它们都能操作DOM
通过jQuery处理DOM的操作，可以让开发者更专注业务逻辑的开发，而不需要我们具体知道哪个DOM节点有那些方法，也不需要关心不同浏览器的兼容性问题，我们通过jQuery提供的API进行开发，代码也会更加精短。

五、jQuery对象DOM对象相互转换

jQuery库本质上还是JavaScript代码，它只是对JavaScript语言进行包装处理，为的是提供更好更方便快捷的DOM处理与开发中经常使用的功能。我们使用jQuery的同时也能混合JavaScript原生代码一起使用。在很多场景中，我们需要jQuery与DOM能够相互的转换，它们都是可以操作的DOM元素，jQuery是一个类数组对象，而DOM对象就是一个单独的DOM元素。

jQuery对象转DOM对象

<!DOCTYPE html><html><head>    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />    <title></title>    <script src="http://code.jquery.com/jquery-1.11.3.js"></script></head><body>    <div>元素一</div>    <div>元素二</div>    <div>元素三</div>    <!--通过jQuery找到所有div元素（这里3个）-->    <script type="text/javascript">        var $div = $('div'); //jQuery对象（数组结构）        //var div = $div[1] //通过数组下标转化成DOM对象        var div = $div.get(0)//通过get方法，转化成DOM对象        div.style.color = 'red'; //操作dom对象的属性    </script></body></html>

元素一字变红。

DOM对象转jQuery对象

<!DOCTYPE html><html><head>    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />    <title></title>    <script src="http://code.jquery.com/jquery-1.11.3.js"></script></head><body><div>元素一</div><div>元素二</div><div>元素三</div>    <!--如果传递给$(DOM)函数的参数是一个DOM对象，jQuery方法会把这个DOM对象给包装成一个新的jQuery对象-->    <script type="text/javascript">            //获取到所有div节点的元素结果是一个dom合集对象数组合集            var div = document.getElementsByTagName('div');             //将dom节点div转化为$div的jquery对象            var $div = $(div) ;            var $first = $div.first(); //找到第一个div元素            $first.css('color', 'red'); //给第一个元素设置颜色    </script></body></html>

六、jQuery选择器

1、id选择器
通过id来获取节点
语法：

$( "#id" )

jQuery内部使用JavaScript函数document.getElementById()来处理ID的获取

注意

id唯一，每个id在页面中只能使用一次，如果多个元素分配了相同的id,将只匹配该id选择集合的第一个DOM元素。但这种行为不应该发生;有超过一个元素的页面使用相同的id是无效的

列子

效果图
这里写图片描述

<!DOCTYPE html><html><head>    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />    <title></title>    <style>    div {        width: 100px;        height: 90px;        float: left;        padding: 5px;        margin: 5px;        background-color: #EEEEEE;    }    </style>    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script></head><body>        <div id="aaron">        <p>id="aaron"</p>        <p>选中</p>    </div>    <div id="imooc">        <p>id="imooc"</p>        <p>jQuery选中</p>    </div>    <div id="imooc">        <p>id="imooc"</p>        <p>jQuery未选中</p>    </div>    <script type="text/javascript">       //通过原生方法处理        var div = document.getElementById('aaron');        div.style.border = "3px solid blue";    </script>    <script type="text/javascript">        //通过jQuery直接传入id        //id的唯一，只选择到了第一个匹配的id为imooc的div节点        $("#imooc").css("border", "18px solid red");    </script></body></html>

2、类选择器

通过类名来获取节点,相对id选择器来说效率相对要低一点。，但可以多选
同样的jQuery在实现上，对于类选择器，如果浏览器支持，jQuery使用JavaScript的原生getElementsByClassName()函数来实现的
语法

$(".class")

<!DOCTYPE html><html><head>    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />    <title></title>    <style>        div {            width: 100px;            height: 90px;            float: left;            padding: 5px;            margin: 5px;            background-color: #EEEEEE;        }    </style>    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script></head><body>        <div class="aaron">        <p>class="aaron"</p>        <p>选中</p>    </div>        <div class="aaron">        <p>class="aaron"</p>        <p>选中</p>    </div>    <div class="imooc">        <p>class="imooc"</p>        <p>jQuery选中</p>    </div>    <div class="imooc">        <p>class="imooc"</p>        <p>jQuery选中</p>    </div>    <script type="text/javascript">        //通过原生方法处理        //样式是可以多选的，所以得到的是一个合集        //需要通过循环给合集中每一个元素修改样式        var divs = document.getElementsByClassName('aaron');        for (var i = 0; i < divs.length; i++) {            divs[i].style.border = "3px solid blue";        }    </script>    <!--jQuery除了选择上的简单，而且没有再次使用循环处理-->    <script type="text/javascript">        //通过jQuery直接传入class        //class选择器可以选择多个元素        $(".imooc").css("border", "3px solid red");    </script></body></html>

这里写图片描述

阅读全文

0 0