爱站程序员基地jQuery
- jQuery
- 引入jQuery框架
- js对象和jq对象互相转换
- 选择器
- 基础选择器
- 层级选择器
- 插入元素
- 删除元素
- 获取和修改元素的文本内容
- 获取和修改元素的html内容
- 获取和修改元素的css样式
- 获取和修改元素的属性 attr = attribute(属性)
jQuery
- 什么jQuery：
- 是一个js框架
- 可以让程序员写的更少，但是实现的更多
- jQuery本身就是通过js语言写的一个 js文件
- 作用就是为了简化js代码
- 可以像css一样获取页面中的元素
- 可以像css一样批量修改元素样式
- 可以解决部分兼容性问题
引入jQuery框架
- 由于jQuery就是一个普通的js文件所以直接用script标签的src属性引入即可
js对象和jq对象互相转换
- js对象转jq对象
var jq = $(js);
- jq对象转js对象
- jq对象实际上就是数组， 对数组进行了扩展
var js = jq[0];
选择器
基础选择器
- 标签名选择器
$(\"div\")
- id选择器
$(\"#id\")
- 类选择器
$(\".class\")
- 分组选择器
$(\"div,#id,.class\")
- 任意元素选择器
$(\"*\")
层级选择器
-
$(\"div span\")
匹配div里面所有的span元素
-
$(\"div>span\")
匹配div里面所有的span子元素
-
$(\"div+span\")
匹配div的弟弟元素span
-
$(\"div~span\")
匹配div的弟弟们span元素
- 层级方法
- 获取元素的所有兄弟元素
$(\"#abc\").siblings(?\"div\");
- 获取元素的哥哥元素
$(\"#abc\").prev(?\"div\");
- 获取元素的哥哥们元素
$(\"#abc\").prevAll(?\"div\");
- 获取元素的弟弟元素
$(\"#abc\").next(?\"div\");
- 获取元素的弟弟们元素
$(\"#abc\").nextAll(?\"div\");
过滤选择器
-
$(\"div:first\")
匹配第一个div元素
-
$(\"div:last\")
匹配最后一个div元素
-
$(\"div:even\")
匹配所有div中下标为偶数的div元素 从0开始
-
$(\"div:odd\")
匹配所有div中下标为奇数的div元素 从0开始
-
$(\"div:eq(n)\")
匹配下标为n的div元素
-
$(\"div:lt(n)\")
匹配下标小于n的div元素
-
$(\"div:gt(n)\")
匹配下标大于n的div元素
-
$(\"div:not(.abc)\")
匹配class值不为abc的所有div
内容选择器
-
$(\"div:has(p)\")
匹配所有包含p子元素的div
-
$(\"div:empty\")
匹配空的div
-
$(\"div:parent\")
匹配非空的div
-
$(\"div:contains(\'xxx\')\")
匹配包含xxx文本的div
可见选择器
-
$(\"div:hidden\")
匹配所有隐藏的div
-
$(\"div:visible\")
匹配所有显示的div
- 显示隐藏相关的方法
- 让隐藏元素显示
$(\"div:hidden\").show();
2. 让显示的元素隐藏
$(\"div:visible\").hide();
3. 隐藏显示切换
$(\"#abc\").toggle();
属性选择器
-
$(\"div[id]\")
匹配包含id属性的div元素
-
$(\"div[id=\'xxx\']\")
匹配id值为xxx的div元素
-
$(\"div[id!=\'xxx\']\")
匹配id值不为xxx的div元素
子元素选择器
-
$(\"div:first-child\")
匹配是第一个子元素的div元素
-
$(\"div:last-child\")
匹配是最后一个子元素的div元素
-
$(\"div:nth-child(n)\")
匹配是第n个子元素的div元素 从1开始
表单选择器
-
$(\":input\")
匹配表单中的所有控件
-
$(\":password\")
匹配密码框
-
$(\":radio\")
匹配单选
-
$(\":checkbox\")
匹配多选
-
$(\":checked\")
匹配所有选中的单选、多选、下拉选
-
$(\"input:checked\")
匹配所有选中的单选、多选
-
$(\":selected\")
匹配所有选中的下拉选
创建和添加元素
- 创建元素对象
var d = $(\"<div id=\'d1\' class=\'c1\'>abc</div>\");
- 添加元素
父元素.append(d); //添加到最后
父元素
.prepend(d); //添加最前面
插入元素
js:父元素
.insertBefore(新元素,弟弟元素);
兄弟元素
.before(新元素);
添加到兄弟元素的前面
兄弟元素
.after(新元素);
添加到兄弟元素的后面
删除元素
js： 父元素
.removeChild(被删除的元素);
被删除的元素
.remove();
获取和修改元素的文本内容
元素对象
.text(); //获取
元素对象
.text(\"abc\"); //修改
获取和修改元素的html内容
元素对象.html();//获取
元素对象.html(“
xxx
”); //修改
获取和修改元素的css样式
元素对象
.css(\"color\"); //获取color样式的值
元素对象
.css(\"color\",\"red\"); //修改
元素对象
.css({\"width\":\"100px\",\"height\":\"200px\"});
获取和修改元素的属性 attr = attribute(属性)
元素对象
.attr(\"id\");
获取元素的id属性值
元素对象
.attr(\"id\",\"abc\");
设置id值为abc
