JQuery学习笔记

最新推荐文章于 2022-09-16 14:43:31 发布

小黄鸭and小黑鸭

最新推荐文章于 2022-09-16 14:43:31 发布

阅读量270

点赞数 1

分类专栏：编程文章标签： jquery

本文链接：https://blog.csdn.net/qq_29721419/article/details/51174591

版权

编程专栏收录该内容

18 篇文章 1 订阅

订阅专栏

一、jqery简介

jQuery是封装了很多预定义的js对象和函数的JS库。

第一步，首先要导入jQuery的js文件：

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>

只需要在html文件中添加代码就可以了

第二步，是给组件添加选择器，下面是个小例子，弹出hello world

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
//$(function(){}相当于window.onload，代码写在{}之间
$(function(){
//1.选取button
//2.为button添加onclick响应函数
$("button").click(function(){
//3.弹出helloworld
alert("Hello World!");
});
});
</script>
</head>
<body>
<Button>ClickMe</Button>
</body>

二、jQuery对象

jQuery对象是通过$()包装DOM对象后产生的对象

jQuery对象可以调用jQuery里的方法，如：$("#person").html();（通过id包装对象调用方法）

jQuery对象不能使用DOM中的任何方法，同样DOM也不能使用jQuery中的任何方法

如何获取jQuery对象呢？

在变量前加“$”

var $variable=jQuery对象

var variable=DOM对象

如何转换呢？

jQuery对象转换成DOM对象

1.jQuery对象是一个数组对象，可以通过[index]的方法得到对应的DOM对象

var $or=$("#or");

var or=$or(0);

2.使用jQuery中的get(Index)方法获得DOM对象

var $or=$("#or");

var or=$or.get(0);

DOM对象转换成jQuery对象

只需要用$()包装一下就可以了

下面是用来理解两个对象之间的关系的代码：

$(function(){
//1.选取button
//2.为button添加onclick响应函数
$("button").click(function(){
//3.弹出helloworld
alert("Hello World!");
alert($(this).text());
//jQuery对象跟DOM对象
//1.获取一个jQuery对象
var $btn=$("button");
//2.jQuery对象是一个数组对象
alert($btn.length);
//3.通过下标转换为DOM对象
alert($btn[1].firstChild.nodeValue);
//4.DOM转换为jquery对象
var button=document.getElementById("btn");
alert("----"+$(button).text());
});
});

三、jQuery选择器

方便、但不会报错

小黄鸭and小黑鸭

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JQuery学习笔记

一、jqery简介jQuery是封装了很多预定义的js对象和函数的JS库。第一步，首先要导入jQuery的js文件：只需要在html文件中添加代码就可以了第二步，是给组件添加选择器，下面是个小例子，弹出hello world//$(function(){}相当于window.onload，代码写在{}之间$(function(){//1.选取bu
复制链接

扫一扫