JQuery学习（一）-JQuery入门

最新推荐文章于 2019-06-08 16:27:28 发布

zhang___gang

最新推荐文章于 2019-06-08 16:27:28 发布

阅读量548

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/zhang___gang/article/details/85654695

版权

JQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

什么是jQuery

jQuery在2006年1月由美国人John Resig在纽约的barcamp发布
jQuery是一个兼容多浏览器的JavaScript框架，核心理念是write less,do more（写得更少，做得跟多）。
jQuery是免费的、开源的。jQuery的语法设计可以使开发者更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外，jQuery提供Api让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态页面。

jQuery的特点

轻量级
强大的选择器
出色的DOM封装
可靠的事件处理机制
完善的Ajax
出色的浏览器兼容性
丰富的插件支持
完善的文档

jQuery环境配置

可以通过官网下载http://jquery.com/download/获取最新的jQuery库
上面的下载链接通过了很多的版本和类型的jQuery库,每个版本都提供两种类型的库，以.js结尾的是完整无压缩版本，只用于测试、学习、开发；以.main.js结尾的是经过JSMin等工具压缩后的版本，体积最小的版本，主要应用于产品和项目。

jQuery的引入

一般我们都在标签内引入jQuery库

<head>
	<script src="scripts/jQuery-3.3.1.js" type="text/javascript"></script>
</head>

认识jQuery

编写简单的jQuery

jQuery(document).ready(function () {
	alert("welcome!");
});
//类似于JavaScript中的window.onload方法。

可以使用简写，使用 $替换 j Q u e r y ，在 j Q u e r y 库中$ 是jQuery的简写

//简写1：jQuery可用$替代
/*$(document).ready(function () {
	alert("welcome!");
});*/

//简写2：把(document).ready省略，等价写法
$(function () {
//所有的代码写在这个匿名函数中，不会因为加载顺序问题导致找不到元素
	alert("welcome!");
});

jQuery对象和DOM对象

jQuery对象是通过jQuery包装DOM对象后产生的对象。jQuery对象是对立的，它只能访问它特有的方法，不能使用DOM对象中的任何方法

 $("#foo").html();
 //等价
 document.getElementById("#foo").innerHTML;

jQuery对象和DOM对象转换

jQuery提供了两种方法将jQuery对象转换成DOM对象，即[index]或get(index)。通过$(DOM对象）可以直接把DOM对象转换成jQuery对象

var $cr=$("#cr");  //jQuery对象
var cr = $cr[0]; 
//或者
var cr = $cr.get(0);   //DOM对象
alert(cr.checked); //检测这个checkbox是否被选中

var cr = document.getElementById("cr"); //DOM对象
var $cr = $(cr);  //jQuery对象
alert($cr.is(':checked'));

总结：jQuery对象是一个数组对象，可以通过[index]或get(index)得到DOM对象。平时使用的jQuery对象都是通过 $() 函数制造出来的，所以我们可以认为$ ()函数就是一个jQuery对象的制造工厂。

示例程序

<!--jQuery入门测试-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <!--引入jQuery，一定要写结束标签-->
    <script src="scripts/jQuery-3.3.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        //里面可以写js，jQuery
        //文档加载后，执行匿名函数
        /*jQuery(document).ready(function () {
            alert("welcome!");
        });*/

        //简写1：jQuery可用$替代
        /*$(document).ready(function () {
            alert("welcome!");
        });*/

        //简写2：把(document).ready省略，等价写法
        $(function () {
            //所有的代码写在这个匿名函数中，不会因为加载顺序问题导致找不到元素
            //整个文档加载完后再执行
            alert("welcome!");


            //jQuery对象和js对象的转换
            //jQUery获取元素：
            var $ul = $("#fruit");
            alert($ul.html());

            //js获取元素
            var ul = document.getElementById("fruit");
            alert(ul.innerHTML);

            //jQuery对象是一个数组型对象，只能用就jQuery的方法
            //jQuery对象和JS对象是可以相互转换的
            var $li = $("li"); //得到jQuery对象
            alert($li.text());
            var liArray = document.getElementsByTagName("li"); //得到js对象数组
            alert(liArray[0].innerText);

            //===========================================================
            //jQuery对象和JS对象是可以相互转换的
            //jQuery对象-->JS对象
            //jQuery对象[index] 或者 jQuery对象.get(index)
            var li1 = $li[0];
            alert(li1.innerHTML);

            //JS对象-->jQuery对象   $(js对象)
            var $li1 = $(liArray[0]);
            alert($li1.html());
        });

    </script>
</head>
<body>
    我喜欢的水果
    <ul id="fruit">
        <li>苹果</li>
        <li>桃子</li>
        <li>西瓜</li>
    </ul>
</body>
</html>

zhang___gang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery学习（一）-JQuery入门

什么是jQueryjQuery在2006年1月由美国人John Resig在纽约的barcamp发布jQuery是一个兼容多浏览器的JavaScript框架，核心理念是write less,do more（写得更少，做得跟多）。jQuery是免费的、开源的。jQuery的语法设计可以使开发者更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以...
复制链接

扫一扫

专栏目录