JavaScript-17

jQuery基础

jQuery简介

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

引入jQuery

• 本地引入
• 使用CDN引入

CDN

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

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

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

jQuery引入

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('test')//JS对象
var jpobj=$(jpobj)//JQ对象

JQ对象 —> JS对象
jq对象[索引]或jq对象.get(索引)

jpobj[0]
jpobj.get(0)

入口函数

js：window.onload=函数名/匿名函数
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("test")
	})
</script>

会将所有input元素的value修改为“test”

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

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

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

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

$('option').attr("disabled","true")

$('option').attr('value' , function (i){
	return "item-" + (i+1)
})

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

<input type="button" id="btn" value="click" />
<script type="text/javascript">
	$('#btn').click(show)
	function show() {
		alert("hello")
	}
</script>

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

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

可以同时设置多个css属性

$('body').css({"background-color":"red","font-size":"14px"})

jQuery选择器

基础选择器

过滤选择器

注：由于even/odd是指偶数索引/奇数索引，因此even选取的偶数索引0、2、4、6实际为第1、3、5、7个元素