-
jQuery的属性与样式之样式操作.css() 获取: .css( propertyName ) :获取匹配元素集合中的第一个元素的样式属性的计算值 .css( ['width','height']):传入数组返回对象 设置: .css(propertyName, value ):设置CSS .css( propertyName, function ):可以传入一个回调函数,返回取到对应的值进行处理 .css( {width:100,height:100}):可以传一个对象,同时设置多个样式查看全部
-
jQ之切换样式toggleClass() 1.toggleClass(className) 样式如果存在删除,如果不存在就添加。 2.toggleClass(className,switch) switch布尔值,规定只添加或只删除类。 3.toggleClass(function(index,class),switch) index:接受选择器的index位置。 class:接受选择器的当前的类。查看全部
-
jQuery的属性与样式之删除样式.removeClass() //.removeClass() 方法允许我们指定一个函数作为参数,返回将要被删除的样式 $('.right > div:first').removeClass(function(index,className){ //className = aa bb imoocClass //把div的className赋给下一个兄弟元素div上作为它的class $(this).next().addClass(className) //删除自己本身的imoocClass return 'imoocClass' })查看全部
-
.html(),.text()和.val()的差异总结: 1. .text()读取元素的纯文本内容,包括后代元素;.html()是用来读取元素的html内容(包括html标签);val只用来读取表单的value值; 2. html()和text()不能用于表单元素; 3. .val()方法和.html()相同,如果其应用在多个元素上时,只能读取第一个表单元素的"value"值,但是.text()和他们不一样,如果.text()应用在多个元素上时,将会读取所有选中元素的文本内容。查看全部
-
jQuery的属性与样式之.val() .val()无参数,获取匹配的元素集合中第一个元素的当前值 .val( value ),设置匹配的元素集合中每个元素的value值 .val( function ) ,一个用来返回设置值的函数 注意事项: 处理select元素是无则返回null有则返回单个字段或数组查看全部
-
jQuery选择器之特殊选择器this this,表示当前的上下文对象是一个html对象,可以调用html对象所拥有的属性和方法。 $(this),代表的上下文对象是一个jquery的上下文对象,可以调用jQuery的方法和属性值。 $(this)//this对象转jQuery对象查看全部
-
jQ之表单对象属性筛选选择器 $("input:enabled")//查找所有input所有可用的(未被禁用的元素)input元素。 $("input:disabled")//查找所有input所有不可用的(被禁用的元素)input元素。 $("input:checked")//查找所有input所有勾选的元素(单选框,复选框) $("option:selected")//查找所有option元素中,有selected属性被选中的选项查看全部
-
jQuery选择器之子元素筛选选择器 $(".first-div a:first-child") //查找class="first-div"下的第一个a元素//针对所有父级下的第一个 $(".first-div a:last-child")//查找class="first-div"下的最后一个a元素//针对所有父级下的最后一个 $(".first-div a:only-child")//查找class="first-div"下的只有一个子元素的a元素 $(".last-div a:nth-child(2)")//查找a的父元素的第2个子元素 $(".last-div a:nth-child(3n+1)")//也可以这样写 $(".last-div a:nth-last-child(2)")//查找class="last-div"下的倒数第二个a元素 注意事项: 1.:first只匹配一个单独的元素,但是:first-child选择器可以匹配多个:即为每个父级元素匹配第一个子元素。这相当于:nth-child(1) 2.:last 只匹配一个单独的元素, :last-child 选择器可以匹配多个元素:即,为每个父级元素匹配最后一个子元素 3.如果子元素只有一个的话,:first-child与:last-child是同一个 4.:only-child匹配某个元素是父元素中唯一的子元素,就是说当前子元素是父元素中唯一的元素,则匹配 5.jQuery实现:nth-child(n)是严格来自CSS规范,所以n值是“索引”,也就是说,从1开始计数,:nth-child(index)从1开始的,而eq(index)是从0开始的 6.nth-child(n) 与 :nth-last-child(n) 的区别前者是从前往后计算,后者从后往前计算查看全部
-
jQ之属性筛选选择器 $("div[name=p1]")//查找所有div中,属性name=p1的div元素 $("div[p2]")//查找所有div中,有属性p2的div元素 $("div[name|='a']")//查找所有div中,有属性name中的值等于a或以a为前缀且由'-'为分隔符的div元素 $("div[name~='a']")//查找所有div中,有属性name中的值包含一个“a”且以空格为分隔符的div元素 $("div[name^='imooc']")//查找所有div中,属性name的值是用imooc开头的 $("div[name$='imooc']")//查找所有div中,属性name的值是用imooc结尾的 $("div[name*='test']")//查找所有div中,有属性name中的值包含一个test字符串的div元素 $("div[testattr!='true']")//查找所有div中,有属性testattr中的值没有包含"true"的div $("input[xxx][id=p2][type]")//同时满足多个条件查看全部
-
jQ之可见性筛选选择器 注:jq判断元素可见性实际判断的是元素在文档中是否占据空间; 如果元素中占据文档中一定的空间,元素被认为是可见的。 可见元素的宽度或高度,是大于零。 元素的visibility: hidden 或 opacity: 0被认为是可见的,因为他们仍然占用空间布局。 另外,我们有几种方式可以隐藏一个元素: CSS display的值是none。 type="hidden"的表单元素。 宽度和高度都显式设置为0。 一个祖先元素是隐藏的,该元素是不会在页面上显示 CSS visibility的值是hidden CSS opacity的指是0查看全部
-
jQuery选择器之内容筛选选择器 //查找所有class='div'中DOM元素中包含"contains"的元素节点 $(".div:contains('contains')").css("color", "#CD00CD"); //查找所有class='div'中DOM元素中包含"span"的元素节点 $(".div:has(span)").css("color", "blue"); //所有含a标签的父元素 $("a:parent").css("border", "3px groove blue"); //找到没有子元素的a元素 $("a:empty").text(":empty").css("border", "3px groove red");查看全部
-
层级选择器都有一个参考节点 后代选择器包含子选择器的选择的内容 一般兄弟选择器包含相邻兄弟选择的内容 相邻兄弟选择器和一般兄弟选择器所选择到的元素,必须在同一个父元素下查看全部
-
jQ之基本筛选选择器查看全部
-
jQ之层级选择器 子元素 : $('div > p') 选择所有div元素里面的子元素P 后代元素 :$('div p') 选择所有div元素里面的p元素 兄弟元素 :$(".prev ~ div")选取prev后面的第一个的div兄弟节点 相邻元素 :$(".prev + div")选取prev后面的所有的div兄弟节点 仔细观察层级选择器之间相似与不同点: 1.层级选择器都有一个参考节点 2.后代选择器包含子选择器的选择的内容 3.一般兄弟选择器包含相邻兄弟选择的内容 4.相邻兄弟选择器和一般兄弟选择器所选择到的元素,必须在同一个父元素下查看全部
-
选择器中的层级选择器就是用来处理这种关系 子元素 后代元素 兄弟元素 相邻元素 层级选择器都有一个参考节点 后代选择器包含子选择器的选择的内容 一般兄弟选择器包含相邻兄弟选择的内容 相邻兄弟选择器和一般兄弟选择器所选择到的元素,必须在同一个父元素下查看全部
举报
0/150
提交
取消