jquery阅读笔记

jQuery读书笔记：

1:jQuery对象中无法调用dom对象中的任何方法，同样在dom对象中也无法调用jquery中的任何方法。

2：将jQuery对象转换为dom对象,注意：jQuery对象是一个特殊的数组对象，及时只有一个元素，任然第一个数组。
方法一：
var $c=$("#div");//获取jquery对象c
var c=$c[0]; //将jquery对象$c转换为dom对象
方法二：
var $c=$(#"div");
var c=$c.get(0);

3：将dom对象转换为jquery对象
var c=document.getElementById("div"); ///获取dom对象
var $c=$(c); //将dom对象c转换为jquery对象

4：javaScript与jquery直接写的区别
定位元素：
document.getElementById("div")

$("#div")

注意：JavaScript返回的结果是这个元素，而jquery返回的结果是一个对象

改变内容：
div2.innerHTML="love";

div2.html("love");

显示和隐藏：

div2.style.display="none";
div2.style.display="block";

div2.hide();
div2.show();
或者：
div2.toggle(); //在显示和隐藏之间切换
为表单赋值：
div2.value="love";

div2.val("love");

设置对象不可用:

div2.disabled=true;

div2.attr("disabled",true);

5:jquery的选择器

标签选择器：$("div"),$("li"")......
id选择器：$("#div2");
类选择器：$(".div2");
在类选择器中间可以使用，将多个选择器组合，实现对其的控制
*是对所有元素的选择


6：层次选择器
后代选择器：ancestor descendant 注意：可以是孩子，孙子...... 举例：$(".bg div"） 选择css为类的bg的元素后面的所有的<div>元素

父子选择器：parent>child 注意：只能是直接的孩子 举例:$(".a>li")选择css类中的a后面的元素中的直接子节点<li>对象

相邻选择器：prev+next 注意：这两个元素是同一个级别的，但是只能是后面的一个元素 举例：$("#a+img")选择对象id为a的元素后面的img元素
除了可以使用：$("#a+li").css("color","red");
还可以：$("#a").next().css("color","red");

平级元素：prev~siblings 注意：siblings是一个过滤器 举例：$("some~[title]")选择id为some的对象后面所有带有title属性的元素
除了可以使用：$("#a~li").css("color","red");
还可以:$("#a").nextAll().css("color","red");
如果想要将前面的一个同级元素都要设置，那可以为：
$("#a").siblings().css("color","red");


注意：在不管是后代，父子，平级，相邻选择器用上面的方法都不对他自身进行改变

7：当让后面的还有过滤选择器、内容选择器、表单选择器。请参见jquery从零开始学 刘鑫编著（清华大学出版社）的30到44页



8：使用jquery来操作dom

获取元素的属性
$(selector).attr(attribute);
举例：$("#hello").attr("title"); //获取id为hello的title属性
又例如$(img).attr("src"); //获取img的src属性

可以通过jQuery中定义一个变量例如（str），然后通过$("#sss").append(str);在#sss所在的div中显示

同样也可以设置元素的属性：
$(selector).attr(attribute，value);

举例$("#hello").attr("title"，"你好")


修改元素的内容：

首先可以通过下面的3个方法用来获取html元素中内容
text（）//设置或者返回所选元素的文本内容
html（）//设置或者返回所选元素的内容（包括html标记）（解析后的内容）
val（） //设置返回表单字段的值


动态创建内容：
append（）：在被选元素的结尾插入内容
prepend（）：在被选元素的开头插入内容
after():在被选元素之后插入内容
before（）：在被选元素之前插入内容

动态插入节点：
append（）在被选元素的结尾（任然在内部）插入内容
appendTo（）在被选元素的结尾（任然在内部）插入内容
prepen（）在被选元素的开头（任然在内部）插入内容
prependTo（）在被选元素的开头（任然在内部）插入内容
after（） 在被选元素之后插入内容
before（） 在被选元素之前插入内容
insertBefore（）把匹配的元素插入到另一个指定的元素的集合的前面
insertAfter（）把匹配的元素插入到另一个指定的元素的集合的后面


那么append与appendTo有什么差别呢
从后面的To大致可以看出是给或者到的意思，其实就是内容和选择器之前的差别
举例：
$("选择器").append("内容");
$("内容").appendTo("选择器");
具体$("#div2"）.append("<b>加油</b>")
$("<b>加油</b>"）.appendTo("#div2")

其他的同理可得

动态删除节点
remove（）将节点从dom元素中的树的移除，但是会返回一个指向dom元素的引用，因此它并不是真正地将jquery引用道到的元素引用对象的删除，而是可以通过这个引用来继续操作元素

remove（）例如：var id2=$("#div2").remove(); //移除dom对象
$("body").append(id2); //重新添加已经被移除的dom对象


empty（）该方法也不会删除节点，只是清空节点中的内容，dom元素仍然保持在dom元素数中
empty（）例如：var id2=$("#div2").empty();//清楚dom对象
//从新添加dom对象的内容
id2.append("这是从新添加的新内容，原来的内容已经被删除了");