jQuery的选择器，筛选器，class属性、标签占位，节点操作

jQuery的选择器

jQuery获取标签对象的语法形式

选择器的语法形式

        $( '条件' )    /   jQuery( '条件' )

        获取 所有符合条件的标签对象

        可以直接执行jQuery的函数方法，获取的是伪数组

注意:

•                 JavaScript DOM操作获取的是 独立的标签对象  /  JavaScript标签对象伪数组
•                 jQuery 获取的 是 jQuery标签对象伪数组
•                 DOM操作获取的 不能使用 jQuery语法形式来操作
•                 jQuery获取的伪数组 也不能使用 js的语法形式来操作
•                 DOM操作获取的一个独立的标签对象 使用 $(标签对象) 的语法形式
•                 可以转化为 jQuery伪数组 可以使用 jQuery语法形式来操作
•                 jQuery伪数组 通过 []语法 获取的是一个独立的 js标签对象

jQuery的筛选器

先用选择器获取所有对应标签对象（如：li）伪数组，再使用筛选器获取符合的某个具体标签对象伪数组：

语法

$().first()

        操作 伪数组中 第一个标签对象

$().last()

        操作 伪数组中 最后一个标签对象

$().eq()

        按照 索引下标 获取标签对象

$().prev()

        操作 当前标签对象 上一个标签对象

$().next()

        操作 当前标签对象 下一个标签对象

$().prevAll()

        操作 当前标签对象 上所有标签对象

$().nextAll()

        操作 当前标签对象 下所有标签对象

$().siblings()

        操作 当前标签对象 所有兄弟标签对象

$().parent()

        操作 当前标签对象 直接父级标签对象

$().parents()

        操作 当前标签对象 所有父级标签对象

$().index()

         操作 当前标签对象 索引下标

$().find()

         获取 当前标签对象 后代标签中 符合条件的标签对象

$().end()

         返回 上一个操作的标签对象

jQuery的class属性

                $().addClass('新增')

                $().removeClass('删除')

                $().toggleClass('切换')

                $().hasClass('判断有没有')

jQuery css样式操作

设定：

$().css( '属性' , '属性值' )      -----      一次只能设定 一个属性和属性值

$().css( { 属性:属性值 , 属性:属性值 , 属性:属性值.... } )

说明:

          1.   px单位 可写可不写

          2.   'font-size' 'fontSize'

          3.   设定的是行内样式

获取：

变量 = $().css('属性')

jQuery属性操作

1.布尔属性

        $( ).prop( )

获取：变量 = $( ).prop( ' 属性 ' )

设置：$( ).prop( ' 属性 ' , 属性值 )

删除：$( ).prop( ' 属性 ' )

布尔属性 获取的结果 和 设定的属性值 都是 布尔类型

2.其他属性

        $( ).attr( )

获取：变量 = $( ).attr( ' 属性 ' )

设定：$( ).attr( ' 属性 ' , 属性值 )

删除：$( ).attr( ' 属性 ' )

jQuery标签占位

1. 盒子模型的占位

        display:none 也可以获取到占位的数值数据

$().height()   /   $().width()     --------      内容

$().innerHeight()   /   $().innerWidth()     --------      内容 + padding

$().outerHeight()   /   $().outerWidth()     --------      内容 + padding + border

$().outerHeight(true)   /   $().outerWidth(true)     --------      内容 + padding + border + margin

2. 标签 距离 html文档 左 上 的 间距

        $().offset()

执行结果是一个对象

         left    距离html文档左侧的间距

         top     距离html文档上方的间距

jQuery的节点操作

1. jQuery创建节点(伪数组)

变量 = $('你要设定的标签') ;

          标签名称 标签内容 标签属性

2. jQuery写入节点(伪数组)

• 父级新增子级标签    末位新增

                $().append( 新增节点 )

                新增节点.appendTo( $() )

• 父级新增子级标签    首位新增

                $().prepend( 新增节点 )

                新增节点.prependTo( $() )

• 当前标签 前 新增兄弟标签

                $().before( 新增节点 );

                新增节点.insertBefore( $() );

• 当前标签 hou 新增兄弟标签

                $().after( 新增节点 );

                新增节点.insertAfter( $() );

3. 修改节点

将 旧的 标签节点 替换为 新的标签节点

           旧节点.replaceWith( 新节点 );

           新节点.replaceAll( 旧节点 );

注意：替换的是所有符合条件的标签节点

4. 删除节点

$().empty()              只是删除标签的内容

 $().remove()           彻底删除标签对象

5. 克隆标签对象

$().clone()

            只克隆标签本身 和 标签内容

            不克隆标签的事件

$().clone(true)

            克隆标签本身 和 标签内容

            并且克隆 标签本身 和 标签内容的事件

$().clone(true,false)

            克隆标签本身 和 标签内容

            并且克隆 标签本身事件  不标签内容的事件