jQuery对象和DOM对象相互转化
1.DOM转换为jQuery对象 $obj = $(domobj)
2.jQuery对象转为DOM对象
var domobj =$obj.get(0);
或者 var domobj = $obj[0];
DOM选择函数
getElementById()
getElementsByTagName()
getElementsByName()
getAttribute()
CSS选择器
浏览器全部支持:
元素选择器 E {}
ID选择器 #id {}
类选择器 (E) .className {} (括号表示可选)
群组选择器 E1,E2,E3 {}
后代选择器 E1 E2 E3 {}
通配符 * {}
部分浏览器支持:
伪类选择器 E:PseuoElements {}
子选择器 E > F {}
临近选择器 E + F {}
属性选择器 E [attr] {}
css应用方式
1.行间样式 直接将样式书写在元素的 style 属性中,无法复用,且不符合表现和结构相分离的设计原则
2.内部样式 样式书写在网页的style标签中,其他网页无法复用
3.外部样式 样式内容书写在css文件中,使用style标签导入。
jQuery选择器
1.基本选择器
$('#id') id选择器
$('.className') 类选择器
$('E') 元素选择器
$('*') 通配符,匹配所有元素
$('select1,select2,select3,,selectN') 返回选择结果的集合。
2.层次选择器
$('E1 E2' ) 选取E1元素里面的所有E2元素
$('E1 > E2') 选取E1元素直接子元素中的E2元素
$('E1 + E2') 选取紧接在E1元素之后的一个E2元素
$('E1 ~ E2') 选取 E1元素相邻的所有E2元素
3.过滤选择器
过滤选择器分为四种:
3.1基本过滤
:first 第一个
:last 最后一个
:not(selector) 去除所有与选择器匹配的元素
:even 选取索引是偶数的所有元素,索引从0开始
:odd 选取索引是奇数的所有元素,索引从0开始
:gt(index) 下标从0开始,取索引大于index的元素
:lt(index) 取索引小于index的元素
:eq(index) 取索引等于index的元素
:header 选区所有的标题,h1,h2,h3等
:animated 取当前真在执行动画的元素
:focus 取当前获取焦点的元素
3.2内容过滤
:contains(text) 选取含有文本内容"text"的元素
:empty 选取不包含资源元素或者文本的空元素
:has(selector) 选取含有选择器所匹配元素的元素
:parent 选取含有子元素或者文本的元素
3.3可见性选择器
:hidden 选取所有不可见的元素
:visible 选取所有可见的元素
3.4属性过滤选择器
[attribute] 选取含有此属性的元素
[attr =value] 选取属性值等于value的元素
[attr !=value] 选取属性值不等于value的元素
[attr ^=value] 选取属性值以value开头的元素
[attr $=value] 选取属性值以value结尾的元素
[attr |=value] 选取属性值等于value或者以value为前缀(后接-连接符)的元素
[attr *=value] 选取属性值包含value的元素
[attr ~=value] 选取属性用空格分隔的值包含value的元素
[attr1][attr2]...[attrN] 合并的复合选择器
3.5子元素选择器 索引值从1开始
:nth-child(even) 索引值为基数的子元素
:nth-child(odd) 索引值为偶数的子元素
:nth-child(2) 索引值为2的子元素
:nth-child(3n) 索引值为3的倍数的子元素
3.6表单对象过滤选择器
:enabled 选取所有可用元素
:disabled 选取所有不可用元素
:checked 选取所有被选中的元素(单选框,复选框)
:selected 选取所有被选中的元素(下拉列表)
4.表单选择器
:input 获取所有的input 、textarea 、select、button 元素
:text 选取所有的单行文本框
:password 选取所有的密码框
:radio 选取所有的单选框
:checkbox 选取所有的多选框
:submit 选取所有的提交按钮
:image 选取所有的图片按钮
:reset 选取所有的重置按钮
:button 选取所有的按钮
:file 选取所有的文件上传域
:hidden 选取所有的不可见元素