jQuery核心函数+选择器

Silence/

已于 2022-04-06 08:35:48 修改

阅读量982

点赞数

文章标签： jquery

于 2022-04-03 14:12:17 首次发布

本文链接：https://blog.csdn.net/lurance_/article/details/123889770

版权

本文详细介绍了jQuery的核心函数，包括页面加载、选择元素、DOM对象与jQuery对象的转换等，并探讨了jQuery选择器的重要性，如基本选择器、层次选择器、过滤选择器等，以及DOM属性和样式操作。jQuery旨在简化JavaScript开发，提高效率，同时处理浏览器兼容性问题。

摘要由CSDN通过智能技术生成

框架：提高开发效率（减少代码量），性能降低

jQuery:是一个脚本框架，是一个快速、简洁的JavaScript框架；

设计宗旨是“write Less,Do More”（链式编程）obj.m1().m2().m3()......

Js:提供丰富的页面效果===>人机交互富客户端技术

jQuery主要目的：操作html、css

jQuery只是一个JavaScript框架，他的功能没有JavaScript强大，以后的开发中，如果jQuery不能满足需求，那么需要退到JavaScript操作【jQuery提供了与DOM之间的转化】。如果JavaScript也不能满足需求，就说明脚本解决不了此问题。

jQuery提高开发效率，可以屏蔽底层浏览器的差异（版本）问题。

1、核心函数：是 jQuery 的基础语法，也是 jQuery 提供其它功能的平台

页面onload 函数：jQuery(callback)

查找指定对象：jQuery(expression, [context])

Dom 对象转换 jQuery对象：jQuery(elements)

html 转换 jQuery对象：jQuery(html, [ownerDocument])

jQuery() 可以直接使用 $() 取代：

	//页面加载完毕后 执行，三个代码没有任何区别，进行了简写
	jQuery(document).ready(function () {
	    alert("111");
	});
	//jQuery简写成$
	$(document).ready(function () {
	    alert("222");
	});
	//再继续简化
	$(function () {
	    alert("3333");
	});

jQuery对象无法使用 DOM对象属性方法，DOM对象也无法使用 jQuery对象属性方法

	<script>
	    //DOM操作，DOM对象无法使用jQuery对象属性方法.html("")
	    function clickDIV() {
	        document.getElementById("mydiv").innerHTML="您好！";
	        // $("#mydiv").innerHTML="您好！";
	    }
	    //jQuery操作，jQuery对象无法适用DOM对象属性方法.innerHTML=""
	    function clickDIV2() {
	        $("#mydiv").html("您好1！");
	        // document.getElementById("mydiv").html("您好1！")
	    }
	</script>

对象互换：

DOM 对象转换为 jQuery对象：

只需要用$()将 DOM对象包装起来，就可以获得 jQuery对象 --- $(DOM对象)

var variable = document.getElementById(“mydiv”); // DOM对象

var $variable = $(variable); // jQuery对象

jQuery 对象转换为 DOM对象：

通过两种方式转换 [index] 和 get(index)

$variable = $(“#mydiv”); // jQuery对象

方式一：var variable = $variable[0]; // DO