JQuery基础总结(一)

什么是JQuery?
1、是原生对象的封装
2、JQuery对象和原生DOM对象不同
3、JQuery对象包含了很多方法,方便的操作DOM元素

\$(XXX)

DOM和JQ的转换
-\$(‘#myDiv’)
-\$(‘.myClass’)
-…
-\$(domObject) → JQuery Object
-\$(XXX).get(0) → DOM Object
-\$(XXX)[0] → DOM Object

链式语法chaining

$('#divTest')
    .text('Hello,World!')
    .removeClass('blue')
    .addClass('bold')
    .css('color','red')

(只需查一次,性能高)

注意:使用.find( )、.add( )、.children( )、.filter( )具有破坏性,还原上一次查询对象使用.end( )。

\$(document).ready(function()){…})
简写:

$(function(){})

说明:事件先执行,DOM结构绘制完毕后就执行,不必等到加载完毕,并且可以同时编写多个,都可以得到执行。

区别:
window.onload()和\$(window).load()是按照顺序来执行的,必须等到页面内包括图片的所有元素加载完毕后才能执行,就是原生js和jQuery的两种写法。
但是window.onload()不能同时编写多个,如果有多个window.onload方法,只会执行一个。而$(window).load()是可以多个执行的。

注意:onload和ready不能一起使用,有时会造成ready方法无效。

类数组对象

1、具有长度属性,可以通过索引访问到元素的对象
2、没有数组的相应方法

JQuery筛选器

位置筛选器
-选中第一个位置

:first

-选中最后一个位置

:last

-选中偶数位置

:even

-选中奇数位置

:odd

-选中等于

:eq(n)

-选中大于

:gt(n)

-选中小于

:lt(n)

注意:没有大于等于、小于等于;n是确切的数字,从0开始

子元素筛选器
-选中第一个子元素

:first-child

-选中最后一个子元素

:last-child

-选中第一个类型相同的

:first-of-type

-选中最后一个类型相同的

:last-of-type

-选中第二个

:nth-child(2) //从1开始

-选中偶数个(一)

:nth-child(2n)

-选中偶数个(一)

:nth-child(even)

-选中奇数个

:nth-child(odd)

表单筛选器

-选中处于选中状态的元素

:checked

-选中被禁用的input元素

:disbaled

-选中不被禁用的input元素

:enabled

-选中焦点所在的元素

:focus

-选中button按钮和type是button的元素

:button

-选中所有的多选框

:checkbox

-选中所有文件输入框

:file

-选中type为image的input元素

:image

-选中所有的form元素

:input

-选中密码输入框

:password

-选中单选框

:radio

-选中所有type是reset

:reset

-选中所有选中状态的select

:selected

-选中所有type是submit的和button(有些浏览器)

:submit

-选中type是text和input(input默认type是txt)

:text

内容筛选器

-选择没有子元素(包括文本节点)的每个元素的元素(CSS也有)

:empty

-选择包含指定文本的元素

:contains(text)

-选择包含selector选择器的元素,Slector是一个选择器

:has(selector)
// 例子 p:has(span)

-选择包含子元素或者文本元素

:parent

其他筛选器

-选中语言

:lang(language)
例:< p lang=”en-US” >

-选中所有不是selector的

