主页 M

jQuery必须知道的知识点

2014-10-31 网页编程网 网页编程网

1.jQuery选择符--选择到你需要的一切!

选择所有p标签:$("p");

选择id名为name的元素:$("#name");

选择class名为name的元素:$(".name");

选择所有含id属性的div元素:$("div[id]");

选择所有name属性是news的div元素:$("div[name='news']");

选择所有name属性不是news的div元素:$("div[name!='news']");

选择所有以news开头的name属性的div元素:$("div[name^='news']");

选择所有以news结尾的name属性的div元素:$("div[name$='news']"); 

选择所有包含news的name属性的div元素:$("div[name*='news']");

2.jquery事件处理

在DOM加载完成时运行的代码,可以这样写:

$(document).ready(function(){
// 在这里写你的代码...
});

另外,常用的事件为click()、focus()、mousemove()、mouseout()等等,可以通过bind()直接绑定,也可以直接通过元素来调用,如:$("p").click()

3.jQuery效果--为操作添加艺术性

jQuery可以在事件执行的时候给指定的元素添加css样式:$("idName").addClass('activeCss');

通过show()和hide()方法能够很方便的控制元素的显示和隐藏;

通过sildeDown()和slideUp()等实现滑动效果;

通过fadeIn()和fadeOut()等实现淡入淡出效果;

4.设定元素值和取得元素的值

取得form中name属性为userName的文本框的值: $("input[name=‘userName’]").val();

设置form中name属性为userName的文本框的值: $("input[name=‘userName’]").val("请在这里设置您需要的值");

如果一个标签有name、id、title等多个标签,可以用attr(key)来取得相应属性的值:取得id为idName的元素的name属性值:$("#idName").attr("name")

取得div元素或者span元素所显示的内容:$("#idValue").html()

设置div元素或者span元素所显示的内容:$("#idValue").html(“请在这里设置您需要显示的内容!”)

5.DOM操作--用命令改变页面显示内容

把内容插入到一个div的内部:$("#id").append("这里的内容将要插入到该div的内部!")

在所有段落之后插入一个DOM元素: $("p").after( $("#foo") );

6.用jQuery轻松实现Ajax技术

通过Google、Yahoo等一些大公司的Web应用,Ajax被更多的人认识到,甚至是炒作起来!但实际上异步传输是个很老的技术,只是到后来才被重视起来。理解Ajax就是异步刷新,像Google地图那样,你可以随意的拖拽去查看你需要的地图信息而不用刷新页面...

可以看到jQuery通过提供几个简单的函数就把原来需要写一大堆js代码去完成Ajax应用给实现了。

在id为idValue的div中显示通过Ajax加载过来的数据:$("#idValue").load("getMessage.php?id=1") //只是个示例,请将地址换成你自己的url

另外可以很方面的通过post或者get方法将数据提交给服务器:$.post(url,{data})

可以通过Ajax事件获取Ajax的当前状态并写入相应的事件!

阅读原文
阅读 3825
123 显示电脑版