jQuery入门
jQuery介绍
- jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
- jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript编程。它的宗旨就是:“Write less, do more.“
jQuery优势
- 一款轻量级的JS框架。jQuery核心js文件才几十kb,不会影响页面加载速度。
- 丰富的DOM选择器,jQuery的选择器用起来很方便,比如要找到某个DOM对象的相邻元素,JS可能要写好几行代码,而jQuery一行代码就搞定了,再比如要将一个表格的隔行变色,jQuery也是一行代码搞定。
- 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里,更加简洁。
- 事件、样式、动画支持。jQuery还简化了js操作css的代码,并且代码的可读性也比js要强。
- Ajax操作支持。jQuery简化了AJAX操作,后端只需返回一个JSON格式的字符串就能完成与前端的通信。
- 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器,不用再为浏览器的兼容问题而伤透脑筋。
- 插件扩展开发。jQuery有着丰富的第三方的插件,例如:树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件,并且用jQuery插件做出来的效果很炫,并且可以根据自己需要去改写和封装插件,简单实用。
jQuery内容
- 选择器
- 筛选器
- 样式操作
- 文本操作
- 属性操作
- 文档处理
- 事件
- 动画效果
- 插件
- each、data、Ajax
jQuery引用
本地文件
<script src="jquery-3.2.1.min.js"></script> <script>按照jQuery的规则写代码</script>
CDN方式
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script>按照jQuery的规则写代码</script>
jQuery对象
可以理解为jQuery是一个类,jQuery对象就是通过jQuery包装DOM对象后产生的对象。
jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象,那么它只能使用jQuery里的方法,不能使用DOM对象的方法.
$其实就是jQuery的简写,比如$("#i1")===jQuery("#i1")
通常我们在声明一个jQuery对象变量的时候在变量名前面加上$,使我们能更明显的分辨这个变量是一个jQuery对象还是一个DOM对象
jQuery基础语法
$(selector).action()
选择器
基础选择器
$("#id") // ID选择器 $("tagname") // 标签选择器 $(".className") // class选择器 $("*") // 所有元素选择器 $("#id,.className,tagname") //组合选择器
层级选择器
$("x y") // x所有的后代y $("x>y") // x所有的儿子y $("x+y") // 所有紧挨在x后面的y(同级) $("x~y") //x后面的所有y(同级)
属性选择器
[attribute]//含有属性 [attribute=value]// 属性等于 [attribute!=value]// 属性不等于 //示例 <input type="text"> <input type="password"> <input type="checkbox"> $("input[type='checkbox']");// 取到checkbox类型的input标签 $("input[type!='text']");// 取到类型不是text的input标签
基本筛选器(与其他元素一起使用,不能直接使用)
:first //获取匹配的第一个元素 , 返回值:jQuery :last //获取匹配的最后个元素 , 返回值:jQuery :eq(index) //匹配一个给定索引值的元素 , 返回值:Array<Element> :even //匹配所有索引值为偶数的元素,从 0 开始计数 , 返回值:Array<Element(s)> :odd //匹配所有索引值为奇数的元素,从 0 开始计数 , 返回值:Array<Element(s)> :gt(index) //匹配所有大于给定索引值的元素 , 返回值:Array<Element(s)> :lt(index) // 匹配所有小于给定索引值的元素 , 返回值:Array<Element(s)> :not(选择器) //去除所有与给定选择器匹配的元素 , 返回值Array<Element(s)> :has(选择器) //匹配含有选择器所匹配的元素的元素 , 返回值:Array<Element(s)>
示例
$("p:first")//选择第一个 <p> 元素:
表单常用筛选(可以直接使用)
:input //查找所有的input元素,包括input,select,textarea,button :text//查找所有文本框, :password//查找所有密码框 :file//查找所有文件域 :radio//查找所有单选按钮 :checkbox//查找所有复选框 :submit//查找所有提交按钮 :reset//查找所有重置按钮 :button//查找所有普通按钮.
示例
$(":checkbox")//查找所有的复选框
表单对象属性
:enabled//查找所有可用的input元素,即不带有disabled属性的input元素. :disabled//查找所有不可用的input元素,即带有disabled属性的input元素. :checked//匹配所有选中的被选中元素(复选框、单选框等,select中的option),
对于select元素来说,获取选中推荐使用 :selected :selected//匹配所有选中的option元素
筛选器方法
同级
$("#id").siblings();
同级向下
$("#id").next()//下一个
$("#id").next("条件")//下一个满足条件的 $("#id").nextAll()//下面全部 $("#id").nextUntil("#i2")//下面全部直至遇见符合条件的结束,不包含符合条件的
同级向上
$("#id").prev()//上面一个 $("#id").prevAll()//上面全部 $("#id").prevUntil("#i2")//上面直至遇到满足条件的,不包含满足条件的那个 //向上查找全部得到的数组元素的顺序是从下往上拍的
父辈元素
$("#id").parent()//父元素 $("#id").parents() // 查找当前元素的所有的父辈元素 $("#id").parentsUntil() // 查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止。
儿子们
$("#id").children();
补充
.first()// 获取匹配的第一个元素 .last()// 获取匹配的最后一个元素 .not()// 从匹配元素的集合中删除与指定表达式匹配的元素 .has()// 保留包含特定后代的元素,去掉那些不含有指定后代的元素。 // 推荐使用这个,而不是:first这类
样式操作
样式类
addClass("类"); // 添加指定的CSS类名 removeClass("类"); // 移除指定的CSS类名 hasClass("类"); // 判断类存不存在 toggleClass("类"); // 有移除,没有添加
CSS
css("color","red")//css方法的两个参数一个属性,一个值
位置
offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置 position()// 获取匹配元素相对父元素的偏移 scrollTop()// 获取匹配元素相对滚动条顶部的偏移 scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
offset 获取相对当前窗口的偏移 {top: xx, left: xxx}
position 相当于已经定位父标签的偏移 {top:xx, left:xx}
offset({top: xx,left:xx}) --> 可以设置标签相对当前窗口的偏移
尺寸
height()//内容高度 width()//内容宽度 innerHeight()//内容+内填充高度 innerWidth()//内容+内填充宽度 outerHeight()//内容+内填充+变框高度 outerWidth()//内容+内填充+变框宽度
文本操作
HTML代码
html()// 取得第一个匹配元素的html内容 html(val)// 设置所有匹配元素的html内容
文本
text()// 取得所有匹配元素的内容 text(val)// 设置所有匹配元素的内容
value值
为select或者input多选设置值可以更改选中的目标,该值必须是目标的value值
常用与select,input的选择框常用属性
//val() 方法返回或设置被选元素的值。 //元素的值是通过 value 属性设置的。该方法大多用于 input 元素。 //如果该方法未设置参数,则返回被选元素的当前值。 val()// 取得第一个匹配元素的当前值 val(val)// 设置所有匹配元素的值 val([val1, val2])// 设置checkbox、select的值
属性操作
attr() 方法设置或返回第一个被选元素的属性值。常用于自定义属性
$(selector).attr(attribute)//规定要获取其值的属性。 $(selector).attr(attribute,value)//设置被选元素的属性和值。 $(selector).attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值 removeAttr()// 从每一个匹配的元素中删除一个属性
prop()与attr()类似,不过prop()在处理没有值得属性上更好用,常用与checkbox和radio
prop() // 获取属性 removeProp() // 移除属性
举例说明不同
//HTML中有以下两行内容 <input id="chk1" type="checkbox" />是否可见 <input id="chk2" type="checkbox" checked="checked" />是否可见 //使用prop $("#chk1").prop("checked") // false $("#chk2").prop("checked") // true //使用attr $("#chk1").attr("checked") // undefined $("#chk2").attr("checked") // "checked"
文档处理
jQuerey无法创建节点,需使用 javascript 来创建
追加到一个父标签内
$(A).append(B)//把B追加到A $(A).append(B)//把A追加到B
插入到一个父标签开始
$(A).prepend(B)// 把B前置到A $(A).prependTo(B)// 把A前置到B
添加一个弟弟
$(A).after(B)// 把B放到A的后面 $(A).insertAfter(B)// 把A放到B的后面
添加一个哥哥
$(A).before(B)// 把B放到A的前面 $(A).insertBefore(B)// 把A放到B的前面
移除和清空元素
$(selector).remove()//移除被选元素,包括所有文本和子节点。 $(selector).empty()//从被选元素移除所有内容,包括所有文本和子节点。 //remove()移除了包括自身在内的,empty()移除了子元素
替换
$(A).replaceWith(B)//将A替换成B $(A).replaceAll(B)//将B替换成A
下面两种方式都是替换页面中的div
$("div").replaceWith("<a>baidu</a>") // 可以直接已一个字符串替换 //像.append(),.prepend(),.after(),.before()中都可以使用字符串(定位元素在前面) var cc = document.createElement("a"); $(cc).text("baidu"); $(cc).replaceAll("div");//需要先创建对象
克隆
$(select).clone()//克隆匹配的DOM元素并且选中这些克隆的副本。 //clone()传递true事件处理函数会被复制。
事件
常用事件
click(function(){...}) blur(function(){...}) focus(function(){...}) change(function(){...}) keyup(function(){...}) //在js中是on...的事件可以用on()设置 //而像下面这个在js中没有的只能通过$().hover(function(){...})这样来设置 hover(function(){...})
事件绑定
.on(events [,selector],function(){})
- events: 事件
- selector: 选择器(可选的),用于事件委托
- function: 事件处理函数
移除事件
.off( events [, selector ][,function(){}])
off() 方法移除用.on()绑定的事件处理程序。
- events: 事件
- selector: 选择器(可选的)
- function: 事件处理函数
阻止后续事件执行
return false // 一般是用来取消默认动作。
页面载入
当DOM载入就绪之后查询及操纵时绑定一个要执行的函数。
一般在ready()中的函数中绑定事件,
这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度。
两种写法(推荐)
$(document).ready(function(){ // 在这里写你的JS代码... })
简写
$(function(){ // 你在这里写你的代码 })
事件委托
事件委托是通过事件冒泡的原理,利用父标签去触发子标签的事件。
$("祖辈").on("事件", "子标签查询条件", function () { //函数体 }) //示例 //表格中每一行的编辑和删除按钮都能触发相应的事件。 $("table").on("click", ".delete", function () { // 删除按钮绑定的事件 })
动画效果
基本
show() // 显示隐藏的匹配元素。
hide() // 隐藏匹配的元素。
toggle() // 切换
滑动
调整元素的高度隐藏元素
slideDown() // 显示
slideUp() // 隐藏
slideToggle() // 切换
淡入淡出
调整元素的透明度隐藏元素
fadeIn() // 显示
fadeOut() // 隐藏
fadeTo()
fadeToggle() // 切换
jQuery的一些其他方法
each()
each() 方法规定为每个匹配元素规定运行的函数。-->返回 false 可用于及早停止循环。
$("button").click(function(){ $("li").each(function(){ alert($(this).text()) }); });//输出每个 li 元素的文本:
.data()
在匹配的元素集合中的所有元素上存储任意相关数据
或
返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。
.data(key, value):
$("#i1").data("num",1)//存取一个值,以键值对的方式存储,可以存储任意类型的值 $("#i1").data({"num":2,"name":"hehehe"})//存取多个值 $("#i1").data("name")//获取值 "hehehe" $("#i1").removeData("num");//移除值 $("#i1").data("num")//undefined $("#i1").data("name")//"hehehe"
插件
jQuery.extend(object)或$.extend(object)
--
jQuery的命名空间下添加新的属性。
多用于插件开发者向 jQuery 中添加新函数时使用。
<script>
jQuery.extend({ min: function(a, b) { return a < b ? a : b; }, max: function(a, b) { return a > b ? a : b; }, str:"value" }); $.str//"value" $.min(1,4)//1 $.max(1,4)//4
</script>
jQuery.fn.extend(object)或$.fn.extend(object)
为jquery的实例对象添加属性
<script>
$.fn.extend({ min: function(a, b) { return a < b ? a : b; }, max: function(a, b) { return a > b ? a : b; }, add:"hahaha"}); $.min(1,2)//报错 $("div").min(1,2)//1
</script>
写在文件中的扩展
(function(jq){ jq.extend({ funcName:function(){ ... }, }); })(jQuery); //写进函数里可以解决不同拓展文件里的变量或函数重名的问题,在使用变量或函数时不会使用到其他文件
里的 //传递jQuery避免$被声明变量