jQuery学习笔记（一） 样式篇

引入

1. jQuery只是一个js脚本库，不需要安装，只要在标签中引入就可以

<script type="text/javascript" src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>

2. 2.x版本体量比较小，去掉了兼容IE9之前的内容

3. 原生js通过document.getElementById获取的DOM元素是一个dom对象，而jQuery通过$(’#myid’)获取到的是一个包含DOM对象信息的类数组元素（同document.getElementsByClassName).

4. jQuery声明变量一般用$开头，let $p = $(’#myid’); //

   
   $p.html(‘content of the div’);

5. if想要操作DOM对象的属性，可以把jQuery对象转换成DOM对象：
   a. 方法一：用下标 $('myid')[0].style.color = 'red'
   b.方法二：用jQuery的get()方法 $('div').get(0).style.color = 'red'

6. 把DOM对象转化成jQuery对象的方法：$(DOM对象)

7. 选择器id： $('#myid') class: $('.myclass') 元素: $('p') 全选择器：$('*')

IE会将注释节点视为元素，所以在IE中调用getElementsByTagName里面会包含注释节点，这个通常是不应该的

8. 层级选择器：
   

选择器siblings的查找范围必须是"prev元素"之后的元素，并且是同辈元素(即与"prev元素"有同一个的父元素)

9. 基本筛选选择器：
   
10. 内容筛选选择器：
    
11. 可见性筛选
    
12. 属性选择器
    
13. 子元素选择器
    
14. 表单元素选择器：
    
15. 表单对象属性选择器
    
16. this – 特殊选择器
    this在js中指的是当前的上下文对象，就是方法/属性的所有者。
    let $this = $(this); // 把this加工成jQuery对象
17. 操作attribute（特性、属性）的方法：
    DOM中有三个基本方法：getAttribute() setAttribute() removeAttribute() // 但是有兼容问题
    jQuery中只有两个：attr() removeAttr() // 而且没有兼容问题

$("input:first").attr('value') // 获取第一个input的属性‘value’的值
$("input:eq(1)".attr('value', 'newvalue'); // 获取第二个input，并设置属性‘value’的值为‘newvalue’
$("input:first").attr('value', (i,val) => {
	return '通过function来设置属性value的值' + val);
})
$('#myinput').attr({'attrname1': 'attval1', 'attname2': 'attval2'}); // 设置多个属性
$('#myinput').removeAttr('value'); // 删除‘value’属性

注意attribute和property的区别：property是指DOM元素作为对象附加的内容，例如tagName，nodeName等，要用.prop()获取

18. html() 和 text()

$('.myclass').html(); // 返回的是`$(.myclass)`获取的元素集合中第一个元素的HTML内容
$('.myclass').html('<p>new value</p>'); // 会重新设置获取到所有元素（class为myclass元素）的html内容为p元素中的‘new value’
$('.myclass').html(() => {
	return 'new value' // 通过function来重置html内容
});
$('.myclass').text(); // 返回的是`$(.myclass)`获取的所有元素包括他们的后代的合并文本
$('.myclass').text('<p>new value</p>'); // 会重新设置获取到所有元素内容的文本为'<p>new value</p>'
$('.myclass').text(() => {
	return 'new value' // 通过function来重置text内容
});

html() 针对的是整个html内容包括标签，text()获取到的是文本内容
html(val)和text(val)的区别是对html标签是否识别： ’< p >new value< /p >'text会把整体渲染为一个字符串，而html会渲染成p标签。

19. val() 只能用于处理表单元素 – input、select、textarea

$('input').val();  // 获取到集合中第一个元素的value值
$('input').val(value); // 设置匹配到所有元素的value
$('input').val(function() {}); // 通过函数赋值

当对象是select元素，没有选项被选中，返回null
当对象select元素有multiple属性，并且至少有一个被选中，返回一个数组（空也为null）

20. 动态增加、删除class

$('div').addClass(‘classname1 classname2 classname3'); // 给所有匹配到的元素添加所有的class
.removeClass([classnames]); // 同addclass

21. 样式切换 .toggleClass(‘newclass’); // 匹配的元素有‘newclass’就删除，没有就增加；
22. 样式操作 .css()

$('.myclass').css('width'); // 585px -- 匹配的第一个元素的width属性
$('.myclass').css(['width', 'height']); // 传数组，返回的是一个对象 {width: "585px", height: "21px"}
$('.myclass').css("width",50); //匹配到的所有元素的对应样式属性都会改变
.css({ // 也可以是一个对象，改变多个样式属性
    'font-size'        :"15px",
    "background-color" :"#40E0D0",
    "border"           :"1px solid red"
})

取值时，jQuery颜色统一用rgb，尺寸用px
.css()支持驼峰或小写-
.css(‘width’: 50) 和 .css(‘width’, ‘50px’) 等价

23. 属性与样式元素的数据存储 .data

$('#myh2').data(); // {name: "hh"}
$('#myh2').data('name'); // hh
$('#myh2').data('newdataname', 'newdatavalue'); // 给data添加新的‘newdataname’


// data()获取单个属性
console.log($( "body" ).data( "foo" ));
 
// 获取所有属性
console.log($( "body" ).data());
 
// 删除属性
$( "body" ).removeData("foo");

// 批量修改属性
$( "body" ).data({"new" : 123, "name":"yy", "sex" : "female"});

// 试图使用jQuery修改name属性
	$("#b").data("name","newb"); // 不会修改DOM
	
	// 使用DOM修改
	$("#b")[0].dataset.hobby = "run"; // 会修改DOM

使用jQuery修改属性只是在内存中的操作，并不会刷新dom。但是通过js中的dataset修改时候，会刷新DOM，这是两者最大的不同。