JQuery 教程

JQuery Dom核心 获取并改变属性

JQuery代码:

$(function(){
    $obj=$("p").attr("title");//attr方法可以获取到元素的属性节点;格式为:attr("属性名");相当于JS中的getAttribute();
    //alert($obj);
    $obj2=$("p").attr("title","更新标题");//attr方法可以获取到元素的属性,并改变该元素的属性值;格式为:attr("属性","属性值")
    $obj3=$("p").attr("class","color");//attr方法也可以动态的添加class选择器;
    $("p").attr("class","bold");
    $("p").addClass("color");
});

HTML代码:

<p title="这是标题">这里是文字</p>

CSS代码:

.color{color:red;}
.bold{font-weight:bold;}

介绍JQuery中包装集过滤函数使用

JQuery代码:

$(document).ready(function(){
    //使用选择器筛选
    $("p:nth-child(2)").mouseover(function(){
        $(this).css("color","springgreen");
    });
    $("p:nth-child(2)").mouseout(function(){
        $(this).css("color","#000");
    })
    //使用eq筛选包装集函数
    $("p").eq(1).mouseover(function(){
        $(this).css("color","springgreen");
    });
    $("p").eq(1).mouseout(function(){
        $(this).css("color","#000");
    })
})

HTML代码:

<p>HelloWeb前端网提供大量优质脚本资源</p>
<p>HelloWeb前端网关注用户体验</p>
<p>HelloWeb前端网-前端开发者的天地</p>

JQueryDom编程-动态创建节点并添加到文档中

JQuery代码:

$(document).ready(function(){
    $("#btn").click(function(){
        var newobj = $("<p/>").css("color","red").html("HelloWeb前端网");
        newobj.appendTo("#content");
    })
})

HTML代码:

<input id="btn" type="button" value="添加元素节点">
<div id="content"></div>

JQueryDom编程-包装集元素的创建和获取

JQuery代码:

$(document).ready(function(){
    //往div内部 创建p标签内容
    $("#btn1").click(function(){
        $("div").append("<p>动态创建出的内容</p>")
    })
    //获取创建元素的数量
    $("#btn2").click(function(){
        var objs = $("div").children();
        alert("获取的元素数量是:"+ objs.length+ "个")
    })
})

HTML代码:

<input id="btn1" type="button" value="添加元素">
<input id="btn2" type="button" value="获取元素">
<div></div>

JQuery包装集元素next函数使用

通过next函数获取包装集下一个元素对象

JQuery代码:

$(document).ready(function(){
    //设置选中的radio的下一个p文字为红色
    $(":radio:checked").next().css("color","red");
    //点击radio时,使后面的文字变为红色
    $(":radio").click(function(){
        $(":radio").next().css("color","#000000");
        $(this).next().css("color","red");
    })
})

HTML代码:

<label><input type="radio" name="type"><span>前端开发</span></label>
<br />
<label><input type="radio" name="type"><span>UI设计</span></label>
<br />
<label><input type="radio" name="type" checked="checked"><span>资源共享</span></label>
<br />

JQuery包装集的串联

通过andSelf函数对包装集的串联处理

JQuery代码:

$(document).ready(function(){
    //andSelf() 选择div标签 以及div里面的p标签 设置为红色
    $("div").find("p").andSelf().css("color","red");	
})

HTML代码:

<div>
    <h3>HelloWeb-前端网</h3>
    <p>欢迎学习JQuery教程</p>			
</div>

JQuery通过each函数遍历包装集

通过遍历每个 li 动态添加上序号

JQuery代码:

$(document).ready(function(){
    $("input").click(function(){
        //遍历包装集
	$("li").each(function(index){
	    //console.log(index+":"+ this.innerText);
	    //使每个li前面加上数字
	    this.innerText = index+":"+ this.innerText;
        })
    })
})

HTML代码:

<h3>HelloWeb-前端网</h3>
<ul>
	<li>前端开发</li>
	<li>Html5</li>
	<li>CSS3</li>
	<li>jquery</li>
	<li>JavaScript</li>
</ul>
<input type="button" value="添加序列号">

JQuery中attr函数的使用

通过 attr 函数实现一个简单的数组换图

JQuery代码:

$(document).ready(function(){
    var imgs = ["http://helloweb.wang/e/data/tmp/titlepic/f00f5b93894ca0e6a9d925f9bed80837.jpg",
                "http://helloweb.wang/e/data/tmp/titlepic/0dd56e9a5626f95584ff4ad4a3b9c036.jpg",
                "http://helloweb.wang/e/data/tmp/titlepic/2e6be7904affe20eb85b5f3b39bd421d.jpg"];
    var index = 0;
    $("input").click(function(){
        index = (index+1)%3;
        $("img").attr("src",imgs[index]);
    })
})

HTML代码:

<img src="http://helloweb.wang/e/data/tmp/titlepic/2e6be7904affe20eb85b5f3b39bd421d.jpg"><br />
<input type="button" value="修改图片">

JQuery中CSS函数的使用

通过 CSS 函数实现管理对象的样式

JQuery代码:

