$("div").html("hello world")
//相当于get出DOM中的DIV内容并innerHtml改写成hello world
var $p = $("#imooc");
//获取id为imooc的元素赋值给类数组变量$p
$p.html("hello world").css("color","red");
//给p的html内容赋值为hello world然后把css内容赋值一个color:red；
==========================================================
语法实例：
通过jQuery选取查询HTML元素并对他们执行操作
$(this).hide();
隐藏当前元素
$("#id").hide();
隐藏#id的元素
$("div").hide();
隐藏所有div元素
$(".class").hide();
隐藏所有.class元素
基础语法：
$(selector).action();
美元符定义jQuery，选择器查询元素，action执行动作。
文档就绪：
$(document).ready(function(){后续代码})
//文档全部加载结束后执行后续代码
选择器：
元素选择：直接选择元素
$("p")
$("p.intro")
$("p#demo")
属性选择:通过元素属性选择元素
$("[href]")选择所有有href值的元素
$("[href='#']")选择所有href值等于#的元素
$("[href!='#']")选取所有href值不等于#的元素
$("[href$='.jpg']")选取所有href值以.jpg结尾的元素
CSS选择器：选择元素的CSS
$("p").css("background-color","red");
//选择所有p元素的background-color并把值变为red
【更多选择器参考手册】
事件
$("button").click(function(){后续代码})
当button被click时触发事件，以执行。
部分其他js库也使用$来识别，jQuery使用noConflict()方法解决。
var jq=jQuery.noConflict();
则以后可疑使用jq来代替$以识别。
技巧：
把所有jQuery代码至于事件处理函数中
把所有事件处理函数至于文档就绪事件处理函数中
吧jQuery代码至于单独的js文件中
如果存在名称冲突则重命名jQuery库
$(document).ready(function)
文档就绪事件
$(selector).click(function)
单击事件
$(selector).dblclick(function)
双击事件
$(selector).focus(function)
焦点事件
$(selector).mouseover(function)
悬停事件
【更多事件参考手册】
方法：隐藏/显示
$(".hide").click(function(){$("p").hide();});
点击.hide时隐藏p
$(".show").click(function(){$("p").show();});
点击.show时显示p
$(selector).hide(speed,callback);
隐藏
$(selector).show(speed,callback);
显示
$(selector).toggle(speed,callback);
隐藏/显示
speed:slow/fast/*ms
callback:隐藏和显示完成后所执行的函数名
【更多效果参考手册】 $(selector).fadeIn(speed,callback);
淡入已隐藏元素
$(selector).fadeOut(speed,callback);
淡出可见元素
$(selector).fadeToggle(speed,callback);
淡入/淡出
$(selector).fadeTo(speed,opacity,callback);
opacity:不透明度，取值范围[0,1] $(selector).slideDown(speed,callback);
向下滑动出现
$(selector).slideUp(speed,callback);
向上滑动隐藏
$(selector).slideToggle(speed,callback);
上下滑动切换
$(selector).animate({params},speed,callback);
params:定义形成动画的css属性，动画将会由当前属性渐变成目标属性，可以同时使用多个属性。
可以使用animate来才做所有的css属性！！！
但所有属性名必须使用驼峰式命名法例如padding-left需要协作paddingLeft
色彩动画不包含在核心jQuery库中，使用需要下载color animations插件
animate()可以使用相对值使用自加自减符号，例如
$("div").animate({height:'+=150px',width:'-=150px'});
div将增高150px并变窄150px
animate使用预定于的值
可以将属性设置为toggle、show、hide等以对css属性进行默认的变换，例如
$("div").animate(height:'toggle');
将div的高度按照预设
共同学习，写下你的评论
评论加载中...
作者其他优质文章
