JQuery入门经典

来源：互联网发布：淘宝代销好还是自销好编辑：程序博客网时间：2024/06/03 06:25

感谢 www.java1234.com

//每次文档加载完毕后会执行此方法

$(document).ready(function(){

});

1.选择器

    //基本选择器
        $("#a1").css("background-color","red");//根据ID
        $(".c1").css("background-color","red"); //根据class类别
        $("a").css("background-color","red"); //根据标签元素
       //属性选择器
        $("[href]").css("background-color","red");
        $("[href=#]").css("background-color","red");

//以com结尾的href属性

$("[href$='com']").css("background-color","red");

       //其他选择器
        $("p.c1").css("background-color","red");
        $("ul li:first").css("background-color","red");
       $("ul li:last").css("background-color","red");

// 操作dom节点
 // 1,查找节点
 /* var li2 = $("ul li:eq(1)");
 var li2_txt = li2.text();
 alert(li2_txt); */

 // 2,创建节点
 /* var li1 = $("<li title='这是马化腾'>马化腾</li>");
 var li2 = $("<li title='这是李彦宏'>李彦宏</li>");
 var li222 = $("ul li:eq(1)");
 //$("ul").append(li1);
 li2.insertAfter(li222); */

 //3.删除节点
 //$("ul li:eq(1)").remove();

 // 操作DOM属性
 // 获取属性
 /* var li2 = $("ul li:eq(1)");
 var li2_attr = li2.attr("title");
 alert(li2_attr); */

 // 设置属性
 //$("ul li:eq(1)").attr("title","你懂的");

 // 删除属性
 //$("ul li:eq(1)").removeAttr("title");

 //操作dom节点样式
 //获取样式
 /* var li2 = $("ul li:eq(1)");
 var li2_class = li2.attr("class");
 alert(li2_class);
 */

 //设置样式
 //$("ul li:eq(1)").attr("class","lc2");

 //追加样式
 //$("ul li:eq(1)").addClass("lc3");

 // 移除样式
 //$("ul li:eq(1)").removeClass("lc");

 // 设置和获取HTML，文本和值
 // 获取HTML
 /* var l1_html = $("ul li:eq(0)").html();
 alert(l1_html); */
 //设置html
 //$("ul li:eq(0)").html("哈哈")

 // 获取文本
 /* var l1_html = $("ul li:eq(0)").text();
 alert(l1_html);
 */
 // 设置文本
 //l1_html = $("ul li:eq(0)").text("呵呵");

 //遍历节点
 //children()
 /* var b = $("body").children();
 alert(b.length);
 var u = $("ul").children();
 alert(u.length);
 for(var i=0;i<u.length;i++){
 alert(u[i].innerHTML);
 alert($(u[i]).html());
 } */

 //next()
 /* var l=$("ul li:eq(1)").next();
 alert(l.html()); */

 // prev()
 /* var l = $("ul li:eq(1)").prev();
 alert(l.html()); */

 //CSS-DOM操作
 // 获取css样式
 /* var c = $("#jq").css("color");
 alert(c); */

$(document).ready(function(){
 alert("文档加载完毕");

 $("#zs").click(function(){
 $("#p1").html("张三被点了");
 });

 $("#zs").dblclick(function(){
 $("#p1").html("张三被双击了");
 });

 $("#t1").focus(function(){
 $("#t1").val("获取焦点");
 })

 $("#t1").blur(function(){
 $("#t1").val("失去焦点");
 })

 $("#d1").mouseover(function(){
 $("#d1").html("鼠标移入");
 });

 $("#d1").mouseout(function(){
 $("#d1").html("鼠标移出");
 });
 });

 //隐藏和显示dom
 $(document).ready(function(){
 $("#b1").click(function(){
 $("#p1").show();
 });

 $("#b2").click(function(){
 $("#p1").hide();
 });
 //淡入和淡出dom 括号内可设置速度
 $("#b3").click(function(){
 $("#d1").fadeOut();
 });

 $("#b4").click(function(){
 $("#d1").fadeIn();
 });
 //fadeToggle 淡入淡出开关
 $("#b5").click(function(){
 //$("#d1").fadeToggle();
 //$("#d1").fadeToggle("slow");
 $("#d1").fadeToggle(10000);
 });
 //透明度 fadeTo(速度,程度)
 $("#b6").click(function(){
 $("#d1").fadeTo("slow",0.1);
 $("#d2").fadeTo("slow",0.5);
 $("#d3").fadeTo("slow",0.9);
 });
 //动画
 $("#b7").click(function(){
 $("#d4").slideDown("slow");
});

 $("#b8").click(function(){
 $("#d4").slideUp("slow");
 });
 //滑动 animate(位置,速度)
 $("#b9").click(function(){
 $("#d5").animate({left:'500px'},'slow');
 });
 //滑动过程的变化 animate(变化,速度)
 $("#b10").click(function(){
 $("#d5").animate(
 {right:'100px',

 opacity:0.5,
 height:'150px',
 width:'150px'
 },
 'slow'
 );
 });

 $("#b11").click(function(){
 $("#d5").animate(
 {right:'100px',

 opacity:0.5,
 height:'+=150px',
 width:'+=150px'
 },
 'slow'
 );
 });
 //回调方法
 $("#b12").click(function(){
 $("#p6").show(function(){
 alert("小日本出来了!");
 });
 });

 $("#b13").click(function(){
 $("#d6").animate({left:'500px'},'slow');
 });
 //停止方法
 $("#b14").click(function(){
 $("#d6").stop();
 });

});

//前后端交互的两种方法,多用后面那种
   $(document).ready(function(){
       $("#b1").click(function(){
           $("#d1").load("/HeadFirstJquery/ajax?action=load",{name:"张三",age:14},function(){
               alert("执行完成");
           });
       });

       $("#b2").click(function(){
           $.post("/HeadFirstJquery/ajax?action=post",{id:1},function(data,textStatus){
               alert("请求状态: "+ textStatus);
               alert("返回的数据: "+data);
               data = eval("("+data+")");
               $("#name").val(data.name);
               $("#age").val(data.age);
           })
       });
});

0 0