jQuery基础使用(一)

(个人经验，仅供参考，错误之处，敬请谅解)

样式操作

jquery对象与dom对象

1. jquery对象转化为dom对象

   var $div = $(‘div’); //jQuery对象
   var div = $div.get(0);
   div.style.color = ‘red’;

2. dom对象转化为jquery对象

   var div = document.getElementsByTagName(‘div’);
   var $div = $(div);
   var $first = $div.first();

jquery 选择器

1. id选择器 $(’#id’)
2. 类选择器 $(’.class’)
3. 元素选择器 $(‘div’)
4. 全选择器 $(*)
5. 层级选择器 $(‘parent > children’) $(‘ancestor descendant’) $(‘prev+next’) $(‘prev~siblings’)
6. 基本筛选选择器 $(’:first’) $(’:last’) $(’:even’) $(’:odd’) $(’:eq()’) $(’:lt(index’) $(‘gt(index)’)
7. 内容筛选选择器 $(’:contains(text)’) $(’:has(selector)’) $(’:parent’) $(’:empty’)
8. 可见性筛选选择器 $(’:visible’) $(’:hidden’)
9. 属性筛选选择器 $("[attribute~=‘value’]") $("[attribute=‘value’]") $("[attribute^=‘value’]") $("[attribute $=‘value’]")
10. 子元素筛选选择器 $(’:first-child’) $(’:last-child’) $(’:only-child’) $(’:nth-child(index)’)
11. 表单元素选择器 $(’:input’) $(’:text’) $(’:radio’) $(’:reset’)
12. 表单元素对象属性筛选选择器 $(":enabled") $(":disabled") $(":checked") $(":selected")

jquery 属性名与样式

1. attr(attribute,value)、removeAttr(attribute)
2. html()、text()
3. val() 只能用来获取表单元素的值
4. addClass()、removeClass()、toggleClass()切换样式，有则删除，没有则增加（可加第二参数true，false）
5. css(‘attribute,’‘value’)、css({‘attr1’:‘value1’,‘attr2’:‘value2’})