JQuery知识点

jQueqry01
--------------------------------------------------------------------------------------------------
1）$(function(){
//相当于windows.onload,等待文档加载完毕后，再执行

}
)

 

2）jquery中的时间添加，全部采用现代时间添加，一个事件可以绑定多个函数。

3）

$("#sakButton"); //查找id为sakButton的对象，相当于document.getElementById("askButton");

 

4）js中函数名，不要和元素的id同名，也不要定义为clickchange这样的事件名同名。也不要定义为dic、span这样的元素名。

 

5）dom转为jquery对象

var jq=$(obj);

 

6）jquery转为dom

var jq=$("#div1");

var obj=$(jq)[0];

 

重点：

数组元素和事件中的this都是Dom对象。

jQuery02
--------------------------------------------------------------------------------------------------

一：jQuery对象和Dom对象互换：
1.Dom转为jQuery：
var obj=document.getElementById("div1");
//dom对象转化为jQuery
var jq=$(obj);
alert(jq.html());

2.jQuery转为Dom：
var jq=$("#div1");
var obj=$(jq)[0];
alert(obj.innerHTML);

二：Jquery元素选择器：
Dom: var divs=document.getElementById("div1"); //Dom查找元素
div1.getElmentsByTagName("label"); //Dom查找子元素
jQuery: var msg=$("#div1 label"); //jQuery查找元素
var msg=$("#div1").find("label"); //jQuery查找子元素

1.取得数据第几个元素，返回dom对象。
alert($("#div1 label")[1].innerHTML);

2.数组长度
alert($("#div1 label").size());

3.遍历数组
$("#div1 label").each(function(index,data){
//index为循环变量，data为数组中的Dom元素
//得到原始Dom对象
alert(this.innerHTML);
});

三：jQuery元素设置
1.设置、获得标签中的内容（相当于innerHTML）
$("#div1").html("<p>aaa</p>"); //设置内容
alert($("#div1").html()); //获得内容

2.设置、获得value值
$("#userName").val("张三"); //设置value值
alert($("#userName").val()); //获得value值

3.显示、隐藏元素
$("p").show("slow"); //附加动画，显示元素
$("p").hide("slow"); //附加动画，隐藏元素

jQuery总结
--------------------------------------------------------------------------------------------------

1、jquery 特点：
jquery是一款免费且开放源代码的javascript代码库，引入了全新的DOM选择器引擎，同时提供UI库组件。
jquery优点：
轻量级
强大的DOM选择器，简化javascript和ajax开发。
解决不同浏览器兼容问题
提供UI库组件，让页面开发更方便。

2、导入jquery:
<script src="js/jquery-1.10.2.js"></script>

3、Jquery事件添加，全部采用现代事件添加方式，一个事件可以绑定多个函数
$("#mydiv").click( function () {

}

4、$(function(){
……
}) 文档加载完毕后，再执行，相当于window.onload

5、jquery对象和dom对象互换。jquery对象和DOM对象方法是不一样的，使用前需要注意是什么对象
dom转为jquery
var obj = document.getElementById("div1");
var jq = $(obj);
jquery转为dom
var jq = $("#div1");
var obj = $(jq)[0];

6、选择器：
id选择器： var msg =$("#div1").html(); //得到id为div1的元素，标签中间的内容

子元素选择器：（相当于getElementsByTagName），找到元素指定标签子元素集合
var msg = $("#div1 label");
var msg = $("#div1").find("label");
alert($("#div1 label")[1].innerHTML); //注意取出的数组元素为DOM对象

类选择器：$("#div1 .mm").html();//得到id为div1的元素中，所有class="mm"元素集合

属性选择器： $('#selectObj option:selected') 选择下拉框中所有选中项

7、设置元素属性
$("#showImg").attr("src","1.jpg");

8、设置元素样式
$("#div1").css(
{border:'5px solid #9f0',backgroundColor:'yellow'})

9、设置获得元素内容
设置、获得标签中的内容（相当于innerHMTL）
$("#div1").html("<p>aaa</p>");//设置内容
alert($("#div1").html());//获得内容

设置、获得value值
$("#userName").val("张三");//设置value值
alert($("#userName").val());//获得value值

10、遍历数组
$("#div1 label").each(function (){
//得到原始DOM对象
alert(this.innerHTML);
});

11、显示、隐藏元素
$("p").show("slow");//附加动画，显示元素
$("p").hide("slow");//附加动画，隐藏元素

12、DOM操作
元素添加
$("#m1div").append("<img src='1.jpg'>");

元素移除
//从父容器中移除id为 p1的元素
$("#p1").remove();
//从mydiv元素中移除所有样式为mm的元素
$("#mydiv").remove(".mm");

元素替换
//将所有的p元素替换为b元素
$("p").replaceWith("<b>Paragraph. </b>");

元素下一个元素
$("#p1").next();

元素上一个元素
$("#p1").prev();

元素父元素
$("#p1").parent()