-
jQuery的属性与样式之.css()与.addClass()设置样式的区别 可维护性: .addClass()的本质是通过定义个class类的样式规则，给元素添加一个或多个 类。.css方法是通过JavaScript大量代码进行改变元素的样式 通过.addClass()我们可以批量的给相同的元素设置统一规则，变动起来比较方 便，可以统一修改删除。如果通过.css()方法就需要指定每一个元素一一的修改 ，日后维护也要一一的修改，比较麻烦 灵活性: 通过.css()方式可以很容易动态的去改变一个样式的属性，不需要去繁琐的定义个 class类的规则。一般来说在不确定布局规则，通过动态生成的HTML代码结构中， 都是通过.css()方法处理的 样式值: .addClass()本质只是针对class的类的增加删除，不能获取到指定样式的属性的值 ，.css()可以获取到指定样式的值。 样式的优先级: 内联样式 > 内部样式 > 外部样式 1..addClass()方法是通过增加class名的方式，那么这个样式是在外部文件或者 内部样式中先定义好的，等到需要的时候在附加到元素上 2.通过.caa()方法处理的是内联样式，直接通过元的style属性附加到元素上 即:通过.css()方法设置的样式属性优先要高于.addClass()方法 .addClass()与.css()各有利弊。 一般是静态的结构，都确定了布局的规则，可以用.addClass()方法，增加统一的类规则。 如果是动态的HTML结构，在不确定规则，或者经常变化的情况下，一般多考虑.css()方式查看全部
-
jQuery的属性与样式之样式操作.css() .css的方法:获取元素样式属性的计算值或者设置元素的CSS属性 获取: 1. .css(propertyName):获取匹配元素集合中的第一个元素的样式属性的计算值 2. .css(propertyNames):传递一组数组，返回一个对象结果 设置: 1. .css(propertyName,value):设置CSS 2. .css(propertyName,function):可以传入一个回掉函数，返回取到对应的值进行 处理 3. .css(properties):可以传一个对象，同时设置多个样式 注意事项: 1.浏览器属性获取方式不同，在获取某些值的时候都jQuery采用统一的处理，比 如颜色采用RBG，尺寸采用px 2..css()方法支持驼峰写法与大小写混搭的写法，内部做了容错的处理 3.当一个数只被作为值(value)的时候,jQuery会将其转换为一个字符串， 并在字符串的结尾处添加px，例如.css("witdh",50}) 与.css("width","50px"})一样查看全部
-
jQuery的属性与样式之切换样式.toggleClass() .toggleClass()方法:在匹配的元素集合中的每个元素上添加或删除一个或多个样式类， 取决于这个样式类是否存在或值切换属性。即:如果存在(不存在) 就删除(添加)一个类。 1.toggleClass(className):在匹配元素集合中的每个元素用来切换一个或多个(用空格隔 开)样式类名。 2.toggleClass(className,switch):一个布尔值用于判断样式是否应该被添加或移除 3.toggleClass([switch]):一个用来判断样式类添加还是移除的 布尔值 4.toggleClass(function(index,class,switch)[,switch]):用来返回在匹配的元素集合 中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和 元素旧的样式类作为参数。 注意事项: 1.toggleClass是一个互斥的逻辑，也就是通过判断对应的元素上是否存在指定 的class名，如果有就删除如果没有就增加 2.toggleClass会保留原有的Class名后新增，通过空格隔开查看全部
-
自己写的时候, 把这段jquery代码写在了<head>, 然后忘记写$(document).ready()..., 结果获取到的$('div')长度为0, 没有出现效果查看全部
-
$( "parent > child" ) 子选择器：选择所有指定“parent”元素中指定的"child"的直接子元素。 $("ancestor descendant") 后代选择器：选择给定的祖先元素的所有后代元素, 一个元素的后代可能是该元素的一个孩子，孙子，曾孙等 $("prev + next") 相邻兄弟选择器：选择所有紧接在“prev”元素后的“next”元素 $("prev ~ siblings") 一般兄弟选择器：匹配“prev”元素之后的所有 兄弟元素。具有相同的父元素，并匹配过滤“siblings”选择器查看全部
-
ideas 区别 JQuery对象 和 DOM对象, JQuery对象命名第一个字母'$', 如例子中的'p' 和 '$p' 两个变量; jquery对象好像可以进行连续的操作, $p.html().css().... 这一点的理解: 连续的操作不是都基于第一个对象($p)进行, 而是每进行一次操作后的返回值进行, 所以如果要进行连续的操作, 需要该操作之前的那个操作具有有效的返回值. 如 $("div").html() 只会返回(获取)第一个匹配元素的inner html内容, 则后续的css()操作将无法进行(报错); $("div").html("") 会返回所有匹配的元素(设置匹配元素的inner html内容), css()操作将应用在所有匹配元素上, 即$("div") 所以, 是不是只要是设置操作(没有改变dom结构), 就会返回操作元素本身, 即与第一个操作对象 $(selector) 是一样的. 而如果是根据jquery对象去获取内容, 则无法进行连续操作. css() 方法 设置 或 返回 被选元素的一个或多个样式属性。 - 返回 CSS 属性 如需返回指定的 CSS 属性的值，请使用如下语法： css("propertyname"); 下面的例子将返回首个匹配元素的 background-color 值： $("p").css("background-color"); - 设置 CSS 属性 (返回操作对象) 如需设置指定的 CSS 属性，请使用如下语法： css("propertyname","value"); 下面的例子将为所有匹配元素设置 background-color 值： $("p").css("background-color","yellow"); - 设置多个 CSS 属性 如需设置多个 CSS 属性，请使用如下语法： css({"propertyname":"value","propertyname":"value",...}); //像json的格式 下面的例子将为所有匹配元素设置 background-color 和 font-size： $("p").css({"background-color":"yellow","font-size":"200%"});查看全部
-
jQuery 语法 jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。 基础语法： $(selector).action() 美元符号定义 jQuery 选择符（selector）"查询"和"查找" HTML 元素 jQuery 的 action() 执行对元素的操作 实例: $(this).hide() - 隐藏当前元素 $("p").hide() - 隐藏所有 <p> 元素 $(document).ready(function(){}); 简洁写法: $(function(){ // 开始写 jQuery 代码... }); ______________________________________ 总结 *** jquery选择器中, css选择器需要加双引号, 对象变量本身不需要加引号; *** html() 方法 返回 或 设置 被选元素的内容 (inner HTML); 如果该方法未设置参数，则返回被选元素的当前内容。 <div><em>test</em>我是第一个div</div> <div>我是第二个div</div> 当使用该方法返回一个值时，它会返回第一个匹配元素的内容; $(selector).html() (没有写参数; 返回第一个匹配元素的inner html内容) 例子: console.log($("div").html()); -> test.html:10 <em>test</em>我是第一个div 当使用该方法设置一个值时，它会覆盖所有匹配元素的inner html内容。(并返回所有匹配的元素, 即为 $(selector), 一个类数组对象) 例子: console.log($("div")) console.log($("div").html("")); //空字符串 会清空匹配元素的inner html内容 两个均返回: (2) [div, div, prevObject: init(1), context: document, selector: "div"] //未展开查看全部
-
JavaScript代码 var $div = $('div') //jQuery对象 var div = $div[0] //转化成DOM对象 div.style.color = 'red' //操作dom对象的属性 用jQuery找到所有的div元素（3个），因为jQuery对象也是一个数组结构，可以通过数组下标索引找到第一个div元素，通过返回的div对象，调用它的style属性修改第一个div元素的颜色。这里需要注意的一点是，数组的索引是从0开始的，也就是第一个元素下标是0 通过jQuery自带的get()方法 jQuery对象自身提供一个.get() 方法允许我们直接访问jQuery对象中相关的DOM节点，get方法中提供一个元素的索引： var $div = $('div') //jQuery对象 var div = $div.get(0) //通过get方法，转化成DOM对象 div.style.color = 'red' //操作dom对象的属性查看全部
-
1、contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素 2、如果:contains匹配的文本包含在元素的子元素中，同样认为是符合条件的。 3、parent与:empty是相反的，两者所涉及的子元素，包括文本节点查看全部
-
var $this= $(this) // jQuery内部，把this封装成jQ，调用外部选择器查看全部
-
$(":first") 匹配第一个元素 $(":last") 匹配最后一个元素 $(":eq(index)") 在匹配的集合中选择索引值为 index 的元素 $(":lt(index)") 选择匹配集合中所有小于给定 index （索引值）的元素 $(":gt(index)") 选择匹配集合中所有大于给定 index （索引值）的元素 $(":even") 选择索引值为偶数的元素，从 0 开始计数查看全部
-
$(document).ready 的作用是等页面的文档（document）中的节点都加载完毕后，再执行后续的代码，因为在执行代码的时候，可能会依赖页面的某一个元素，要确保这个元素真正的的被加载完毕后才能正确的使用。查看全部
-
#转自呦呦慕粉 其实这段代码有问题，你先改下，我再告诉你。 你把里边的那个.html改为.append，就能出现正常结果了，因为HTML虽然也是添加内容，但会覆盖以前的，虽然进行六次，但也覆盖六次最终只显示最后一次的。。改为这个$("#show").append('元素的长度的 = ' + ele.length+"<br/>")，，正确结果如下： http://img1.sycdn.imooc.com//5932af2600015ba502890360.jpg 其实整段代码的意思是： 首先， <script type="text/javascript"> show($("#div1:visible")); </script> 这段代码是先找到ID是div1的可见的元素。然后作为function show (ele) 函数的实参传递给形参ele。。。。if (ele instanceof jQuery) 这句话是进行判断，看ele是否符合jquery对象，如果是就执行$("#show").append('元素的长度的 = ' + ele.length+"<br/>")，这句代码是，选择ID为show的元素节点在其里边添加内容。所添加的内容是元素的长度，这个元素就是可见的元素，<p id="div1" >display</p>就是这个元素，很明显它有style="display:none;是不可见的，，所以可见的元素长度为0，，剩下的一样。。 特别说明：元素的visibility: hidden 或 opacity: 0被认为是可见的，因为他们仍然占用空间布局。，所以在判断ID为div3的元素时，它是可见的，依次可见元素长度为1。 剩下三个是判断是否不可见元素的长度，，那他们刚好与前边三个相反。。前三个时可见元素长度为0,0,1。那不可见元素长度就是1,1,0。查看全部
-
var $div = $(div); // Dom转换成jQ var div = $div[0]; // jQ转换成Dom var div = $div.get(0);查看全部
-
$(document).ready(function() { // jQ页面加载后执行 });查看全部
举报
0/150
提交
取消