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避免$被声明变量

posted @ 2018-01-02 16:27 瓜田月夜阅读(169) 评论(0) 收藏举报

刷新页面返回顶部

瓜田月夜