ps:做静态网页注册表单的时候用到的一些JQ知识,只是挑了一些比较常用的做了总结,并不全面。详细的可以查看api文档,在此并不赘述。顺便赚点积分用- -资源:jQuery api 1.4.1,如果实在没有积分的私我,看到了私发你。
1.简单示例
//1.js库的引入
<script src="js/jquery-1.8.3.js"></script>
<script>
//2.初始化函数
$(function(){
$("#id").click(function(){
相应的操作;
});
});
</script>
2.基本选择器
元素 | 用法 | 示例 |
---|---|---|
id | $("#id") | $("#one").css("background-color", "pink"); |
element | $("element") | $("div").css("background-color", "pink"); |
.class | $(".class") | $(".mini").css("background-color", "pink"); |
* | $("*") | $("*").css("background-color", "pink"); |
selector1,selector2,selectorN | $("selector1,selector2,selectorN") | $("#two,div.mini").css("background-color", "pink"); |
3.层级选择器
元素 | 用法 | 示例 |
---|---|---|
ancestor descendant | $("ancestor descendant") | $("body div").css("background-color", "pink");//选择body中的所有的div元素 |
parent > child | $("parent > child") | $("body>div").css("background-color", "pink");//选择body中的第一级的孩子 |
prev + next | $("prev + next") | $("#two+*").css("background-color", "pink");//选择id为two的元素的下一个同级元素 |
prev ~ siblings | $("prev ~ siblings") | $("#one~*").css("background-color", "pink");//选择id为one的所有的兄弟元素 |
4.基本过滤选择器
元素 | 用法 | 示例 |
---|---|---|
:first | 获取便签下的第一个元素 | $("body div:first").css("background-color", "green");//选取body中的第一个div元素背景色设置为绿色 |
:last | 获取便签下的第一个元素 | $("body div:last").css("background-color", "green");//选取body中的最后一个div元素背景色设置为绿色 |
:odd | 获取奇数行的元素 | $("tbody tr:odd").css("background-color","gold");//奇数行背景色设置为金色 |
:even | 获取偶数行的元素 | $("tbody tr:even").css("background-color","pink");//偶数行背景色设置为金色 |
5.属性选择器
元素 | 示例 |
---|---|
[attribute] | $("div[id]").css("background-color", "green");//选择有id属性的div |
[attribute=value] | $("div[id='two']").css("background-color", "green");//选择有id属性的值为two的div |
6.表单属性选择器
元素 | 用法 | 示例 |
---|---|---|
:checked | 匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option) | $(“input:checked”) |
:selected | 匹配所有选中的option元素 | $(“input:selected”) |
7.文档处理
1)内部插入
元素 | 作用 |
---|---|
append(content) | 向所有段落中追加一些HTML标记。 $(“p”).append(“Hello“);//向p标签中内容的后边添加Hello |
appendTo(content) | 把所有段落追加到content的元素中。 $(“p”).appendTo(“div”);//将p标签及其中的内容添加到div块内内容的后面 |
2)删除
元素 | 作用 | 示例 |
---|---|---|
empty() | 删除匹配的元素集合中所有的子节点。 | $(“p”).empty();//删除p标签内所有的内容(保留p标签) |
remove() | 从DOM中删除所有匹配的元素。 | $(“p”).remove();//删除p标签及其内所有的内容 |
8.事件
元素 | 作用 |
---|---|
bind(“事件”,函数) | 为(标签)绑定函数 |
unbind(“事件”) | 为(标签)解绑定函数 |
click/dblclick | 单击/双击 事件 |
change | select标签触发 |
mouseover/mouseout | 鼠标移到/移出 |
focusin/focusout | 聚焦/失焦 事件 |
ps:JS事件和JQ事件的不同在于JQ事件在JS事件的基础上去除了on前缀