$(document).ready(function(){
    $("#btshow").click(function(){
        if(!$("img").hasClass("show")){
            $("img").removeClass("hide");
            $("img").addClass("show");
        }
    });
    $("#bthide").click(function(){
        if(!$("img").hasClass("hide")){
            $("img").removeClass("show")
            $("img").addClass("hide");    
        }
    })
})

HTML代码:

<img src="http://helloweb.wang/e/data/tmp/titlepic/2e6be7904affe20eb85b5f3b39bd421d.jpg"><br />
<input type="button" value="显示" id="btshow">
<input type="button" value="隐藏" id="bthide" />

CSS代码:

.show{display: block;}
.hide{display: none;}

JQuery 宽高函数以及盒子模型

通过宽高函数了解获取盒子宽度高度的具体情况

JQuery代码:

$(document).ready(function(){
    //获取div盒子设置的宽度
    alert("div的宽度是:" + $("div").width());
    //获取div盒子设置的高度
    alert("div的高度是:" + $("div").height());
    
    //div加上margin和边框的宽度
    alert("div加上margin和边框的宽度是:"+ $("div").outerWidth(false));
    //div加上margin和边框的高度
    alert("div加上margin和边框的高度是:"+ $("div").outerHeight(false));
    
    //div加上margin和padding和边框的宽度是
    alert("div加上margin和padding和边框的宽度是:"+$("div").outerWidth(true));
    //div加上margin和padding和边框的宽度是
    alert("div加上margin和padding和边框的高度是:"+$("div").outerHeight(true));
    
    //div加上padding的宽度是
    alert("div加上padding的宽度是:" +$("div").innerWidth());
    //div加上padding的高度是
    alert("div加上padding的高度是:" +$("div").innerHeight());
})

HTML代码:

<div>HelloWeb前端网</div>

CSS代码:

*{margin:0;padding:0;}
div{
    width:200px;
    height:100px;
    border:5px solid #16A387;
    padding:20px;
    margin:10px 20px;
}

JQuery坐标与滚动函数

通过offset 获取坐标,scrollTop实现垂直方向滚动,类似于一个单页面的锚点跳转。

JQuery代码:

$(document).ready(function(){
    $("li").eq(0).click(function(){
        //获取one盒子距离窗口顶部的距离
        //alert(("#one").offset().top)
        $("body").scrollTop($("#one").offset().top)
    })
    $("li").eq(1).click(function(){
        //获取one盒子距离窗口顶部的距离
        //alert($("#two").offset().top)
        $("body").scrollTop($("#two").offset().top)
    })
    $("li").eq(2).click(function(){
        $("body").scrollTop($("#three").offset().top);
    })
})

HTML代码:

<ul>
    <li>前端开发</li>
    <li>UI设计</li>
    <li>用户体验</li>
</ul>

<div id="one">前端开发</div>
<div id="two">UI设计</div>
<div id="three">用户体验</div>

CSS代码:

