初识jQuery

最新推荐文章于 2021-09-18 17:29:17 发布

Ccccc_ya

最新推荐文章于 2021-09-18 17:29:17 发布

阅读量329

点赞数

文章标签： jQuery

本文链接：https://blog.csdn.net/weixin_41435591/article/details/80375226

版权

emmm 作为一个小白才接触jQuery不久下面是我的自学笔记。

3.jQuery语法

$(selector).action()

4.jQuery推荐写法

$(function () {

// body…

});

5.jQuery冲突问题

当jQuery的$与别的框架中$相冲突时，

（1）释放jQuery的使用权,注意：释放操作必须在编写其他jQuery之前编写，释放后不能再使用$，改为使用jQuery

jQuery.noConflict();

jQuery(function () {

alert("heljo");

});

（2）自定义一个访问符号

var cc = jQuery.noConflict();

cc(function () {

alert("heljo");

});

7.jQuery核心函数

<body>
    <script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script>
    <script type="text/javascript">
        //$():就代表调用jQuery的核心函数
	//1.接收一个函数，如入口函数
            $(function () {
		alert("hello cc");
		//2.接收一个字符串
		//2.1接收一个字符串选择器，返回一个jQuery对象，对象中保存了找到的DOM元素
		var $box1 = $(".box1");
		var $box2 = $("#box2");
		console.log($box1);
		console.log($box2);

		//2.2接收一个代码片段，返回一个jQuery对象，对象中保存了创建的DOM元素
		var $p = $("<p>我是段落</p>");
		console.log($p);

		//2.3接收一个DOM元素,会被包装成一个jQuery对象返回给我们
		var span = document.getElementsByTagName('span')[0];
		var $span = $(span);
		console.log($span);
	    });	
	</script>
	<div class="box1"></div>
	<div id="box2"></div>
	<span>我是span</span>
</body>

8.jQuery对象

/*
    1.什么是jQuery对象
    jQuery对象是一个伪数组

    2.什么是伪数组
    有0到length-1的属性，并且有length属性
*/

jQuery.fn.init(3) 0:div 1:div 2:div context:document length:3 prevObject:jQuery.fn.init [document, context: document] selector:"div" __proto__:Object(0)

9.静态方法和实例方法

<body>
	<script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script>
	<script type="text/javascript">
		//1.定义一个类
		function AClass() {
		}

		//2.给这个类添加一个静态方法（直接添加给类的就是静态方法），静态方法通过类名来调用
		AClass.staticMethod = function(){
			alert("staticMethod");
		}
		AClass.staticMethod();

		//3.给这个类添加一个实例方法，实例方法通过类的实例调用
		AClass.prototype.instanceMethod = function () {
			alert("instanceMethod");
		}
		//创建一个实例（创建一个对象）
		var a = new AClass();
		//通过实例调用实例方法
		a.instanceMethod();
	</script>
</body>

10.jQuery-each方法

var arr = [1, 3, 5, 7, 9];
var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};
// 利用原生js的foeEach方法遍历数组
// 	第一个参数：遍历到的元素
// 	第二个参数：当前遍历到的索引
// 	注意点：
// 	原生js的forEach方法只能遍历数组，不能遍历伪数组
		 
arr.forEach(function (value, index) {
	console.log(index, value);
})

// 利用jQuery的each静态方法遍历数组	
// 	第一个参数：当前遍历到的索引
// 	第二个参数：遍历到的元素
// 	注意点：
// 	jQuery的each方法是可以遍历伪数组的
		 
$.each(arr, function(index, value) {
	console.log(index, value);
});
$.each(obj, function(index, value) {
	console.log(index, value);
});