项目总结—从零开始（5）

来源：互联网发布：如何搭建数据库编辑：程序博客网时间：2024/05/20 02:29

1.Jquery一些常用语句：

jquery常用选择器：

     //在body内的选择 元素名是div 的子元素.  $('#btn2').click(function(){  $('body > div').css("background","#bbffaa");  })

//选择 所有class为one 的下一个div元素.  $('#btn3').click(function(){  $('.one + div').css("background","#bbffaa");  })

 //选择 id为two的元素后面的所有div兄弟元素.  $('#btn4').click(function(){   $('#two ~ div').css("background","#bbffaa");  })

 //选择第一个div元素.      $('#btn1').click(function(){  $('div:first').css("background","#bfa");  })  //选择最后一个div元素.  $('#btn2').click(function(){  $('div:last').css("background","#bfa");  })  //选择class不为one的 所有div元素.  $('#btn3').click(function(){  $('div:not(.one)').css("background","#bfa");  })  //选择 索引值为偶数 的div元素。  $('#btn4').click(function(){  $('div:even').css("background","#bfa");  })  //选择 索引值为奇数 的div元素。  $('#btn5').click(function(){  $('div:odd').css("background","#bfa");  })  //选择 索引等于 3 的元素  $('#btn6').click(function(){  $('div:eq(3)').css("background","#bfa");  })  //选择 索引大于 3 的元素  $('#btn7').click(function(){  $('div:gt(3)').css("background","#bfa");  }) //选择 索引小于 3 的元素  $('#btn8').click(function(){  $('div:lt(3)').css("background","#bfa");  })   //选择 所有的标题元素.比如h1, h2, h3等等...  $('#btn9').click(function(){  $(':header').css("background","#bfa");  })  //选择 当前正在执行动画的所有元素.  $('#btn10').click(function(){  $(':animated').css("background","#bfa");  });

//选取含有文本"di"的div元素.      $('#btn1').click(function(){  $('div:contains(di)').css("background","#bbffaa");  })  //选取不包含子元素(或者文本元素)的div空元素.  $('#btn2').click(function(){  $('div:empty').css("background","#bbffaa");  })  //选取含有class为mini元素 的div元素.  $('#btn3').click(function(){  $('div:has(.mini)').css("background","#bbffaa");  })

  //选取含有 属性title 的div元素.      $('#btn1').click(function(){  $('div[title]').css("background","#bbffaa");  })  //选取 属性title值等于 test 的div元素.  $('#btn2').click(function(){  $('div[title=test]').css("background","#bbffaa");  })  //选取 属性title值不等于 test 的div元素.  $('#btn3').click(function(){  $('div[title!=test]').css("background","#bbffaa");  })  //选取 属性title值 以 te 开始 的div元素.  $('#btn4').click(function(){  $('div[title^=te]').css("background","#bbffaa");  })  //选取 属性title值 以 est 结束 的div元素.  $('#btn5').click(function(){  $("div[title$=est]").css("background","#bbffaa");  })  //选取 属性title值 含有 es  的div元素.  $('#btn6').click(function(){  $("div[title*=es]").css("background","#bbffaa");  })  //组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有 es 的元素.  $('#btn7').click(function(){  $("div[id][title*=es]").css("background","#bbffaa");  })

 //选取每个class为one的div父元素下的第2个子元素
      $('#btn1').click(function(){  $('div.one :nth-child(2)').css("background","#bbffaa");  })  //选取每个class为one的div父元素下的第一个子元素
  $('#btn2').click(function(){  $('div.one :first-child').css("background","#bbffaa");  })  //选取每个class为one的div父元素下的最后一个子元素
  $('#btn3').click(function(){  $('div.one :last-child').css("background","#bbffaa");  })  //如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素  $('#btn4').click(function(){  $('div.one :only-child').css("background","#bbffaa");  })

$("ul li").click(function(){

$(this).clone().appendTo("ul"); // 复制当前点击的节点，并将它追加到<ul>元素

})

$(this).clone(true).appendTo("ul"); // 注意参数true     //可以复制自己，并且他的副本也有同样功能。

$("ul li:eq(1)").empty(); // 找到第二个<li>元素节点后，清空此元素里的内容

$("ul li").remove("li[title!=菠萝]"); //把<li>元素中属性title不等于"菠萝"的<li>元素删除

$("strong").wrap("");//用元素把元素包裹起来，页面效果：

你最喜欢的水果是?

$("strong").wrapInner("");，页面效果： $("strong").wrapInner("");

//删除元素的属性'title'

