jQuery的学习方便复习

jQuery摘要学习点

1.在HTML里使用标签script引入js文件

<script src="jQuery类库的路径"></script>
<script>
//使用jQuery
</script>

• js对象转jQuery对象：$(js对象)
• jQuery对象转js对象：jQuery对象[索引] 或者 jQuery对象.get(索引)
  举例:

//1.1 用js方式获取d1对象--js对象：js对象不能直接使用jQuery对象的方法，但可以转换成jQuery对象再用：穿马甲 $(js对象)
var d1Js = document.getElementById("d1");
var inner = $(d1Js).html();
alert(inner);


//jquery对象都是类数组，数组里的每个元素都是js对象

//1.2 用jquery方式获取d1对象--jQuery对象：jQuery对象不能直接使用js对象的属性，但可以转换成js对象再用：脱马甲 jQuery对象[索引]
var d1Jq = $("#d1");
var inner = d1Jq[0].innerHTML;
alert(inner);

选择器

• 基本选择器：
  • 标签选择器：$("div")，获取所有div标签
  • ID选择器：$("#d1")，获取id为d1的标签
  • 类选择器：$(".cls")，获取类名为cls的标签
  • 并集选择器：$("div, #d1, .cls") 三个选择器选中的结果，全部都要
• 层级选择器：
  • 后代选择器：$("div span")，获取div的后代span元素（div内部所有的span）
  • 子选择器：$("div>span")，获取div的子元素span
• 属性选择器：
  • 含有指定属性的：$("div[name]")，获取含有name属性的div元素
  • 指定属性值的：$("div[name='d1']")，获取name属性值为d1的div元素
  • 复合属性选择器：$("div[属性1][属性2]...[属性n]")
• 基本过滤选择器
  • 第一个：:first
  • 最后一个：:last
  • 排除不要：:not(selector)
  • 索引为奇数的：:odd
  • 索引为偶数和：:even
  • 索引等于2的：:eq(2)
  • 索引小于2的：:lt(2)
  • 索引大于2的：:gt(2)
  • 所有标题：:header
  • 正在运动的动画：:animated
• 表单属性选择器
  • 获取可用的：:enabled
  • 获取不可用的：:disabled
  • 获取被选中的radio/checkbox： :checked
  • 获取被选中的下拉选项option：:selected
• 记住：基本选择器，表单属性选择器
  • 其它的：练习一下（得有印象）。如果忘记了，可以查API

dom操作

• 操作标签体：
  • html()：获取标签体
  • html(value)：设置标签体。是覆盖式设置，设置的html代码会生效
• 操作文本：
  • text()：获取文本
  • text(value)：设置文本。是覆盖式设置，设置的html代码不生效
• 操作表单项的值：
  • val()：获取表单项的值
  • val(value)：设置表单项的值
• 思考：如果有一个div，我要获取div里的内容，用什么方法？
• val()不行，应该使用html() / text()

• 操作属性

方法	参数	描述
attr(name [,value])	name：属性名称	获取/设置属性值
prop(name [,value])		获取/设置属性值

• 如果要操作的是checked和selected属性，必须使用prop()方法
• 其它属性，优先使用attr()，如果不行，再使用prop()

事件

js事件写法	jQuery事件写法
onclick单击	click(fn)
ondblclick双击	dblclick(fn)
onsubmit表单提交	submit(fn)
onchange域内容改变	change(fn)
onfocus获取焦点	focus(fn)
onblur失去焦点	blur(fn)
onkeydown键盘按键按下	keydown(fn)
onkeypress键盘按键按下、按住	keypress(fn)
onkeyup键盘按键弹起	keyup(fn)
onmousedown鼠标按键按下	mousedown(fn)
onmouseup鼠标按键弹起	mouseup(fn)
onmouseover鼠标移入	mouseover(fn)
onmouseout鼠标移出	mouseout(fn)
onmousemove鼠标移动	mousemove(fn)
onload加载完成	$(fn),$(document).ready(fn)

注意:
什么时候需要使用页面加载完成事件？

如果js功能代码，没有在页面的最后，而又需要在加载完成之后再执行：

建议把功能代码放到页面加载完成事件的响应行为里