$(document).ready(function(){ // 开始写 jQuery 代码... });
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。
jquery选择器
选择器有三种
$("p")元素选择器
$("#test") id选择器
$(".test") 类选择器
一些扩展
$("*") 选取所有元素
$(this)选取当前的元素
$("p.intro")选取class为intro的p元素
$("p:first")选取第一个p元素
$("ul li:first")选取第一个
- 元素的第一个
- 元素
$("ul li:first-child")选取每个
- 元素的第一个
- 元素
$("[href]")选取带有 href 属性的元素
$("a[target='_blank']") 选取所有 target 属性值等于 "_blank" 的 元素
$("a[target!='_blank']") 选取所有 target 属性值不等于 "_blank" 的 元素
jquery事件
$("p").click(function(){ // 动作触发后执行的代码!! }); 点击事件
dblclick（）双击事件
mouseenter（）鼠标指针进入
mouseleave() 鼠标指针离开
mousedown()鼠标按下
mouseup()鼠标松开
hover() 鼠标悬停
focus() 元素获得焦点
blur()元素失去焦点
jquery效果
显示和隐藏
$("p").show();
hide()隐藏
show()显示
hide和show（）中参数为（speed，速度变化曲线linear，callback（）{}）
toggle（）切换显示和隐藏
淡入和淡出
fadeIn（）淡入
fadeOut（）淡出
fadeToggle()切换淡入和淡出
括号中的参数为（speed,callback） speed可以为fast slow 或者ms为单位的时间
滑动
$("#panel").slideUp();
slideDown() 向下滑动展示
slideUp()向上滑动展示
slideToggle（）切换滑动展示
()中的参数（speed,callback）
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
动画
$(selector).animate({params},speed,callback);
比如
$("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' });
$("div").stop()停止动画
jquery方法链
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
浏览器就不必多次查找相同的元素。
如需链接一个动作，您只需简单地把该动作追加到之前的动作上。
先会变为红色，然后向上滑动，再然后向下滑动：
jquery的html
jquery捕获
text()获取文本
html()获取富文本
val()获取输入字段的值
attr("href")获取链接中 href 属性
jquery添加元素
$("p").append("追加文本"); 在被选元素的结尾插入内容。
$("p").prepend("在开头追加文本");在被选元素的开头插入内容。
例如
function afterText(){ var txt1="I "; // 使用 HTML 创建元素 var txt2=$("").text("love "); // 使用 jQuery 创建元素 var txt3=document.createElement("big"); // 使用 DOM 创建元素 txt3.innerHTML="jQuery!"; $("img").after(txt1,txt2,txt3); // 在图片后添加文本 }
jquery删除元素
如：$("#div1").remove();
remove();删除被选元素及其子元素
empty();删除被选元素的子元素
（）中可以加参数 如
$("p").remove(".italic");删除 class="italic" 的所有
元素：
jquery的css类
$("div").addClass("important blue"); 向不同的元素添加 class 属性
$("h1,h2,p").removeClass("blue");删除指定的 class 属性
$("h1,h2,p").toggleClass("blue");添加/删除类的切换操作
jquery的css方法
$("p").css("background-color");返回首个匹配元素的 background-color 值
$("p").css("background-color","yellow");为所有匹配元素设置 background-color 值
$("p").css({"background-color":"yellow","font-size":"200%"});设置多个css属性
jquery的尺寸
$("#div1").width()返回元素的宽度（不包括内边距、边框或外边距）。
$("#div1").innerWidth()方法返回元素的宽度（包括内边距）。
$("#div1").outerWidth()方法返回元素的宽度（包括内边距和边框）。
jquery遍历祖先
遍历祖先
$("span").parent();返回被选元素的父元素
$("span").parents();返回被选元素的所有祖先元素
$("span").parents("ul");返回所有 元素的所有祖先，并且它是
- 元素
$("span").parentsUntil("div");返回介于 与
元素之间的所有祖先元素返回顶部暗黑模式遍历后代
$("div").children();返回被选元素的所有直接子元素
$("div").children("p.1");返回类名为 "1" 的所有
元素，并且它们是
的直接子元素$("div").find("span");返回属于
后代的所有 元素$("div").find("*");返回
的所有后代遍历同胞
$("h2").siblings("p");返回属于
的同胞元素的所有
元素
$("h2").next();返回
的下一个同胞元素
$("h2").nextAll();返回
的所有跟随的同胞元素
$("h2").nextUntil("h6");返回介于
与
元素之间的所有同胞元素：
过滤
$("div p").first();选取首个
元素内部的第一个元素
$("div p").last();选择最后一个
元素中的最后一个元素
$("p").eq(1);选取第二个
元素（索引号 1）：
$("p").filter(".url");返回带有类名 "url" 的所有
元素
$("p").not(".url");返回不带有类名 "url" 的所有
元素
ajax
$.get
$.get("demo_test.php",function(data,status){ alert("数据: " + data + "\n状态: " + status); });
$.post
$.post("/try/ajax/demo_test_post.php", { name:"菜鸟教程", url:"http://www.runoob.com" }, function(data,status){ alert("数据: \n" + data + "\n状态: " + status); });
$("#div1").load("demo_test.txt #p1"); 把 "demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的
本文由 用户 于 2024-02-01 发布在 金钥匙，如有疑问，请联系我们。
本文链接：https://www.51969.com/post/17823579.html
- 元素
发表评论