$("input:eq(2)").click(function(){

$("p").removeAttr("title");

//追加样式

$("input:eq(2)").click(function(){

$("p").addClass("another");

});

//删除全部样式

$("input:eq(3)").click(function(){

$("p").removeClass();

});

//删除指定样式

$("input:eq(4)").click(function(){

$("p").removeClass("high");

});

//判断元素是否含有某样式

$("input:eq(6)").click(function(){

alert( $("p").hasClass("another") )

alert( $("p").is(".another") )

$(function(){

//获取元素的HTML代码

$("input:eq(0)").click(function(){

alert( $("p").html() );

});

//获取元素的文本

$("input:eq(1)").click(function(){

alert( $("p").text() );

});

//设置元素的HTML代码

$("input:eq(2)").click(function(){

$("p").html("你最喜欢的水果是?");

});

//设置元素的文本

$("input:eq(3)").click(function(){

$("p").text("你最喜欢的水果是?");

});

//设置元素的文本

$("input:eq(4)").click(function(){

$("p").text("你最喜欢的水果是?");

});

//获取按钮的value值

$("input:eq(5)").click(function(){

alert( $(this).val() );

});

//设置按钮的value值

$("input:eq(6)").click(function(){

$(this).val("我被点击了!");

});

var $p1 = $("p").next(); alert( $p1.html() );  //  紧邻<p>元素后的同辈元素 var $ul = $("ul").prev(); alert( $ul.html() );  //  紧邻<ul>元素前的同辈元素 var $p2 = $("p").siblings(); alert( $p2.html() );  //  紧邻<p>元素的唯一同辈元素

$(function(){

//获取元素的color

$("input:eq(0)").click(function(){

alert( $("p").css("color") );

});

//设置元素的color

$("input:eq(1)").click(function(){

$("p").css("color","red")

});

//设置元素的fontSize和backgroundColor

$("input:eq(2)").click(function(){

$("p").css({"fontSize":"30px" ,"backgroundColor":"#888888"})

});

//获取元素的高度

$("input:eq(3)").click(function(){

alert( $("p").height() );

});

//获取元素的宽度

$("input:eq(4)").click(function(){

alert( $("p").width() );

});

//设置元素的高度

$("input:eq(5)").click(function(){

$("p").height("100px");

});

//设置元素的宽度

$("input:eq(6)").click(function(){

$("p").width("400px");

});

//获取元素的的左边距和上边距

$("input:eq(7)").click(function(){

var offset = $("p").offset();

var left = offset.left;

var top = offset.top;

alert("left:"+left+";top:"+top);

});

这是在链接上添加自动提示的代码：

$(function(){
 var x = 10;
 var y = 20;
 $("a.tooltip").mouseover(function(e){
 this.myTitle = this.title;
 this.title = "";
 var tooltip = "<div id='tooltip'>"+ this.myTitle +"<\/div>"; //创建 div 元素
 $("body").append(tooltip); //把它追加到文档中
 $("#tooltip")
 .css({
 "top": (e.pageY + y) + "px",
 "left": (e.pageX + x) + "px"
 }).show("fast"); //设置x坐标和y坐标，并且显示
 }).mouseout(function(){
 this.title = this.myTitle;
 $("#tooltip").remove(); //移除
 });
});
//]]>
</script>
</head>
<body>
<a href="#" class="tooltip" title="这是我的超链接提示1.">提示1.</a>
<a href="#" class="tooltip" title="这是我的超链接提示2.">提示2.</a>
<a href="#" title="这是自带提示1.">自带提示1.</a>
<a href="#" title="这是自带提示2.">自带提示2.</a>

点击显示和隐藏：

$(function(){

$("#panel h5.head").bind("click",function(){

var $content = $(this).next();

if($content.is(":visible")){

$content.hide();

}else{

$content.show();

}

})

页面代码：

<h5 class="head">什么是jQuery?</h5>

<div class="content" style="display: block;">jQuery是继Prototype之后又一个

$(function(){

$("#panel h5.head").toggle(function(){

$(this).next().toggle();

},function(){

$(this).next().toggle();

})

这和绑定点击事件的效果是一样的。

$("a").click(function(event) {

alert("Current mouse position: " + event.pageX + ", " + event.pageY );//获取鼠标当前相对于页面的坐标

return false;//阻止链接跳转

取消点击事件：

$('#btn').bind("click", function(){

$('#test').append("我的绑定函数1");

}).bind("click", function(){

$('#test').append("我的绑定函数2");

}).bind("click", function(){

$('#test').append("我的绑定函数3");

});

$('#delAll').click(function(){

$('#btn').unbind("click");

取消第二个事件：

$(function(){

$('#btn').bind("click", myFun1 = function(){

$('#test').append("我的绑定函数1");

}).bind("click", myFun2 = function(){

$('#test').append("我的绑定函数2");

}).bind("click", myFun3 = function(){

$('#test').append("我的绑定函数3");

});

$('#delTwo').click(function(){

$('#btn').unbind("click",myFun2);

});

})