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加载完成时运行的代码,可以这样写:
另外,常用的事件为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的当前状态并写入相应的事件!