jQuery是一个优秀的JavaScript库, 它兼容CSS3, jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等.jQuery能够使html页面保持代码和html内容分离, 也就是说不用在html里面插入一堆JavaScript来调用命令了, 只需定义id即可.
jQuery
- 版本
- jQuery1.x
- jQuery2.x 不再支持IE6,7,8
- min版本是对应版本的压缩版, 大小更小, 加载速度快, 一般线上环境使用.
- 作用
- 大大简化的JS的代码编码
- 将页面和JS分离
- 链式编程
- 导入jQuery
- 将jquery-xx.js导入到项目中, 使用
<script src="jquery-xx.js"></script>
- 将jquery-xx.js导入到项目中, 使用
- jQuery使用注意
- jQuery可以使用简写 $
- 使用JS写的代码只能调用JS中的属性和方法.
- 使用jQuery写的代码只能调用jQuery中的属性和方法.
- JQ和DOM对象可以相互转换
- DOM对象—>jQuery对象
var s1 = document.getElementById(“s1”);
// 将JS对象转成JQuery的对象
jQuery(s1).html(“Hello 王超杰”);
//jQuery 也可以使用简写 $
$(s1).html(“Hello 王超杰”); - jQuery对象—>DOM对象
// 将JQ的对象转成JS的对象。
// $(“#s1”)[0].innerHTML=”Hello 王守义”;
// $(“#s1”).get(0).innerHTML = “Hello 王守义”;
- DOM对象—>jQuery对象
jQuery中的选择器
- 基本选择器
- 通过id值
- 如:$(“#id值”);
- 通过元素名称
- 如:$(“div”);
- 通过class
- 如:$(“.class名”);
- 通配符*, 获取所有元素
- 如:$(“*”)
- 多个选择器一起
- 如:$(“div,span,p.myClass”)
- 通过id值
- 层次选择器
- 后代选择器
- 如:$(“父选择器 子选择器”)
- 子选择器
- 如:$(“父选择器>子选择器”)
- 匹配所有紧接在 prev 元素后的 next 元素
- 如:$(“父选择器 + 子选择器”)
- 匹配 prev 元素之后的所有 siblings 元素
- 如:$(“父选择器 ~ 子选择器”)
- 后代选择器
- 基本过滤选择器
- 获取匹配的第一个元素:first
- 如: $(‘li:first’);
- 获取最后个元素:last
- 如: $(‘li:last’)
- 去除所有与给定选择器匹配的元素
- 如: $(“input:not(:checked)”) input标签中checked标签
- 匹配所有索引值为偶数的元素,从 0 开始计数:even
- 如: $(“tr:even”) 获取偶数行
- 匹配所有索引值为奇数的元素,从 0 开始计数:odd
- 如:$(“tr:odd”) 获取奇数行
- 匹配索引位置的元素:eq
- 如:$(‘tr:eq(index)’) tr里面索引等于index的元素
- 匹配大于索引位置的元素:gt()
- 如:$(‘tr:gt(index)’) tr里面索引大于index的元素
- 匹配小于索引位置的元素:lt()
- 如:$(‘tr:lt(index)’) tr里面索引小于index的元素
- 获取匹配的第一个元素:first
- 内容过滤器
- 包含指定选择器的元素:has()
- 如:$(“tr:has(‘.name’”) tr里面包含class为name的元素
- 包含指定选择器的元素:has()
- 可见性过滤器
- 获取隐藏的元素, 一般指display为none, 和input type=’hidden’两种情况:hidden
- 如: $(“div:hidden”) 所有隐藏的div
- 获取可见的元素:visible
- 如: $(“div:visible”) 所有隐藏的div
- 获取隐藏的元素, 一般指display为none, 和input type=’hidden’两种情况:hidden
- 表单选择过滤器
- 对于单选框和多选框 获取选择的元素:selected
- 对于下拉选 获取选中的元素:checked
- 属性过滤器
- [属性名]
- 如:$(“div[title]”) div中包含属性为title的元素
- [属性名=值]
- 如:$(“div[title=’小兵张嘎’]”) div中包含属性为title, 值为’小兵张嘎’的元素
- [属性名]
- 表单过滤器
- 获取表单的子标签(包含input、textArea、select、button) :input
- 如: $(“form :input”)
- 获取表单的子标签(包含input、textArea、select、button) :input
- 基本选择器
jQuery获取元素
- $(“选择器”)或jQuery(“选择器”)
- 当返回值有多个时 通过[index]或者get(index)获取元素
- 页面加载完成之后onload事件写法.
- JavaScript写法
window.onload = function() {
//code
}
//该方法在一个页面中只能出现一次, 出现多次只会执行一次 - jQuery的写法, 可以有多个, 都会执行
- 方式1
$(document).ready(function() {//code});
- 方式2, 其实是对方式1的简写
$(function(){//code});
- 方式1
- JavaScript写法
- jQuery事件
- jQuery里面的事件是DOM事件名去掉前面的on即可, 而且是链式编程.
- jQuery效果
- show(); –显示某个元素
- 参数
- 毫秒值, 持续事件
- function 完成后的执行的函数
- 切换效果默认是: “swing”,可用参数”linear”
- 参数
- hide(); –隐藏某个元素
- slideDown(); –向下滑动
- slideUp(); –向上滑动
- fadeOut(); –淡出
- fadeIn(); –淡入
- animate(); –自定义动画
- toggle(); –单击事件的切换
- 可以在show()、hide()之间切换
- slideToggle(); –单击事件的切换
- 可以在slideDown()、slideUp()之间切换
- fadeToggle(); –单击事件的切换
- 可以在fadeIn()、fadeOut()之间切换
- show(); –显示某个元素
- jQuery修改属性
- 使用attr设置/修改属性
- attr(“属性名”) 获取属性值
- attr(“属性名”, “value”) 设置一个属性值
- attr({“属性1”:”value1”, “属性2”:”value2”})设置多个属性
- removeAttr(“属性名”) 移除指定属性
- 使用addClass(“class值”)和removeClass(“class值”)来添加和移除指定值
- jQuery1.6版本以后使用prop()和removeProp()方法类设置/修改移除有的属性, 如attr无法获取checked属性值
- 使用attr设置/修改属性
- jQuery修改CSS, 1.8以后版本才有这个函数, 实际会添加内联style属性
- $(“选择器”).css(“key”,”value”); 设置/修改一个css属性
- (“选择器”).css({“key1”:”value1”, “key2”:”value2”}); 设置/修改多个css属性
- jQuery遍历数组
- 数组名.each(function() {//code});
- $.each(数组名, function() {//code});
- jQuery的html()方法、text()方法和val()方法
- html() 设置和获取html标签体内容
- text() 设置和获取html标签体内容
- val() 设置和获取html标签体value值
- 创建一个元素 $(““)
- jQuery的文档操作
- 内部插入
- a.append(c) 将c插入到a内部标签体的后面
- a.prepend(c) 将c插入到a内部标签体的前面
- a.appendTo(c) 将a插入到c内部标签体的后面
- a.prependTo(c) 将a插入到c内部标签体的前面
- 外部插入
- a.after(c) 将c插入到a的后面
- a.before(c) 将c插入到a的前面
- a.insertAfter(c) 将a插入到c的后面
- a.insertBefore(c) 将a插入到c的前面
- 删除
- empty() 清空元素
- remove() 删除元素
- 内部插入