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("这是从新添加的新内容,原来的内容已经被删除了");