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()

原文地址:https://www.cnblogs.com/newcode/p/9229980.html