*{margin:0;padding:0;}
ul{overflow: hidden;position: fixed;top:0;left:0;}
li{list-style: none;float:left;font: 18px/36px "微软雅黑";background: #0000FF;margin: 0 5px;color: #fff;padding:0 10px;}
#one,#two,#three{color: #fff;font-size:30px;text-align: center;line-height: 500px;height:500px;font-family: "微软雅黑";}
#one{background: pink;}
#two{background: #16A387;}
#three{background: #262626;}

JQuery的事件处理函数 & 事件多播

用法与用途在于可以增加多事件委托,统一了事件名称,可以将对象的行为全部用脚本进行控制,不像 javascript 有些还需要写在标签上。

未标题-1.png

以下dome,让一个对象绑定多个事件处理函数:

JQuery代码:

$(document).ready(function(){
    $("button").click(function(){
        alert("你好");
    });
    $("button").bind("click",function(){
        alert("HelloWeb前端网");
    });
    $("button").bind({
        click:function(){alert("前端开发")},
        mouseout:function(){$(this).css("background","pink")}
    })
});

HTML代码:

<button>点我点我</button>

JQuery bind事件 传递数据

通过 bind 绑定事件,传递数据给事件处理函数

JQuery代码:

$(document).ready(function(){
    $("button").bind("click",{user:"HelloWeb前端网",num:12345},function(event){
        alert(event.data.user);
        alert(event.data.num);
    })
});

HTML代码:

<button>点我点我</button>

trigger触发器:通过程序触发事件

trigger() 方法的使用

JQuery代码:

$(document).ready(function(){
    $("#bt01").click(function(){
        $("<li>").appendTo("ul").html("HelloWeb前端网");
    });
    //模拟单击按钮功能
    $("#bt02").click(function(){
        $("#bt01").trigger("click");
    })
});

HTML代码:

<button id="bt01">添加</button>
<button id="bt02">模拟单击</button>

<ul></ul>

快捷事件触发函数

直接通过事件名称函数来触发事件

JQuery代码:

$(document).ready(function(){
    var flag=1;
    $("#div1").click(function(){
        if(flag==0){
            $(this).css("background","green");
            flag=1;
        }else{
            $(this).css("background","red");
            flag=0;
        }
    });
    //触发事件
    $("#bt01").click(function(){
        $("#div1").click();//相当于$("#div1").trigger("click");
    });
    $("#bt02").click(function(){
        $("#us").focus();// 相当于$("#us").trigger("focus");
    })
});

HTML代码:

<button id="bt01">点击我触发盒子变色</button>
<button id="bt02">点击我触发选中文本框</button>
<div id="div1"></div>
<input type="text" id="us">

CSS代码:

#div1{width:100px;height:100px;background:red;}
#us{width:200px;height:30px;}

hover实现交互的封装,封装鼠标进入和离开

只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。对应mouseleave ;这样的话,mouseenter 子元素不会反复触发事件,否则在IE中经常有闪烁情况发生。解决javascript冒泡问题

JQuery代码:

$(document).ready(function(){
    $("#div1").mouseover(function(){
        alert("mouseover")
    })
    $("#div1").mouseout(function(){
        alert("mouseout")
    })
    $("#div2").hover(function(event){
        alert("this" +  event.type)
        //对应鼠标移入触发mouseenter事件,鼠标移出触发mouseleave
    })
});

HTML代码:

<div id="div1"></div>
<div id="div2"></div>

CSS代码:

#div1{width:100px;height:100px;background:red;}
#div2{width:100px;height:100px;background: pink;}

JQuery 事件对象

JQuery代码:

$(document).ready(function(){
    var callback = function(event){
        //获取事件类型
        alert(event.type);
        //获取事件源,(事件的对象名称)
        alert(event.target.id);
        //获取事件源标签属性
        alert($(event.target).attr("alt"))
    }
    $("#bt01").click(callback);
    $("#bt02").click(callback);
    $("#div1").click(callback);
    $("#div2").click(callback)
});

HTML代码:

<button id="bt01">bt01</button>
<button id="bt02">bt02</button>
<div id="div1" alt="helloweb">div1</div>
<div id="div2" alt="hello">div2</div>

动画显示与隐藏

函数使用:show()显示 | hide()隐藏 | toggle()切换

JQuery代码:

$(document).ready(function(){
    $("#btshow").click(function(){
        $("div").show(500);
    });
    $("#bthide").click(function(){
        $("div").hide(1000);
    });
    $("#toggle").click(function(){
        $("div").toggle(700);
    });
});

HTML代码:

<button id="btshow">显示</button>
<button id="bthide">隐藏</button>
<button id="toggle">切换</button>

<div>HelloWeb前端网</div>

CSS代码:

div{width:150px;height:100px;background:#16A387;color: #fff;}

JQuery动画滑动函数

函数使用:slideDown()向下展开 | slideUp()向上收起 | slideToggle()切换

JQuery代码:

$(document).ready(function(){
    $("#btdown").click(function(){
        $("div").slideDown(1000);
    });
    $("#btup").click(function(){
        $("div").slideUp(500);
    });
    $("#toggle").click(function(){
        $("div").slideToggle(700);
    });
});

HTML代码:

<button id="btdown">向下滑动</button>
<button id="btup">向上滑动</button>
<button id="toggle">切换</button>

<div>HelloWeb前端网</div>

CSS代码:

div{width:150px;height:100px;background:#16A387;color: #fff;}

JQuery动画淡入淡出效果

函数使用:fadeIn () 淡入  |  fadeOut()淡出  | fadeToggle()切换

JQuery代码:

$(document).ready(function(){
    $("#btin").click(function(){
        $("div").fadeIn(1000);
    });
    $("#btout").click(function(){
        $("div").fadeOut(500);
    });
    $("#toggle").click(function(){
        $("div").fadeToggle(700);
    });
});

HTML代码:

<button id="btin">淡入</button>
<button id="btout">淡出</button>
<button id="toggle">切换</button>

<div>HelloWeb前端网</div>

CSS代码:

div{width:150px;height:100px;background:#16A387;color: #fff;}

JQuery animate创建自定义的动画

JQuery代码:

$(document).ready(function(){
    //动画同时执行多个属性
    $("#bt01").click(function(){
        $("div").animate({width:"200px",height:"200px",fontSize:"20px"},300);
    });
    //使用队列功能,动画依次执行
    $("#bt02").click(function(){
        $("div").animate({width:"400px"},500)
                .animate({height:"400px"},500)
                .animate({fontSize:"30px"},500)
                .animate({opacity:"0.8"},500);
    })
});

HTML代码:

<button id="bt01">animate同时执行多个属性</button>
<button id="bt02">animate队列功能</button>
<div>HelloWeb前端网</div>

CSS代码:

div{width:100px;height:100px;background:#16A387;color: #fff;}


原文链接:HelloWeb前端网 » JQuery 教程 » 感谢您的浏览,希望能有所帮助。

欢迎您加入“Helloweb” 学习交流群:HelloWeb-学习交流群 196291215 共同交流并结识同行,在这里说出您的收获与感想或有什么不同的观点,我们期待您的留言,分享,让我们一起进步!

喜欢 ()or分享