jquery引入json jquery引入方法

文章目录

• 引入jQuery文件
• jQuery 入口函数
• 常用的API
• 隐式迭代
• jQuery 里面的排他思想

引入jQuery文件

方式一：本地引用
通过访问jQuery官方网站：https://jquery.com/
即可下载jQuery的最新版本。点击下载图标就能够跳转到详情页。
可以通过下载到本地的方式引用

<script src="jQuery路径"></script>
<script>
	//jquery代码块
</script>

提示：由于页面从上到下加载，请确保jQuery代码块在jQuery库前完成加载。

方式二：在线引用
也可以通过src书写网址引用在线的的jquery：

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
	//jquery代码块
</script>

jQuery 入口函数

$ (function () {    
	··· // 页面 DOM 元素加载完成的入口
})
$ (document).ready(function () {    
	···  // 页面 DOM 加载完成的入口
})

实例解析：
$ 符号是jQuery的别称，虽然我们能够使用jQuery来替代，但是明显的，相比较而言直接使用 $ 符号更加方便。$ 符号也是jQuery的顶级对象，即js中的window，将元素包装成jQuery对象就能够调用jQuery方法了。
提示：原生js获取的对象是dom对象，使用原生的js属性与方法。jQuery获取的元素是jQuery对象，只能使用jQuery方法。但是两者能够互相转换。

<div></div>
<script>
    // DOM 对象
    var div = document.querySelector("div");
	$(div);  // 转换成 jQuery 对象
	// jQuery 对象
	$("div");
	$("div")[0];  // 转换成 DOM 对象
</script>

jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本专栏接下来的章节，各位读者将学习更多有关选择器的语法。

常用的API

名称	用法	描述
ID 选择器	$(“#id”);	获取指定 ID 的元素
全选选择器	$(“*”);	匹配所有元素
类选择器	$(“.class”);	获取同一类 class 的元素
标签选择器	$(“div”);	获取同一标签所有元素
并集选择器	$(“div, p, li”);	选取多个元素
交集选择器	$(“li.current”);	交集选择器
子代选择器	$(“ul>li”);	使用 > 号，获取子级的元素
后代选择器	$(“ul li”);	使用空格，代表后代选择器，包括子级、孙级等

隐式迭代

遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代
简而言之就是说，给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们在进行循环，简化我们的操作，方便我们调用。

jQuery 里面的排他思想

想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式：

$(function () {    
	// 隐式迭代，给所有的按钮都绑定了点击事件    	
	$("li").click(function () {        
	// 当前的元素样式改变        
		$(this).css("background", "pink");        
		// 其余兄弟去掉背景颜色     
		$(this).siblings("li").css("background", "");    
	});
});