JQuery一些基础笔记

JQuery学完了,总结一下一些需要掌握的知识点。
首先什么是JQuery 说白了就是有JavaScript衍生出来的一个产物,它呢兼容各种浏览器,但是前提你要用这个JQ的话首先呢你就要引入JQ库。
学过js的人在学jq你就会感觉jq简直是很简单的代码就给js的功能实现了。建议先去学一下js在来学jq这样会好理解一点。

一、基础
类似于js中的window.onload,是在窗体加载完成后在执行。
例:$(function()

{

alert("HelloWorld");
});
JQ元素和DOM元素呢就是JQ元素名是由$开头的,不带$的呢就是普通的js元素了
二、选择器
这个jq呢有很多选择器死记硬背呢确实不好记程序就是这样写多了自然而然的就会了
三、DOM
append()
-- 向元素中添加内容
appendTo()
-- 将元素添加到指定内容
包裹节点:
$(function()
{
$(“span”).wrap(“<strong></strong>”);

})
设置属性:
$("元素").attr({键值对});同样也可以设置css属性 $(“p”).attr(“class”,”high”);$("a:contains('link')").attr({"href":“index.html","title":"test"});
attr(这里是键值对)
追加样式:
$(“p”).addClass(“another”);toggle事件:
也就是相当于链接式点击事件第一次点击执行第一个函数块代码第二次点击执行第二个代码块,以此类推。
设置和获取HTML的文本值
1、html()
2、text()
3、val()

四、事件
1.bind()绑定事件 --- unbind()移出事件
$(function(){

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

$(this).next().show();

});

$("#panel h5.head").bind("mouseout",function(){
$(this).next().hide();

})
})
1.hover()用于光标的模拟,第一次悬停触发一次,鼠标移出在触发一次
$(function(){

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

$(this).next().show();},function(){

$(this).next().hide();
})

})
2.toggle()被选中元素轮流响应click事件
$("td").toggle(
function () {
$(this).addClass("selected");
},
function () {
$(this).removeClass("selected");
}
);
五、动画
1.show() -- 显示
2.hide() -- 隐藏
3.fadeIn() -- 颜色逐渐变深
4.fadeOut() -- 颜色逐渐变浅
5.slideUp()-- 向上延伸
6.slideDown() -- 向下延伸
7.animated() -- 动画
$("#panel").click(function(){

$(this).animate({left: "500px"}, 3000);

})
这些动画可以和事件组合起来用
Ajax另外有介绍

上一篇:apache反向代理出现502调整


下一篇:JS实现弹出层对话框