-
attr()有4个表达式
attr(传入属性名)：获取属性的值
attr(属性名, 属性值)：设置属性的值
attr(属性名,函数值)：设置属性的函数值
attr(attributes)：给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }
removeAttr()删除方法
.removeAttr( attributeName ) : 为匹配的元素集合中的每个元素中移除一个属性（attribute）
查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="imooc.css" type="text/css">
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>特殊选择器this</h2>
<p id="test1">点击测试：通过原生DOM处理</p>
<p id="test2">点击测试：通过原生jQuery处理</p>
<script type="text/javascript">
var p1 = document.getElementById('test1')
p1.addEventListener('click',function(){
//直接通过dom的方法改变颜色
this.style.color = "red";
},false);
</script>
<script type="text/javascript">
$('#test2').click(function(){
//通过包装成jQuery对象改变颜色
$(this).css('color','blue');
})
</script>
</body>
</html>
查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="imooc.css" type="text/css">
<style>
input {
display: block;
margin: 10px;
padding: 10px;
}
</style>
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>子元素筛选选择器</h2>
<h3>enabled、disabled</h3>
<form>
<input type="text" value="未设置disabled" />
<input type="text" value="设置disabled" disabled="disabled" />
<input type="text" value="未设置disabled" />
</form>
<script type="text/javascript">
//查找所有input所有可用的（未被禁用的元素）input元素。
$('input:enabled').css("border", "2px groove red");
</script>
<script type="text/javascript">
//查找所有input所有不可用的（被禁用的元素）input元素。
$('input:disabled').css("border", "2px groove blue");
</script>
<h3>checked、selected</h3>
<form>
<input type="checkbox" checked="checked">
<input type="checkbox">
<input type="radio" checked>
<input type="radio">
<select name="garden" multiple="multiple">
<option>imooc</option>
<option selected="selected">慕课网</option>
<option>aaron</option>
<option selected="selected">博客园</option>
</select>
</form>
<script type="text/javascript">
//查找所有input所有勾选的元素(单选框,复选框)
//移除input的checked属性
$('input:checked').removeAttr('checked')
</script>
<script type="text/javascript">
//查找所有option元素中,有selected属性被选中的选项
//移除option的selected属性
$('option:selected').removeAttr('selected')
</script>
</body>
</html>
查看全部 -
attribute是dom元素在文档中作为html标签拥有的属性；
property就是dom元素在js中作为对象拥有的属性。
所以：
对于html的标准属性来说，attribute和property是同步的，是会自动更新的，
但是对于自定义的属性来说，他们是不同步的，
查看全部 -
基本筛选器
:eq(), :lt(), :gt(), :even, :odd 用来筛选他们前面的匹配表达式的集合元素，根据之前匹配的元素在进一步筛选，注意jQuery合集都是从0开始索引
gt是一个段落筛选，从指定索引的下一个开始，gt(1) 实际从2开始
查看全部 -
层级选择器都有一个参考节点
后代选择器包含子选择器的选择的内容
一般兄弟选择器包含相邻兄弟选择的内容
相邻兄弟选择器和一般兄弟选择器所选择到的元素，必须在同一个父元素下
查看全部 -
jquery格式
例：$(document).ready( ); 等页面的文档（document）中的节点都加载完毕后，再执行后续的代码。
$符号为jQuery对象的缩写形式
通过$( )函数来获取页面中的元素
$(document).ready 的作用是等页面的文档（document）中的节点都加载完毕后，再执行后续的代码，因为我们在执行代码的时候，可能会依赖页面的某一个元素，我们要确保这个元素真正的的被加载完毕后才能正确的使用。
查看全部 -
jQuery选择器之可见性筛选选择器
元素有显示状态与隐藏状态
$(":visible") 选择所有显示的元素
$(":hidden") 选择所有隐藏的元素
:hidden选择器，不仅仅包含样式是display="none"的元素，还包括隐藏表单、visibility等等
可以隐藏一个元素：
CSS display的值是none。
type="hidden"的表单元素。
宽度和高度都显式设置为0。
一个祖先元素是隐藏的，该元素是不会在页面上显示
CSS visibility的值是hidden
CSS opacity的指是0
查看全部 -
jQuery选择器值内容筛选选择器
$(":contains(text)") 选择所有包含指定文本的元素
$(":parent") 选择所有含有子元素或者文本的元素
$("empty") 选择所有没有子元素的元素(包含文本节点)
$(":has(selector)") 选择元素至少包含指定选择器的元素
注意事项：
:contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素
如果:contains匹配的文本包含在元素的子元素中，同样认为是符合条件的。
:parent与:empty是相反的，两者所涉及的子元素，包括文本节点
查看全部 -
jQuery选择器之基本筛选选择器
筛选选择器用来更快捷的找到所需的DOM元素。
筛选选择器的用法与CSS的伪元素相似，选择器用冒号“：”开头
$(":first") 匹配第一个·元素
$(":last") 匹配最后一个元素
$(":not(selector)") 一个用来过滤的选择器，选择所有元素去除不匹配给定的选择器元素
$(":eq(index)") 在匹配的集合中选择索引值为index的元素
$(":gt(index)") 选择匹配集合中所有大于给定index（索引值）的元素
$(":even") 选择索引值为偶数的元素，从0开始计数
$(":odd") 选择索引值为奇数的元素，从0开始计数
$(":lt(index)") 选择匹配集合中所有索引值小于始定index参数的元素
$(":header") 选择所有标题元素，如h1、h2、h3
$(":lang(language)") 选择指定语言的所有元素
$(":root") 选择该文件的根元素
$("animated") 选择所有正在执行动画效果的元素
注意事项：
:eq(), :lt(), :gt(), :even, :odd 用来筛选他们前面的匹配表达式的集合元素，根据之前匹配的元素在进一步筛选，注意jQuery合集都是从0开始索引
gt是一个段落筛选，从指定索引的下一个开始，gt(1) 实际从2开始
查看全部 -
jQuery选择器之层级选择器
选择器中的层级选择器就是用来处理这种关系
如：子元素、后代元素、兄弟元素、相邻元素
$("parent > child") 子选择器：选择所有指定"parent"元素中指定的"child"的直接子元素 $("ancesber descendant") 后代选择器：选择给定的祖先元素的所有后代元素，一个元素的后代可能是该元素的一个孩子，孙子，曾孙等 $("prev + next") 相邻兄弟选择器：选择所有紧接在"prev"元素后的"next"元素 $("prev ~ siblings") 一般兄弟选择器：匹配"prev"元素之后的所有兄弟元素，具有相同的父元素，并匹配过滤“siblings”选择器层级选择器都有一个参考节点
后代选择器包含子选择器的选择的内容
一般兄弟选择器包含相邻兄弟选择的内容
相邻兄弟选择器和一般兄弟选择器所选择到的元素，必须在同一个父元素下
查看全部 -
jQuery选择器之全选择器
jQuery中我们也可以通过传递*选择器来选中文档页面中的元素
$( "*" )
如果要获取文档中所有的元素，通过document.getElementsByTagName()中传递"*"同样可以获取到
查看全部 -
jQuery选择器之元素选择器
元素选择器：根据给定（html）标记名称选择所有的元素
$( "element" )
搜索指定元素标签名的所有节点，这个是一个合集的操作
JavaScript中是通过getElementsByTagName方法得到页面所有的<div>元素
在jQuery的内部中是通过getElementsByTagName方法去实现的
查看全部 -
jQuery选择器之类选择器
类选择器：通过class样式名来获取节点
$( ".class" )
优势：可多选。
JavaScript是使用getElementsByClassName()函数实现的
jQuery内部是使用JavaScript的原生getElementsByClassName()函数来实现的
查看全部 -
jQuery选择器之id选择器
javaScript中获取id的方法：
document.getElementById(id);
jQuery内部使用JavaScript函数document.getElementById()来处理ID的获取
jQuery中获取id的方法
$( "#id" )
查看全部
举报