jquery 元素选择器
jQuery使用CSS选择器来选取 HTML 元素
$("p") 选取 <p> 元素
$("p.intro") 选取所有 class="intro" 的 <p> 元素
$("p#demo") 选取所有 id="demo" 的 <p> 元素
jquery 属性选择器
jQuery 使用XPath 表达式来选择带有给定属性的元素
$("[href]") 选取所有带有 href 属性的元素
$("[href='#']") 选取所有带有 href 值等于"#" 的元素
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素
jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性
实例
$("p").css("background-color", "red");
$(this) 当前的 HTML 元素
$("p") 所有的 <p> 元素
$("p.intro") 所有 class="intro" 的 <p> 元素
$(".intro") 所有 class="intro" 的元素
$("#intro") 所有 id="intro" 的元素
$("ul li:first") 没有<ul> 的第一个 <li> 元素
$("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的href
$("div#intro .head") id="intro"的<div> 元素中所有 class="head"的元素
jquery事件
jQuery事件函数
实例
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
jquery单独文件中的函数
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
jquery 名称冲突
var jq = jQuery.noConflict() 使用自己的名称比如jq 来代替 $符号
$(document).ready(function(){}); 将函数绑定到文档的就绪事件(加载时)
$(selector).click(function(){});
$(selector).dbclick(function(){});
$(selector).focus(function(){});
$(selector).mouseover(function(){});
jquery隐藏/显示
hide()/show()
$(selector).hide(speed, callback);
$(selector).show(speed, callback);
speed 参数规定隐藏/显示的速度,可取值"slow", "fast", 毫秒数
callback 参数是隐藏或显示完成后执行的函数名称。
toggle() 切换hide()和show()方法
toggle(speed, callback);
jquery效果淡入浅出
fadeIn()/fadeOut()/fadeToggle()/fadeTo()
fadeIn(speed, callback)淡入已隐藏的元素
fadeOut(speed, callback)淡出可见元素
fadeToggle(speed,callback) 切换fadeIn() 和 fadeOut()
fadeTo(speed, opacity, callback)允许渐变为给定的不透明度opacity(值介于0和1之间)
jQuery效果滑动
slideDown(speed, callback)向下滑动元素
slideUp(speed, callback)
slideToggle(speed, callback) 切换
jquery效果动画
animate({params}, speed, callback)
params 参数定义形成动画的CSS 属性
操作多个属性
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px',
});
});
默认情况下,所有 HTML 元素的位置都是静态的,并且无法移动。如需对位置进行操作,
记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。
jquery stop()方法用于停止动画或效果
$(selector).stop(stopAll, goToEnd);
stopAll 参数规定是否应该清除动画队列默认false
goToEnd 参数规定是否立即完成动画
jquery Chaining方法链接
$("#p1").css("color", "red")
.slideUp(2000)
.slideDown(2000);
jQuery HTML
jQuery获得内容和属性
text()-设置或返回所选元素的文本内容
html()-设置或返回所选取元素的内容(包括HTML标记)
val()-设置或返回表单字段的值
获取属性 attr()
$("button").click(function(){
alert($("#w3s").attr("href"));
});
设置内容和属性
text()-设置或返回所选元素的文本内容
html()-设置或返回所选元素的内容(包括HTML标记)
val()-设置或返回表单字段的值
实例
$("#btn1").click(function(){
$("#test1").text("hello world!");
});
$("#btn2").click(function(){
$("#text2").html("<b>hello world!</b>");
});
$("#btn3").click(function(){
$("#text3").val("Dolly Duck");
});
$("#button").click(function(){
$("#w3s").attr("href", "http://www.baidu.com");
});
添加
append()-在被选取的元素结尾插入内容
prepend()-在被选取的元素开头插入内容
after()-在被选取的元素之后插入内容
before()-在被选取的元素之前插入内容
删除
remove()
empty()
jquery获取并设置CSS类
操作CSS
addClss()-向被选取元素添加;一个或多个类
removeClass()
toggleClass()
css()-设置或返回样式属性
实例
返回CSS属性的值
$("p").css("background-color");
设置CSS属性
$("p").css("background-color","yellow");
设置多个CSS属性
$("p").css({"background-color": "yellow", "font-size": "200%"});
jquery尺寸
width(); -设置或返回元素的宽度(不包括内边距, 边距或外边距)
height();
innerWidth(); -(包括内边距)
innerHeight();
outerWidth(); -(包括内边距和边框)
outerHeight();
jquery遍历 祖先
parent() 返回被选元素的直接父元素
parents() 返回被选元素的所有的祖先元素
parentUtil() 返回介于两个给定元素之间的所有祖先元素
实例
$(document).ready(function(){
$("span").parentUtil("div"); //返回介于<span>与<div>元素之间的所有祖先元素
});
jquery遍历 后代
children() 返回被选元素的所有直接子元素
find() 返回被选元素的后代元素,一路向下直到最后一个元素
实例
$(document).ready(function(){
$("div").children();
});
$(document).ready(function(){//带参数
$("div").children("p.className"); //返回类名为"className" 的所有<p> 元素,并且他们是<div>的直接子元素
});
$(document).ready(function(){
$("div").find("span"); //返回属于<div>后代的所有<span>元素
});
$("div").find("*"); //返回<div> 的所有后代
jquery遍历 同胞(水平遍历)
siblings() 返回被选元素的所有同胞
next() 返回下一个同胞元素
nextAll() 返回被选元素所有跟随的同胞元素
nextUntil() 返回介于两个给定参数之间的所有跟随的同胞元素
prev()
prevAll()
preUntil()
实例
$("h2").siblings();
$("h2").siblings("span"); //返回<h2>同胞元素的所有<p>元素
$("h2").nextUtil("h6"); //返回介于<h2>与<h6>元素之间的所有同胞元素
jQuery遍历 过滤
first() 返回被选元素的首个元素
last()
eq() 返回被选元素中带有指定索引号的元素
filter() 允许按照给定标准,不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回
not() 返回不匹配标准的所有元素与filter()相反
实例
$("div p").first(); //返回<div>内部的第一个<p>元素
$("div p").last();
$("p").eq(1); //选取第二个<p>元素(索引号1)
$("p").filter(".intro"); //返回带有类名"intro"的所有<p>元素
$("p").not(".intro"); //返回不带有类名"intro"的所有<p>元素
jquery AJAX
是与服务器交换数据的艺术,实现局部刷新
load()方法 从服务器加载数据,并把返回的数据放入被选元素中
$(selector).load(URL, data, callback);
//callback 参数是load()方法完成后所执行的回调函数
可以将jquery选择器添加到URL参数
$("#div1").load("demo_test.txt #p1"); //把"demo_test.txt"内容加载到指定的<div>元素中
回调函数可以设置不同的参数
responseTxt -包含调用成功时的结果内容
statusTxt -包含调用状态
xhr -包含XMLHttpRequest对象
实例
$("button").click(function(){
$("#div1").load("demo_test_txt", function(responseTxt, statusTxt, xhr){
if(statusTxt == "success")
alert("外部内容加载成功!");
if(statusTxt == "error")
alert("Error:" + xhr.status + ":" + xhr.satusText); //显示错误信息
});
});
get()和post()方法用于通过HTTP GET或POST 请求从服务器请求数据
GET - 从指定的资源请求数据
POST - 向指定资源提交要处理的数据
$.get(URL, callback); 通过HTTP GET 请求从服务器上请求数据
$.post(URL, data, callback); 通过HTTP POST 请求从服务端请求数据
data : 连同请求一起发送的数据
$("button").click(function(){
$.post("demo_test_post.asp",
{
name = "Donald Duck",
city = "Duckbury";
},
function(data, status){
alert("data:" + data + "\n status:" + status );
}
);
});
jQuery 学习笔记
最新推荐文章于 2020-07-18 20:36:54 发布