jQuery复习

撰写于 2017-07-18 修改于 2017-07-19

jQuery

全局变量window.jQuery === window.$

• $.xxx调用jQuery本身的属性方法
• $(xxx)返还jQuery对象表达式或者DOM元素
• jQuery对象是原生DOM对象的封装
• •$(domObject)—— jQuery Object
• • $(xxx).get(0) —— DOM Object
• • $(xxx)[0] —— DOM Object

  链式语法chaining

  可以换行也可以不换行
  $(‘#divTest’).text(‘Hello, world!’)

  .find('p.child')//具有破坏性
  .css('color','end')//具有破坏性
  .end()//可以用end还原具有破坏性的
  

  $(document).ready(function(){…})
  判断是否加载完毕监听 window onload
  要DOM加载完毕才能进行操作不然会报错，使用ready方法

ready和onload

// window.onload = function () {
    //        console.log('onload');
    //    }
    $(window).load(function () {
        console.log('load');
    });
    $(document).ready(function () {
        console.log('ready');
    });

ready速度要比onload快很多

选择元素

JavaScript中选择元素

• • document.getElementById()
  • document.getElementsByName()
  • document.getElementsByTagName()
  • document.getElementsByClassName()
  • document.querySelector()
  • document.querySelectorAll()

  CSS 中选择元素

• 基本选择器
• 属性选择器
• 伪类选择器
• 伪元素选择器

jQuery中选择元素

• • 兼容CSS3选择器标准
• • 对选择器语法有更多扩充
• • 返回0、1或多个jQuery元素的集合
• • 集合内元素顺序和在页面上顺序一致
• • ID选择器
• • 类选择器
• • 元素选择器
• • 后代选择器
• • 属性选择器
• • 位置筛选器
• • 子元素筛选器
• • 表单筛选器
• • 内容筛选器
• • 其他筛选器
• • 自定义选择器

  位置筛选器

• :first
• :last
• :even
• :odd
• :eq(n)
• :gt(n)
• :lt(n)

  子元素筛选器

• :first-child
• :last-child
• :first-of-type
• :last-of-type
• :nth-child()
• :nth-last-child()
• :nth-of-type()
• :nth-last-of-type()
• :only-child
• :only-of-type

  - 表单筛选器

• :checked
• :disabled
• :enabled
• :focus
• :button
• :checkbox
• :file
• :image
• :input
• :password
• :radio
• :reset
• :selected
• :submit
• :text

  - 内容筛选器

• :empty
• :contains(te
• :has(selecto
• :parent

  - 其他筛选器

• :lang(language)
• :not(selector)
• :root
• :target
• :hidden
• :visible
• :header
• :animated选择正在执行动画效果的元素

  - jQuery选择器的性能优化

• • 尽量使用CSS中有的选择器
• • 避免过度约束 不要限定过多，层次尽量少
• • 尽量以ID开头
• • 让选择器的右边有更多特征（从右至左运行，尽量右边具有更多特征，css代码也一样，尽量右边更具体带个小的限定）
• • 避免使用全局选择器（用class或者ID比用标签更快）
• • 缓存选择器结果

• 先选择到list再find更快，例如

  -   logTime(function () {
             $('ul'); // slow
         })
  
         logTime(function () {
             $('.list'); // better
         })
  

操作jQuery对象

DOM对象和jQuery对象

• • 检测 DOM Object：if ( obj.nodeType )
• • 检测 jQuery Object：if ( obj.jquery )
• • 转换：
  
  var jqueryObj = $(domObj);
  
  var domObj = jqueryObj.get([index]);

创建元素

$('<div>Hello</div>');设置属性

$(function() {
    var link = $('<a>', {
    text: '百度',
    href: 'https://www.baidu.com',
    target: '_blank',
    title: '去往百度首页'
    });//必须声明的是空元素

    link.appendTo('body');
     });

方法二

$(function() {
   var link2 = $('<a>百度</a>').attr({
   href: 'https://www.baidu.com',
   target: '_blank',
   title: '去往百度首页'
   });

   link2.appendTo('body');
   });

检查和提取元素

检查元素数量

$(‘xxx’).length

提取元素

• • [index] 返回DOM元素
  
  不能为负不然报错
• • get([index]) 返回DOM元素或元素集合
  
  可以为负，从最后开始检索

• • eq(index) 返回jQuery对象
  
  eq方法比eq筛选器性能高很多

  console.log($(‘li’).eq(0));
  
  console.log($(‘li:eq(0)’));

• • first()
• • last()
• • toArray()
  -

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

• • children([selector])——直接子元素
  
  不返回文本节点，子元素中文本会被筛选掉
• • contents()——直接子元素
  
  返回文本节点
• • find(selector)——包含子元素和孙子元素
  
• • parent([selector])——直接父元素只有一个，就父元素开始找，返回多个
• • parents([selector])——返回所有父元素

• • parentsUntil([selector])只能带选择器获取到某一层级，到哪级为止，但是不包含

• • closest(selector) 首先检查当前元素是否匹配，先找自身再往上找，只会返回0个或者一个

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

• • next([selector])从当前元素往后找
• • nextAll([selector])
• • nextUntil([selector])什么都不传和nextAll一样的
• • prev([selector])当前元素往前找
• • prevAll([selector])
• • prevUntil([selector])当元素找到直到
• • siblings([selector])所有统计兄弟元素，不包含本身

筛选和遍历jQuery对象

• 添加元素• add(selector)
  

   console.log($('.item1, .item2'));<br>
  console.log($('.item1').add('.item2'));<br>
  

  add很多重载方式

过滤元素

• • not(selector)选择器匹配到的干掉
• • filter(selector)选择器没有匹配到的干掉
• • has(selector)
• 例li>ul
  
• console.log($(‘li’).has(‘ul’));

获取子集

slice(start[, end])

转换元素

map(callback)一个jquery对象转成成另外一个jquery对象

遍历元素

each(iterator)

console.log($(‘div’).map(function (index, domElement) {

if(this.id=== ‘box2’){

return false;//遍历终止
}

this.title= this.id;
}));

判断使用三个等号严格的相等

jQuery对象的其他操作

• is(selector) 是否包含某个元素
• console.log($(‘#box3’).children().is(‘p’));
• end()回到破坏性操作之前
• $(‘#box3’).find(‘.item3’).css(‘color’, ‘red’)

  .end().find('.item5').css('color', 'blue')
  .end().find('.item7').css('color', 'green')
  .end().find('.item9').css('color', 'orange')<br>
  

  返回上一级一般用在链式语法中,每一次end()返回一级
• addBack([selector])
• $(‘.item3’).nextUntil(‘.item6’).addBack().css(‘color’, ‘red’)
• item3没有包含进来所以用addBack把item3也包含进来

操作元素的特性、属性和数据

元素的特性和属性

特性 attributes vs 属性 properties

attributes特性：值为 string

properties属性：值为 string、boolean、number、object

如果 attributes 是本来在DOM对象中就存在的，attributes和

properties 的值会同步；

属性是个对象

<div`name = ‘check’>

获取的是特性console.log(checkbox.getAttribute(‘name’));

返回的是check

获取的是属性 console.log(checkbox.name);

返回的是name整个对象，包含整个对象以及没有出现的内容

元素属性和特性动态链接
如果 attributes 是本来在DOM对象中就存在的，但是类型为

Boolean(true or false)，那么attributes和properties 的值不会同步；

如果 attributes 不是DOM对象内建的属性，attributes和

properties 的值不会同步；

內建：HTML中自带的，不是人为杜撰的
class是保留字，获取属性应该用className
img.src获取属性会自动对路径的处理

操作元素的特性

• 获取特性的值：attr(name)
• 设置特性的值：attr(name, value) attr(attributes)
• 删除特性：removeAttr(name)
• 例子
• 

操作元素的属性

• 获取属性的值：prop(name)
• 设置属性的值：prop(name, value) prop(properties)
• prop和attr区别，prop设置布尔型，attr false状态下可以直接移除属性
  
• 而prop则不会
• 例如
• 
• 
• 
• 
• 删除属性：removeProp(name)
• 删除属性中间不能加入空格，删除內建属性，jquery为了避免错误会标记成undefined而不会正在删除

在元素中存取数据

• 获取数据的值：data([name]) 保留数据类型
• 设置数据的值：data(name, value) data(object)
• 删除数据：removeData([name])
  
  $(‘#logo’).removeData([‘data1’,’data2’]) 通过数组删除
  
  $(‘#logo’).removeData(‘data1 data2’) 通过空格删除
  
  删除全部数据什么数据都不传即可
  
• 判断是否有数据：jQuery.hasData(element) element是个DOM元素
  检测元素是否拥有与之相关的任何 jQuery 数据
  
  var img=$(‘img’);
  
  img.data({
  

  data1:'data1',<br>
  data2:'data2'})<br>
  

• console.log（$.hasData(img.get(0))）;传入DOM对象 返回true
• 也可以直接传入数组返回TRUE例如
• console.log（$.hasData(img[0])）;
• console.log（$.hasData(img)）传入jquery对象返回false

jquery对象转换成DOM对象

利用数组下标的方式读取到jQuery中的DOM对象

var $div = $(‘div’) //jQuery对象

通过jQuery自带的get()方法

var div = $div[0] //转化成DOM对象

var div = $div.get(0) //通过get方法，转化成DOM对象

DOM对象转化成jQuery对象

通过$(dom)方法将普通的dom对象加工成jQuery对象

var div = document.getElementsByTagName(‘div’); //dom对象

var $div = $(div); //jQuery对象

修改元素样式

• addClass(names)增加类class的属性
• removeClass(names)移除class类的属性
• toggleClass([names][, switch])切换某个类，第二个参数是布尔值
  例如
• hasClass(name)如果有

获取或设置 style

• css(name, value) 属性带横杆得用单引号括起来 或者去掉横杆用驼峰写法
  
  element.css({
  

      'background-color': 'red',<br>
      height: 200,<br>
      border: '10px solid #000',<br>
      marginTop: 100,<br>
      mArGinLeft: 100,<br>
      width: '+=200'<br>
  });<br>
  

  也可以是函数
  
  element.css(‘height’, function(index, value) {
  

  console.log(value);<br>
  return parseInt(value, 10) + 50;<br>
  

  //获取到的是带单位的例如500px需要parseInt(value,10)转换成10进制

  });<br>
  

• css(properties)
• console.log(element.width());
• css(name)
  两种不同方法获取差异
  
  css获取带单位，普通获取不带单位
  
  console.log(element.css([‘height’, ‘width’, ‘border’]));也可以获取数组
  

  获取或设置元素尺寸

• width(value) 获取自身宽度
• height(value)
• innerHeight(value)包含内边距 不包含边框外边距
• innerWidth(value)包含内边距 不包含边框外边距
• outerHeight ([includeMargin])包含内边距和边框，外边距是否包含用布尔值决定
• outerHeight(value)
• outerWidth ([includeMargin])
• outerWidth(value)
• 例子
• 
• 

获取或设置位置和滚动

• offset(coordinates)获取第一个元素相对于文档的偏移，只对可见的元素有效
• position() 相对于父级元素的距离
• scrollLeft(value)相对于左侧滚动条的偏移，对可见和隐藏元素都有效
• scrollTop(value)相对于顶部 滚动条的偏移，对可见和隐藏元素都有效，可以进行回到顶部操作

  获取或设置元素内容

• html()
• html(content)
• text()
• text(content)

  - 移动或插入元素

• append(content[, content, …, content])元素内部后面追加内容可以是代码
• prepend(content[, content, …, content])元素内部最前面，比如内容之前
• before(content[, content, …, content])元素同级之前

• after(content[, content, …, content])元素同级之后
  还可以移动例如

   element.append($('h2')) <br>
  element.append($('.item1'))<br>
  element.append('<p>p1</p>', ['<p>p2</p>', $('h2')], $('.item1'))<br>
  

• appendTo(target)和上面相反
  
  上面是把xx后面插入或者移入yy
  
  而这个是移动yy到xx后面
  
  例如$(‘h2’).appendTo(element);

• prependTo(target)
• insertBefore(target)
• insertAfter(target)

包裹元素

• wrap(wrapper)
  
  

  element.wrap('<div class="box"></div>');<br>
              element.wrap($('.item'))<br>
  

  wrap会把每一个匹配到的元素包裹一次，如果传入是jquery对象，则会复制一份包裹，而不是替换
• wrapAll(wrapper) 把所有匹配到元素包裹在一个父元素中
• wrapInner(wrapper) 吧所有匹配到元素内的内容包裹在一个父元素中
• unwrap()取消包裹，移除元素的父元素

  移除元素

• remove([selector]) 只从页面上删除了，不会在jquery对象中删除，删除事件和数据
• detach([selector])删除元素保存了对象的事件和数据
• empty()删除元素里面内容（子节点和文本节点），保留元素本身

  复制和替换元素

• clone([Even[,deepEven]])第一个参数是否复制本身不复制子节点，只复制顶级元素，第二个是否复制全部，element.clone(true,true)

• replaceWith(content)替换替换

• replaceAll(target)是replaceWith的反方法，效果一样的，但是颠倒了两边的位置

  $(‘h2’).replaceWith(‘<p>hello</p>’);
  
  h2替换成hello
  

  $('<`p>hello`<`/p>').replaceAll($('li')); <br>
  

  hello替换入h2中
  

以下方法执行的都是破坏性操作

• appendTo(target)
• prependTo(target)
• insertBefore(target)
• insertAfter(target)
• replaceAll(target)
  -需要使用end方法才能选择先前选择的元素

  处理表单元素值

• val() 只返回第一个元素的值
• val(value)