jquery
原克技术
这个作者很懒,什么都没留下…
展开
-
jQuery 遍历过滤
//三个最基本的过滤方法是:first(), last() 和 eq(),它们允许您基于其在一组元素中的位置来选择一个特定的元素。//其他过滤方法,比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。$(document).ready(function(){ $("div p").first().css("background-color","yellow");});$(document).ready(function(){ $("div p").last原创 2020-12-30 00:50:33 · 179 阅读 · 1 评论 -
jQuery 遍历同胞元素
siblings()next()nextAll()nextUntil()prev()prevAll()prevUntil()//siblings() 方法返回被选元素的所有同胞元素。$(document).ready(function(){ $("h2").siblings().css({"color":"red","border":"2px solid red"});});$(document).ready(function(){ $("h2").siblings("p"原创 2020-12-30 00:47:44 · 131 阅读 · 0 评论 -
jQuery 遍历后代元素
//children() 方法返回被选元素的所有直接子元素。$(document).ready(function(){ $("div").children().css({"color":"red","border":"2px solid red"});});$(document).ready(function(){ $("div").children("p.1").css({"color":"red","border":"2px solid red"});});//find() 方法原创 2020-12-30 00:44:48 · 206 阅读 · 0 评论 -
jQuery 遍历祖先元素
//parent() 方法返回被选元素的直接父元素。$(document).ready(function(){ $("span").parent().css({"color":"red","border":"2px solid red"});});//parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。$(document).ready(function(){ $("span").parents().css({"color":"原创 2020-12-30 00:42:06 · 239 阅读 · 0 评论 -
jQuery元素尺寸的操作
//width()//height()//innerWidth()//innerHeight()//outerWidth()//outerHeight()//jQuery width() 和 height() 方法$(document).ready(function(){ $("button").click(function(){ var txt=""; txt+="Width of div: " + $("#div1").width() + "</br>";原创 2020-12-29 10:06:47 · 193 阅读 · 0 评论 -
jq获取并设置css类
//addClass() - 向被选元素添加一个或多个类//removeClass() - 从被选元素删除一个或多个类//toggleClass() - 对被选元素进行添加/删除类的切换操作//css() - 设置或返回样式属性$("button").click(function(){ $("h1,h2,p").addClass("blue"); $("div").addClass("important");});$("button").click(function(){ $("原创 2020-12-29 10:02:39 · 201 阅读 · 0 评论 -
jq中remove的使用
$(document).ready(function(){ $("button").click(function(){ $("#div1").remove(); });});//remove() 方法也可接受一个参数,允许您对被删元素进行过滤$(document).ready(function(){ $("button").click(function(){ $("p").remove(".italic"); });});...原创 2020-12-29 09:57:46 · 676 阅读 · 0 评论 -
利用jQuery添加元素
//append() - 在被选元素的结尾插入内容//prepend() - 在被选元素的开头插入内容//after() - 在被选元素之后插入内容//before() - 在被选元素之前插入内容//append() 方法在被选元素的结尾插入内容$(document).ready(function(){ $("#btn1").click(function(){ $("p").append(" <b>Appended text</b>."); });原创 2020-12-29 09:55:30 · 116 阅读 · 0 评论 -
jq获取元素的内容和属性
//获得和设置内容使用 text()、html() 以及 val()//text()、html() 以及 val() 的回调函数$(document).ready(function(){ $("#btn1").click(function(){ $("#test1").text(function(i,origText){ return "Old text: " + origText + " New text: Hello world! (index: " + i + ")"原创 2020-12-29 09:49:43 · 462 阅读 · 0 评论 -
动作的连续
<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function() { $("button").click(function(){ $("#p1").css("color","red").slideUp(2000).slideDown(2000);原创 2020-12-29 09:41:47 · 81 阅读 · 0 评论 -
hide动作完成后再执行一个动作
<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("button").click(function(){ $("p").hide(1000,function(){ alert("The paragra原创 2020-12-29 09:39:58 · 197 阅读 · 0 评论 -
jQuery 效果 - 动画animate的使用
//语法:$(selector).animate({params},speed,callback);//参数说明://必需的 params 参数定义形成动画的 CSS 属性。//可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。//可选的 callback 参数是动画完成后所执行的函数名称。$(document).ready(function(){ $("button").click(function(){ $("div").anim原创 2020-12-29 09:28:13 · 298 阅读 · 0 评论 -
jQuery 效果 - 滑动 slideDown,slideUp,slideToggle的使用
//slideDown() 方法用于向下滑动元素$(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideDown("slow"); });});//slideUp() 方法用于向上滑动元素$(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideUp("slow"); });})原创 2020-12-29 09:22:11 · 365 阅读 · 0 评论 -
jQuery 效果 - 淡入淡出,fadeIn,fadeOut,fadeToggle的使用
<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script type="text/javascript">$(document).ready(function(){ $("button").click(function(){ $("#div1").fadeOut(); $("#div2").fa原创 2020-12-29 09:11:06 · 551 阅读 · 1 评论 -
jq循环
// jq循坏方式1cell=$(".cell");for(i=0;i<cell.length;i++){ }// jq循环方式二$('.cell').each(function(i){ })原创 2020-10-21 09:35:15 · 3225 阅读 · 0 评论 -
jq模仿右键触发菜单
//contextmenu()表示右键菜单触发的时候$(document).contextmenu(function(event){ x=event.clientX; y=event.clientY; btn=event.button; if(btn==2){ $('ul').show().css({'left':x+'px','top':y+'px'});原创 2020-10-21 09:31:19 · 293 阅读 · 0 评论 -
jq事件的绑定也解除
事件的绑定与解除 i=0; $('button').eq(0).click(function(){ $('img').bind('click',function(){ if(i%2==0){ this.src='b.png'; }else{ this.src='a.png';原创 2020-10-21 09:27:56 · 192 阅读 · 0 评论