JS学习笔记第十六期--（jQuery基础）

jQuery基础

jQuery介绍

jQuery是一个快速、简洁的JavaScript框架，它封装了JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互等

CDN

CDN（Content Delivery Network），即内容分发网络，依靠部署在各地的边缘服务器，通过中心平台进行内容分发，使用户就近获取所需资源，提高用户的访问速度

使用CDN和不使用CDN的区别：

不使用CDN，用户直接请求服务器获取资源，若地域距离较远，则访问速度相对减慢

使用CDN，通过CDN向用户分发内容，用户直接从最近的服务器获取资源，访问速度较快

jQuery引入

<script src="jquery.js"></script>

引入方式分为本地引入和使用CDN引入

jQuery版本

1.x：兼容所有浏览器，使用最为广泛
2.x：不兼容IE6/7/8，很少使用
3.x：不兼容IE6/7/8, 最新版，功能更多，但很多jQuery插件不兼容新版
*根据具体需求选择， 一般选择1.8.2版本或3.4.1版本

开发版本/生产版本

jquery.js（开发版本）：完整未压缩，文件比较大，一般用于阅读学习源码或修改源码，项目开发时使用
jquery.min.js（生产版本）：经过编译压缩，功能与完整版一样，但体积小、传输效率快，项目上线时使用

CDN

国内：https://www.bootcdn.cn/
国外：https://cdnjs.com/

jQuery对象

jQuery对象可以使用jQuery的附加功能，在操作时更加方便
jQuery对象与js对象方法不通用
两者可以相互转换

JS对象→JQ对象

格式：$(js对象)

var jsObj = document.getElementByID("text")//js对象
var jqObj = $(jsObj)//jq对象

JQ对象→JS对象

格式：jq对象[索引]或jq对象.get(索引)

jqObj[0]
jqObj.get(0)

入口函数

js：window.οnlοad=函数名/匿名函数

jq：$(document).ready(函数名/匿名函数)
简写：$().ready(函数名/匿名函数)
简写：$(函数名/匿名函数)

区别

window.onload 只能绑定一个函数，且必须等待网页中所有内容加载完毕
$(document).ready() 可以绑定多个函数，当DOM结构加载完毕就执行

$(window).load()执行时机与window.onload相同

jQuery基本使用

jQuery 使用 CSS 选择器来选取 HTML 元素。
格式：$(‘CSS选择表达式’)
表达式需加引号
返回的是单个元素或元素组

jQuery 基本方法text()、html()、val()

对应innerText、innerHTML、value
获取：括号内不加参数
修改：括号内加参数
若jQuery对象为元素组，则修改该对象对所有元素

示例：

<input type="text" />
<input type="text" />
<input type="text" />
<script type = "text/javascript">
$(function(){
	$('input').val("text")
})
</script>

以上代码会将所有Input元素的value修改为"text"

text()、html()、val()等方法可以使用回调函数快速完成遍历

$('option').text(callBack)
function callBack(i,oldValue){
//i为遍历的索引值
//oldValue为原值
return 新值
}

$('option').text(function(i){
return i+1
})

attr()可获取、修改元素的属性

基本事件绑定，可使用.click()、.mouseover()等方法

<input type="button" id="btn" value="click me" />
<scrip type="text/javascript">
	$("#btn").click(show)

	function show(){
		alert("hello world")
	}
</script>

css()方法可以修改元素样式

$('body').css("background-color","red")

同时也可以设置多个css属性

$('p').css({"color":"yello","font-size","40px"})

jQuery选择器

基础选择器：

过滤选择器：