jQuery

jQuery特性

• 隐式迭代
• 链式编程，在于一个方法返回的是一个jQuery对象，既然是jQuery对象就可以点出jQuery的方法来
• window.onload 资源加载完成时调用
• $(function(){}) 页面dom树加载完完成时调用

dom对象 转换 jQuery 对象

• dom对象转换成 jQuery 对象var div1 = document.getElementById("one") var $div1 = $(div1) console.log($div1)
• jQuery 对象转换成 dom对象
  • 使用下标取出来var $divs = $('div') var div1 = $divs[0] console.log(div1)
  • 使用 jQuery 的方法var div2 = $divs.get(0) console.log(div2)

小案例 ———- 开光灯

方法

• text() 获取和设置文本内容
  • text() 方法不写参数获取文本
  • text() 方法写参数设置文本
    • 如果设置的文本中包含标签，是不会把这个标签给解析出来的$('#div1').text('我是新设置的文本<a>我是链接</a>') //我是新设置的文本<a>我是链接</a>
• css() 设置和获取样式
  • 获取样式属性值 $("#div1").css("width");
• 设置的是行内样式$('#div1').css('width', '300px') $('#div1').css('height', 300)
  • 设置多样式$('#div1').css({ //属性可以不加引号 //如果是复合属性则必须采取驼峰命名法，值不是数字要加引号 'width': '300px', height: 300, //backgroundColor: 'green'; 'background-color': 'green', 'border-top-width': '10px' })
• index() 得到当前元素索引号 $(this).index() jQuery 选择器 基本选择器
  • Id选择器
    • $(‘#btn’)
  • 类选择器
    • $(‘.tx’)
  • 标签选择器
    • $(‘li’)
  • 并集选择器
    • $(‘.hf, .wsy’)
  • 交集选择器
    • $(‘li.nj’) li标签下的类名为nj的选择器 层级选择器
  • 子代选择器
    • $(‘ul>li’)
  • 后代选择器
    • $(‘ul li’)过滤选择器 这类选择器都带冒号
  • :eq(index)
    • $(“li:eq(2)”) 获取到的li元素中，选择索引号为2的元素，索引号index从0开始
  • :odd
    • $(li:odd) 获取到的li元素中，选择所要为奇数的元素
  • :even
    • $(li:even) 获取到的li元素中，选择所要为偶数的元素

案例-下拉菜单

$('ul').mouseover(function (){
	console.log(this);//谁调用了mouseover，然后this就是谁，且this是dom对象，使用jquery需要转换为jquery对象
})

• mouseover 事件在鼠标移动到选取的元素及其子元素上时触发
• mouseenter 事件只在鼠标移动到选取的元素上时触发

以后如果有鼠标移入事件，请使用mouseenter，而不是mouseover

鼠标离开事件使用mouseleave，而不是mouseout

案例-突出显示

案例-手风琴

淘宝服饰精品

• index() $(‘li’).index() 获取li标签在兄弟元素间的索引值

当父类的对象引用没有指向父类的对象，而是指向了子类的对象时，调用方法或访问变量时会怎样呢？

假设父类为Person，子类为Student，有下面的两行定义：

Student sTest = new Student();

Person pTest = sTest;

其中，pTest就是父类的对象引用，sTest是子类的对象引用；pTest和sTest指向了同一个子类对象。

那么，

(1).如果子类的 成员变量与父类的 成员变量 的类型及名称都相同，则用sTest访问时，访问到的是子类的成员变量；用pTest访问时，访问到的是父类的成员变量；

(2).如果子类的静态成员变量与父类的静态成员变量的类型及名称都相同，则用sTest访问时，访问到的是子类的静态成员变量；用pTest访问时，访问到的是父类的静态成员变量；

(3).如果子类的静态成员方法重写了父类的静态成员方法，则用sTest调用时，调用的是子类的静态成员方法；用pTest调用时，调用的是父类的静态成员方法；

(4).如果子类的成员方法重写了父类的成员方法，则用sTest调用时，调用到的是子类的成员方法；用pTest调用时，调用的也是子类的成员方法；

(5).用sTest调用未覆盖的父类成员方法时，该方法中如果使用到了被隐藏的变量或方法时，规则同上；

jQuery

background-color 和 backgroundColor

入口函数

• $(document).ready(function(){})
• $(function(){})

JQuery类操作

• addClass() $('div').addClass('current');
• removeClass() $(this).removeClass('current');
• toggleClass() 切换类 $('div1').click(function(){ $(this).toggleClass('current'); })