小柒心得jQuery入门(一)-CSDN博客

本文链接：https://blog.csdn.net/weixin_43784163/article/details/109022575

jQuery讲解及用法

在传统的获取对象方式中，我们使用js的DOM对象进行获取html元素的对象
例如：通过id获取html对象

var obj = document.getElementById(id值)

我们发现上述代码仅仅获取一个对象代码就要写很长，使用起来不是很方便
优化方案：以后每次调用getId函数即可

<script TYPE="text/javascript">
    function getId(id) {
        var obj = document.getElementById(id值)
    }
</script>

jQuery就是对js常用操作的封装,们我来看一下具体怎么用

jQuery的概念及作用

jQuery是一套跨浏览器的JavaScript库，简化HTML与JavaScript之间的操作。它是轻量级的js库。兼用CSS3，还兼容各种浏览器，jQuery2.0及以后续版本不在支持IE6/7/8浏览器。jQuery使用户能方便地处理HTML documents 、events、实现动画效果，并且方便地为网站提供AJAX交互。

jQuery版本解析

在这里插入图片描述
因为2.0以后的版本不在支持ie6.7.8版本，所以我们用1.11.3版本来讲解。

jQuery的语法

在使用JQuery之前需要把JQuery文件导入到项目中，并且引入当前页面

<scripttype="text/javascript"src="路径" ></script>

JQuery的语法：
$(“选择器”):选择器后续讲解

jQuery基本选择器

jQuery也有和CSS一样，也有选择器概念，即 选择性获取某些标签对象
jQuery有大量复杂选择器，这里先介绍三个基本选择器。

ID选择器 $(“#id”)
元素选择器 $(“元素名”)
类选择器 $(“.类名”)

好了我们上代码：

$(function(){
				//$(funtion(){});为页面加载完成时，获取对应的标签对象
				//获取id为p的标签对象
				alert($("#p").val());
				//获取标签名为input的标签对象
				var vl = $("input");
                for (var i=0;i<vl.length;i++) {
				    alert(vl[i].value); //v[i]是js对象
                }
				//获取class属性值为java的标签对象
                alert($(".java").length)
			});

<body>
    <input type="radio" name="hobby" value="python" id="p"/>
    <input type="radio" name="hobby" value="java" class="j"/>
	<input type="radio" name="hobby" value="c++" class="c"/>
</body>

jQuery使用

不知道大家发现没有，上面function中的 vl[i].val()是获取不到input元素内容的，而vl[i].value却可以获取到，下面我们来说一下什么是js对象什么是jQuery对象。

jq对象只能调用jq中的属性和方法，不能调用js对象中的属性和方法
js对象只能调用js中的属性和方法，不能调用jq对象中的属性和方法

但是：
实际开发中，经常会涉及到这两种对象的混用，需要学习jQuery对象和JS对象的互转。

开发中，为了使用JS方法和属性，我们也会选择将jQuery对象转回JS对象。
- 格式：var js对象 = jq对象[0]; 或 var js对象 = jq对象.get(0);

Jq对象，本质：是一个js数组

开发中，我们为了方便开发，会将JS对象转为jQuery对象使用；
- 格式：var jq对象 = $(js对象)

代码：

$(function(){
				//$(funtion(){});为页面加载完成时，获取对应的标签对象
				//jq对象
				var jq1 = $("#p");
				alert(jq1.val())   //可以执行
				//alert(jq1.value); 不能执行
				//jq对象转成js对象
				var js = jq1[0];
				alert(js.value); //行
				//alert(js.val()); //不行
				//js对象转成jq对象
				var jq2 = $(js);
				alert(jq2.val()); //行
			});

<body>
    <input type="radio" name="hobby" value="python" id="p"/>
</body>

下回分享一些小动画的实现，点关注不迷路哦。