:not(selector) 例:p:not(#p1)

-选中文档的根元素(html)

:root

-选中当前活动的目标元素
(有些浏览器获取url hash会延迟,所以直接在document ready中获取会获取不到)

:target

下面四个JQ独有
-选中所有不可见元素(display:none)或type是hidden
(不包含隐藏占位和透明度为0的元素)

:hidden

-选中所有可见元素
(和:hidden相反)

:visible

-选中所有标题类的元素

:header

-选择所有正在执行动画效果的元素

:animated

JQ选择器的性能优化

-尽量使用CSS中有的选择器
-避免过度约束
-尽量以ID开头
-让选择器的右边有更多特征
-避免使用全局选择器
-缓存选择器结果

JQuery DOM操作

DOM对象和JQuery对象
区别:
DOM对象也可以说是DOM元素,浏览器网页渲染出来的元素;JQuery对象是对一组DOM对象的包装。

检测

DOM Object : if(obj.nodeType)
jQuery Object : if(obj.jquery)

转换

var jqueryObj = $(domObj);
var domObj = jqueryObj.get([index]);

创建HTML元素

$(‘< div > Hello < /div >’);

检查元素数量

$(‘xxx’).length

提取元素

-[index] 返回DOM元素
-get( [index] ) 返回DOM元素(索引为负,从后往前算)或元素集合(不加索引)
-eq(index) 返回jQuery对象

提取第一个元素

console.log(elements.first( ));

提取最后一个元素

console.log(elements.last( ));

通过关系查找Jquery对象的方法

获取指定元素的子元素

.children([selector])

获取元素的文本节点

.contents()

获取指定元素,包括子元素和孙子元素

.find(selector)

获取当前匹配元素集合中每个元素的父元素

.parent([selector])

获取当前匹配元素集合中每个元素的所有父元素

.parents([selector])

获取当前匹配元素集合中每个元素的祖先元素,直到遇到被选择器(该方法参数)匹配的元素为止,不包含被选择的元素

.parentsUntil([selector])

从当前元素开始逐级向上寻找,返回最先匹配的元素,也能获取它本身

.closest(selector)

closest与parents的区别:
1、closest是从当前元素开始匹配的,parents是从父元素开始匹配的。
2、closest向上找,找到匹配的就停止;parents会找到所有的父元素,并返回一个集合。
3、closest返回1个或0个,parents能返回多个。

获取当前元素之后紧邻的同辈元素

.next([selector])

获取当前元素之后的所有同辈元素

.nextAll([selector])

获取当前元素之后的同辈元素,直到遇到匹配的元素为止,不包括选择的元素

.nextUntil([selector])

获取当前元素之前紧邻的同辈元素

.prev([selector])

获取当前元素之前的所有同辈元素

.prevAll([selector])

获取当前元素之前的同辈元素,直到遇到匹配的元素为止,不包括选择的元素本身

.prevUntil([selector])

获取同辈元素的元素集合,同时往前往后取(没有单数形式),不包含选择的元素本身

.siblings([selector])

筛选和遍历对象

添加元素

.add(selector)

过滤元素

.not(selector) //过滤掉选择的元素
.filter(selector) //过滤掉选择的其他元素
.has(selector) //一般筛选二级菜单

获取子集

.slice(start[,end]) // 左闭右开 [3,5)

转换元素

.map(callback)

遍历元素

.each(iterator)

JQ对象的其他操作

根据选择器、元素或JQuery对象来检测匹配元素集合,如果这些元素中至少有一个元素匹配给定的参数,则返回true

is(selector)

将匹配元素集还原到之前的操作状态(前一次操作一定要是破坏性操作,不然返回的是一个空对象)

.end( )

破坏性操作:任何对JQuery对象进行改变的操作。删除元素,find,next,parent,filter,not,children,map等

返回当前的元素与先前的元素的JQ对象集合

.addBack([selector])

元素特性和属性值

定义

attribute(特性),是我们赋予某个事物的特质或对象,attribute是HTML标签上的特性,它的值只能够是字符串

property(属性),是早已存在的不需要外界赋予的特质,property是DOM中的属性,是JavaScript里的对象

在访问元素特性值时有两种方式:

  1. 传统DOM方法getAttribute和setAttribute。
  2. 使用DOM对象上与之对应的属性。

获取

特性 (名不区分大小写)Attributes:值为string
属性 (名区分大小写)Properties:值为string、boolean、number、object

区别

  • 如果atttibutes是本来在DOM对象中就存在的,attributes和properties的值会同步

  • 如果attributes是本来就在DOM对象中就存在的,但是类型为Boolean,那么attributes和properties的值不会同步

  • 如果attributes不是DOM对象内建的属性,attributes和properties的值不会同步

操作元素的特性

  • 获取特性的值:attr(name)
  • 设置特性的值:attr(name,value)attr(attributes)
  • 删除特性(多个特性加空格):removeAttr(name)

注意:特性名可以不区分大小写,属性区分

操作元素的属性

  • 获取属性的值:prop(name)
  • 设置属性的值:prop(name,value)prop(properties)
  • 删除属性(只能删除一个属性):removeProp(name)
    注意:删除内置HTML属性会出现undefined或无效,使用removeAttr() 方法代替。

元素中存取数据

  • 获取数据的值:data([name])
  • 设置数据的值:data(name,value)data(object)
  • 删除数据的值(多个用集合或空格):removeDate([name])
    注意:假如代码脚本重新定义了一下元素属性,也就是下面的任何操作是针对于新定义的这个元素来说的,所以移除之后,再次打印就是空的;否则没有新定义,就是原本html存在的,则移除之后还可以获取。
  • 判断是否有数据:jQuery.hasData(element)
    注意:element是DMO元素,不是JQ对象;判断中html里的数据不算,需要JQ自定义才能判断

修改JQ对象的样式和内容

添加或删除类

  • .addClass(names) 添加class
  • .removeClass(names) 移除class
  • .hasClass(name) 判断是否存在class
  • .toggleClass([names] [,switch]) 判断是否存在class,自动添加或删除类

获取或设置style

.css(name,value)

例:element.css('width',200);
    //批量增加样式
    element.css({
        'background-color':'red', //有-要加引号
        height:200, //默认px单位
        border:'10px solid #000', //引号
        marginTop: 100 , //用驼峰或-都可以
    })
    width: '+=50'

获取或设置元素尺寸

注:value为空获取,否则设置值

//获取值不包含内外边距
.width(value)
.height(value)

//包含内边距,不包含边框和外边距
.innerHeight(value)
.innerWidth(value)

//包含内边距和边框,参数传true则包含外边距
.outerHeight(value)
.outerWidth(value)

获取或设置位置和滚动

  • 获取浏览器文档相对的偏移位置(只对可见元素有效)
    .offset(coordinates)

  • 获取父元素或浏览器文档相对偏移距离(忽略设置的外边距)
    .position( )

  • 获取相对于滚动条左边的偏移位置
    .scrollLeft(value)

  • 获取相对于滚动条顶部的偏移位置
    .scrollTop(value)

修改元素的内容

  • .html( ) 获取html内容的值
  • .html(content) 设置html内容的元素值
  • .text( ) 获取元素内容的文本
  • .text(content) 设置元素内容的文本值

JQ对象的文档处理

移动或插入元素

  • 元素内部往后插入:
    .appedn(content[,content,…,content])
    .appendTo(target)

  • 元素内部往前插入:
    .prepend(content[,content],…,content)
    .prependTo(target)

  • 元素外部往前插入:
    .before(content[,content],…,content)
    .insertBefore(target)

  • 元素外部往后插入:
    .after(content[,content],…,content)
    .insertAfter(target)

包裹元素

  • .wrap(wrapper)
    相同的元素都分别包裹在另一个元素里面
  • .wrapAll(wrapper)
    所有相同的元素都包裹在另一个元素里面:
  • .wrapInner(wrapper)
    包裹元素里面的内容,而不是整个包裹整个元素
  • .unwrap( ) 取消包裹

移除元素

  • .remove([selector])
    移除元素后绑定的事件和附加的数据会被删除
  • .detach([selector])
    移除元素后绑定的事件和附加的数据不会被删除
  • .empty( )
    移除元素内容却能保留元素本身(会移除元素内的所有子元素)

复制和替换元素

  • 复制元素: .clone([Even[,deepEven]])
  • 替换元素:
    .replaceWith(content)
    .replaceAll(target)

处理表单元素值

  • 设置值 val(value)
  • 获取值 val( )