JQuery学习笔记

☆樱花仙子☆ 提交于 2020-01-18 22:15:14

JQuery基础

1.概念:快速简洁的Javascript框架,简化js开发

jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的 JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less, Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

2.快速入门

1.版本问题

1.x 兼容ie678,使用最为广泛的,官方只做bug维护,功能不再新增。因此一般项目来说,使用1.x版本就可以了,最终版本:1.12.4

2.x 不兼容ie678,很少人使用,官方只做bug维护,功能不再新增。如果不考虑兼容版本低的浏览器可以使用2.x,最终版本:2.2.4

3.x 不兼容ie678,只支持最新的浏览器。除非特殊要求,一般不会使用3.x版本的,很多老的jQuery插件不支持这个版本。

2.JQuery-xxx.js 与 JQuery.min.js

  1. JQuery-xxx.js:开发版本。给程序员看的
  2. JQuery.min.js:生产版本,程序使用。

3.使用$()获取,括号里面是选择器

4.js与jq对象的相互转换

1.两者的的对象方法是不通用的

  1. jq -> js: jq对象[索引]或者jq对象.get(索引)
    js ->jq: $(js对象)

3.选择器

1.基本选择器

1.标签(元素)选择器
  *语法: $("html标签名")
2.id选择器
  *语法: $("id属性值")
3.类选择器
  *语法: $(".class的属性值")
4.并集选择器
  *语法: $("选择器1,选择器2.....")
--以上都能获取与之匹配的元素

2.层级选择器

1.后代选择器
  *语法: $("A  B") 选择A元素内的所有B元素(包含孙子辈)
2.子选择器
  *语法: $("A > B") 选择A元素内的所有B子元素(只有儿子辈)

3.属性选择器

1.属性名称选择器
 *语法:$("A[属性名]") 包含指定属性的选择器
2.属性选择器
 *语法:$("A[属性名='值']") 包含指定属性等于属性值选择器
3.复合属性选择器
 *语法:$("A[属性名='值'][ ]...") 包含多个属性的选择器  
4. ^以什么开始 $以什么结束 *包含什么
    例: div[title*='abc']

4.过滤选择器

1.首元素选择器
    *语法:first 获得选择的元素中的第一个
2.尾元素选择器
    *语法:last 获得选择中的最后一个
3.非元素选择器
    *语法:not(selector)不包含指定内容的元素
4.偶数选择器
    *语法: even偶数,从0开始计数
5.奇数选择器
    *语法:odd 奇数,从0开始计数
6.等于索引选择器
    *语法:eq(index)指定索引元素
7.大于索引选择器
    *语法:gt(index)大于指定索引元素
8.小于索引选择器
    *语法:lt(index) 小于指定索引元素
9.标题选择器
    *语法:header(h1~h6) 获得标题元素,固定写法

5.表单过滤选择器

1.可用元素选择器
    *语法:enabled 获得可用元素
2.不可用元素选择器
     *语法:disabled 获得不可用元素
3.选中选择器
     *语法:checked 获得单选/复选框选中的元素
     *语法:selected 获得下拉框选中的元素

4.DOM操作

1.内容操作

1.html()
    $().html():获取/设置元素的标签体内容
2.text()
    $().text():获取/设置元素的标签体纯文本内容
3.val()
    $().val():获取/设置元素的value属性值

2.属性操作

2.1通用属性操作
1.attr():获取/设置元素的属性
    $().attr("",""); <--新增自定义属性,后括号为属性值,prop同理!
2.removeattr():删除属性
3.prop():获取/设置元素的属性
4.removeprop():删除属性

*attr prop区别:
    prop一般用于操作元素的固有属性
    attr一般用于操作元素的自定义属性
2.2对class属性操作
1.addClass():添加class属性值
2.removeClass():删除class属性值
3.toggleClass():切换class属性值
    *意思是有变无 无变有,相互转换

3.CRUD操作

1.append():父元素将子元素追加到末尾
    *对象1.append(对象2):将对象2添加到对象1元素内部的末尾
2.prepend():父元素将子元素追加到开头
    *对象1.append(对象2):将对象2添加到对象1元素内部的开头
3.appendTo():同append
    *对象1.appendTo(对象2):将对象1添加到对象2元素内部的末尾
4.prependTo():同prepend

5.after():添加元素到元素后边
    *对象1.after(对象2):将对象2添加到对象1后边,平行关系
6.before():添加元素到元素前边
7.insertAfter():
    *对象1.after(对象2):将对象1添加到对象2后边,平行关系
8.insertBefore():

9.remove():移除元素,将对象删除掉
10.empty():将对象的后代全部删除,但保留当前对象和他的属性

6.进阶部分

1.动画:三种方式显示和隐藏元素

1.默认显示和隐藏方式

hide:隐藏
show:显示

$("#hide").click(function(){
         $("p").hide();
    });

$("#show").click(function(){
         $("p").show();
    });

$("button").click(function(){
    $("p").hide(1000);//1000为毫秒值
});

toggle:

2.滑动显示和隐藏

3.淡入淡出显示和隐藏

2.遍历

jq.each()

3.事件绑定

1.jq对象.事件方法(回调函数)

2.on/off事件绑定

3.时间切换toggle,jq对象.toggle(fn1,fn2...)-->点击一次,便往下执行一次,执行完跳回第一个。

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!