jQuery学习笔记（一）

jQuery是Javascript的一个库

jQuery是由三个人写出来的，建议多看一下源代码

选择器:id .class element
$对象是获取页面上的元素
id选择器:通过页面元素的id属性定位页面的一个元素
id封装的目的是简化document.getElementById()
语法:$('id')
element标签选择器,通过页面上的元素名称获取一组元素
目的是简化document.getElementsByTagName()
语法:$("element")

测试id选择器
window.οnlοad=function(){
$("#myDiv").innerHTML="<a href='http://www.baidu.com'>百度</a>";
}
测试class类选择器 语法$(".claNm");
console.log($(".myDiv"));
测试
window.οnlοad=function(){
var divs=$("div");
console.log(divs);
for(var i=0;i<divs.length;i++){
var div=divs[i];
div.style.width="100px";
div.style.height="100px";
div.style.border="1px solid red";
}
}
返回浏览器的相关信息
window.alert(window.navigator.userAgent);
我的谷歌浏览器返回
Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36


window.οnlοad=function(){
// $("#myDiv").append($("<div>hello Jesse</div>"));
 
$("<div>hello Jesse</div>").appendTo($('#myDiv'));
}
分析：slideUp为例子
1，计时器setInterval，默认为300
$("").slideUp();
$("").slideUP(1000);
2，修改高度
2.1修改之前记录元素的高度
2.2，修改高度
2.3处理元素的内容与元素宽高之间的关系
3，隐藏元素
3，隐藏元素后，将之前保存的高度在设置给元素
slideDown
1，获取元素，并且取得高度
2，将高度设置为0，并且显示
3，通过计时器，将元素的告诉捉奸增加并且显示
什么是jQuery
jQuery是一个优秀的javascript框架，轻量级js库
兼容css3各种浏览器
使用户更方便的处理html，events，实现动画效果
并且方便的为网站提供AJAX交互
可以使html野蛮保持代码和html内容分离
从jq2.0开始不再支持IE678
jQ核心理念是write less，do more 少写多做
利用选择器定位节点
<div id="d1">hello</div>
选择器定位 $("div") 操作节点$("div").css("font-size","30px")
选择器定位$("#d1")  操作节点$("#d1").css("font-size","30px")