jQuery笔记
jQuery 一个javascript库 极大的简化了javascript编程
功能： HEML元素的选取和操作，CSS操作，HTML时间函数，javascript特效和动画， HTML DOM的遍历和修改， AJAX
引用：<script src="jquery-1.10.2.min.js"></script>
|
您是否很疑惑为什么我们没有在 <script> 标签中使用 type="text/javascript" ？ <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script> <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>第一个简单的jQuery程序</title> <style type="text/css"> div{ padding:8px 0px; font-size:12px; text-align:center; border:solid 1px #888; } </style> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("div").html("您好！通过慕课网学习jQuery才是最佳的途径。"); }); </script> </head> <body> <div></div> </body> </html> 我们要获取页面上id为imooc的p元素，然后给这个文本节点增加一段文字：“您好！通过慕课网学习jQuery才是最佳的途径”，并且让文字颜色变成红色。 |
|
<script type="text/javascript"> window.onload = function(){ // 通过原生JS语法获取id为imooc1的元素p var p = document.getElementById('imooc1'); // 将元素p在html中内容改变 p.innerHTML = 'P1：您好！通过慕课网学习jQuery才是最佳的途径'; // 将元素p的内容颜色改为红色 p.style.color = 'red'; } </script>
<!-- 使用jQuery语法 --> <script type="text/javascript"> $(document).ready(function() { /** * 通过jQuery语法获取id为imooc2的元素获得一个jQuery对象 * 调用该对象的html()方法进行更改内容 * 调用该对象的css()方法进行更改颜色样式 */ var $p = $('#imooc2'); $p.html('P2：您好！通过慕课网学习jQuery才是最佳的途径').css('color','red'); }); </script> |
var $div = $('div') //jQuery对象
var div = $div[0] //转化成DOM对象
div.style.color = 'red' //操作dom对象的属性
var div = document.getElementsByTagName('div'); //dom对象
var $div = $(div); //jQuery对象
var $first = $div.first(); //找到第一个div元素
$first.css('color', 'red'); //给第一个元素设置颜色
Id选择器 ： $（“#id”）
类选择器 ： $（“.class”）
所有选择器： $（“*”）
当前HTML元素：$（“this”）
第一个p标签元素： $（“p:first”）
第一个ul下的第一个li标签元素：$（“ul li：first”）
每个ul下的第一个li标签元素 ：$（“ul li：first-child”）
选择所有type=“button”的《input》和《button》元素：$（“button”）
jQuery事件：鼠标：click dblclick？ mouseenter（进入） mouseleave（离开） mouseout mouseover
键盘： keypress keydown keyup
表单： submit change focus blur
文档： load resize scroll unload
$("input").blur(function(){ $(this).css("background-color","#ffffff"); });
jQuery效果： 隐藏和显示
Hide（） show（）
$("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); });
jQuery toggle()
通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
jQuery Fading 方法
jQuery 拥有下面四种 fade 方法：
- fadeIn() 淡入
- fadeOut() 淡出
- fadeToggle() 切换
- fadeTo() 渐变不透明度 毫秒数+0-1中的不透明度
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
jQuery 滑动方法
通过 jQuery，您可以在元素上创建滑动效果。
slideDown()
slideUp()
slideToggle()
jQuery 动画 - animate() 方法
jQuery animate() 方法用于创建自定义动画。
语法：$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
$(“button”).click(function(){
$(“div”).animate({
left:’250px’,
opacity:’0.5’,
height:’150px’,
’150px’
});
});
jQuery stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
语法:
$(selector).stop(stopAll,goToEnd);
DOM = Document Object Model（文档对象模型）
DOM 定义访问 HTML 和 XML 文档的标准：
三个简单实用的用于 DOM 操作的 jQuery 方法：
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
jQuery attr() 方法用于获取属性值。
$("button").click(function(){
alert($("#runoob").attr("href")); });
jQuery 添加元素：
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
append/prepend 是在选择元素内部嵌入。
after/before 是在元素外面追加。
jQuery 删除元素：
remove(); -删除被选中的元素及其子元素
empty()；-从被选元素中删除子元素
jQuery 操作 CSS
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
如需设置多个 CSS 属性，请使用如下语法：
css("propertyname","value");
css({"propertyname":"value","propertyname":"value",...});
jQuery： parent（） 向上 直接父类
parents（） 所有父类
child（） 子类