jquery教程

第一章 jquery基础部分

1.1 JS和jquery区别

注意jquery函数和对象

1.2 jquery两把利器

Jquery的函数和对象

jQuery函数($/jQuery)

当函数用: $(xxx)，直接向括号里面传递参数

当对象用: $.xxx()，当对象用直接用打点的方式调用方法

jQuery对象: 执行jQuery函数返回的就是jQuery对象

使用jQuery对象: $obj.xxx()

1.3 jquery核心函数

1). 参数为函数 : 当DOM加载完成后，执行此回调函数

  2). 参数为选择器字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象

  3). 参数为DOM对象: 将dom对象封装成jQuery对象

  4). 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象

1.4 jquery对象

1.jquery对象内部包含多个dom元素。直接按索引就能获取对应的dom元素

1.5 jquery基本选择器

基本选择器

  - #id : id选择器  $('#div1').css('background', 'red')

  - element : 元素选择器  $('div').css('background', 'red')

  - .class : 属性选择器  $('.box').css('background', 'red')

  - * : 任意标签  $('*').css('background', 'red')

  - selector1,selector2,selectorN : 取多个选择器的并集(组合选择器)

$('div,span').css('background', 'red')

  - selector1selector2selectorN : 取多个选择器的交集(相交选择器)

$('div.box').css('background', 'red')

1.6 jquery层次选择器

层次选择器

1. ancestor descendant  $('ul span').css('background', 'yellow')

  在给定的祖先元素下匹配所有的后代元素

2. parent>child  $('ul>span').css('background', 'yellow')

  在给定的父元素下匹配所有的子元素

3. prev+next   $('.box+li').css('background', 'yellow')

  匹配所有紧接在 prev 元素后的 next 元素

4. prev~siblings  $('ul .box~*').css('background', 'yellow')  ~后面接对应的dom元素，如果是* 就是所有

  匹配 prev 元素之后的所有 siblings 元素

1.6 jquery过滤选择器

过滤选择器

//1. 选择第一个div

  // $('div:first').css('background', 'red')

  //2. 选择最后一个class为box的元素

  //$('.box:last').css('background', 'red')

  //3. 选择所有class属性不为box的div

  // $('div:not(.box)').css('background', 'red')  //没有class属性也可以

  //4. 选择第二个和第三个li元素

  // $('li:gt(0):lt(2)').css('background', 'red') // 多个过滤选择器不是同时执行, 而是依次

  //$('li:lt(3):gt(0)').css('background', 'red')

  //5. 选择内容为BBBBB的li

  // $('li:contains("BBBBB")').css('background', 'red')

  //6. 选择隐藏的li

  // console.log($('li:hidden').length, $('li:hidden')[0])

  //7. 选择有title属性的li元素

  // $('li[title]').css('background', 'red')

  //8. 选择所有属性