jQuery简介与整合方式

最新推荐文章于 2022-11-02 07:25:28 发布

原创最新推荐文章于 2022-11-02 07:25:28 发布 · 404 阅读

0 ·

CC 4.0 BY-SA版权

JQ 专栏收录该内容

13 篇文章

订阅专栏

jQuery简介与整合方式

一、jQuery

在JS中，我们要获取一个元素，常用的方法有document.ElementById("id值");. 而在jQuery中获取一个元素可以通过$("选择器");来实现。 JQ也称为JS类库。即对常用的方法和对象进行封装,方便我们使用。

二、整合方式

jquery和html的整合
jquery是单独的js文件
通过script标签的src属性导入即可
获取一个jquery对象
$("选择器") 或者 jQuery("选择器")
dom对象和jquery对象之间的转换
dom对象===>jquery对象
$(dom对象)
jquery对象===>dom对象
方式1:
jquery对象[index]
方式2:
jquery对象.get(index

三、代码练习

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>整合</title>
</head>
<script src="js/jquery-1.11.0.min.js"></script>
<body>
<input type="text" value="123" id="bu1" />
<input type="text" value="456" id="bu2" />
</body>
<script>
//JQ获取一个标签为$("#bu1");一般为了区别于JS，我们常习惯于var $变量名=JQ对象 ;这种方式写
var $text =$("#bu1");
alert($text+"我是JQ对象");
//JQ对象通过调用val()方法来获取对象的值
var va1=$text.val();
alert(va1+"我是通过jq对象获取的值");
//dom对面与jq对象之间的转化
//dom转JQ
var d1=document.getElementById("bu2");
var d2 = $(d1).val();
alert(d2+"我是通过dom对象转化为jq对象后调用的值");
//jq转dom 方式一
var dom1=$text.get(0); //0表示有一个标签
alert(dom1.value+"我是方式一jq对象转dom对象后调用的值");
//jq转dom 方式二
var dom2=$text[0];
alert(dom2.value+"我是方式二jq对象转dom对象后调用的值");
</script>
</html>