-
选择器解析： 1.$( "parent > child" ) 子选择器：选择所有指定“parent”元素中指定的"child"的直接子元素。 2.$("ancestor descendant") 后代选择器：选择给定的祖先元素的所有后代元素, 一个元素的后代可能是该元素的一个孩子，孙子，曾孙等 3.$("prev + next") 相邻兄弟选择器：选择所有紧接在“prev”元素后的“next”元素 4.$("prev ~ siblings") 一般兄弟选择器：匹配“prev”元素之后的所有 兄弟元素。具有相同的父元素，并匹配过滤“siblings”选择器查看全部
-
代码分析： $(document).ready 的作用是等页面的文档（document）中的节点都加载完毕后，再执行后续的代码，因为我们在执行代码的时候，可能会依赖页面的某一个元素，我们要确保这个元素真正的的被加载完毕后才能正确的使用。查看全部
-
元素选择器查看全部
-
论原生js获取标签名、id名、类名之兼容性： 1.IE会将注释节点实现为元素，所以在IE中调用getElementsByTagName里面会包含注释节点，这个通常是不应该的 2.getElementById的参数在IE8及较低的版本不区分大小写IE7及较低的版本中，表单元素中，如果表单A的name属性名用了另一个元素B的ID名并且A在B之前，那么getElementById会选中A 3.IE8及较低的版本，浏览器不支持getElementsByClassName查看全部
-
jQuery的属性与样式之html()及.text() 读取、修改元素的html结构或者元素的文本内容是常见的DOM操作，jQuery针对这样的处理提供了2个便捷的方法.html()与.text() .html()方法 获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容，具体有3种用法： .html() 不传入值，就是获取集合中第一个匹配元素的HTML内容 .html( htmlString ) 设置每一个匹配元素的html内容 .html( function(index, oldhtml) ) 用来返回设置HTML内容的一个函数 注意事项： .html()方法内部使用的是DOM的innerHTML属性来处理的，所以在设置与获取上需要注意的一个最重要的问题，这个操作是针对整个HTML内容（不仅仅只是文本内容） .text()方法 得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，或设置匹配元素集合中每个元素的文本内容为指定的文本内容。，具体有3种用法： .text() 得到匹配元素集合中每个元素的合并文本，包括他们的后代 .text( textString ) 用于设置匹配元素内容的文本 .text( function(index, text) ) 用来返回设置文本内容的一个函数 注意事项： .text()结果返回一个字符串，包含所有匹配元素的合并文本 .html与.text的异同: .html与.text的方法操作是一样，只是在具体针对处理对象不同 .html处理的是元素内容，.text处理的是文本内容 .html只能使用在HTML文档中，.text 在XML 和 HTML 文档中都能使用 如果处理的对象只有一个子文本节点，那么html处理的结果与text是一样的 火狐不支持innerText属性，用了类似的textContent属性，.text()方法综合了2个属性的支持，所以可以兼容所有浏览器查看全部
-
jQuery的属性与样式之.attr()与.removeAttr() 每个元素都有一个或者多个特性，这些特性的用途就是给出相应元素或者其内容的附加信息。如：在img元素中，src就是元素的特性，用来标记图片的地址。 操作特性的DOM方法主要有3个，getAttribute方法、setAttribute方法和removeAttribute方法，就算如此在实际操作中还是会存在很多问题，这里先不说。而在jQuery中用一个attr()与removeAttr()就可以全部搞定了，包括兼容问题 jQuery中用attr()方法来获取和设置元素属性,attr是attribute（属性）的缩写，在jQuery DOM操作中会经常用到attr() attr()有4个表达式 attr(传入属性名)：获取属性的值 attr(属性名, 属性值)：设置属性的值 attr(属性名,函数值)：设置属性的函数值 attr(attributes)：给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … } removeAttr()删除方法 .removeAttr( attributeName ) : 为匹配的元素集合中的每个元素中移除一个属性（attribute） 优点： attr、removeAttr都是jQuery为了属性操作封装的，直接在一个 jQuery 对象上调用该方法，很容易对属性进行操作，也不需要去特意的理解浏览器的属性名不同的问题 注意的问题： dom中有个概念的区分：Attribute和Property翻译出来都是“属性”，《js高级程序设计》书中翻译为“特性”和“属性”。简单理解，Attribute就是dom节点自带的属性 例如：html中常用的id、class、title、align等： <div id="immooc" title="慕课网"></div> 而Property是这个DOM元素作为对象，其附加的内容，例如,tagName, nodeName, nodeType,, defaultChecked, 和 defaultSelected 使用.prop()方法进行取值或赋值等 获取Attribute就需要用attr，获取Property就需要用prop查看全部
-
$("div").html()是使用标签选择器获取div标签，并将内容设置为：您好！通过慕课网学习jQuery才是最佳的途径。 对应于javascript中的各类选择器，如： $("*") ——所有元素 $("#lastname") ——id="lastname" 的元素 $(".intro") ——所有 class="intro" 的元素 $("p") ——所有 <p> 元素 $(".intro.demo") ——所有 class="intro" 且 class="demo" 的元素 $(document).ready 的作用是等页面的文档（document）中的节点都加载完毕后，再执行后续的代码，因为我们在执行代码的时候，可能会依赖页面的某一个元素，我们要确保这个元素真正的的被加载完毕后才能正确的使用。查看全部
-
$( "parent > child" ) 子选择器：选择所有指定“parent”元素中指定的"child"的直接子元素。 $("ancestor descendant") 后代选择器：选择给定的祖先元素的所有后代元素, 一个元素的后代可能是该元素的一个孩子，孙子，曾孙等 $("prev + next") 相邻兄弟选择器：选择所有紧接在“prev”元素后的“next”元素 $("prev ~ siblings") 一般兄弟选择器：匹配“prev”元素之后的所有 兄弟元素。具有相同的父元素，并匹配过滤“siblings”选择器 $( "parent > child" ) 子选择器：选择所有指定“parent”元素中指定的"child"的直接子元素。 $("ancestor descendant") 后代选择器：选择给定的祖先元素的所有后代元素, 一个元素的后代可能是该元素的一个孩子，孙子，曾孙等 $("prev + next") 相邻兄弟选择器：选择所有紧接在“prev”元素后的“next”元素 $("prev ~ siblings") 一般兄弟选择器：匹配“prev”元素之后的所有 兄弟元素。具有相同的父元素，并匹配过滤“siblings”选择器查看全部
-
> （大于号）紧跟父子关系 如$("div > p")表示选择div下的直接层是p的节点。 + （加号） 紧跟兄弟关系 如$("div + p")表示选择div同层的左右相邻的p节点。 ~ （波浪线）任意距离兄弟关系 如$("div + p")表示选择div同层的p节点。 (空格) 任意层父子关系 如$("div p")表示选择div下的p节点（不管中间隔多少层）。 ,(逗号) 表示选择器组合，如$("div p, span p")表示div下p节点和span下p节点。查看全部
-
2_17查看全部
-
综合案例 这是一个综合的案例，主要就是展示选择器的使用，案例中的选择器是相对比较复杂的，很多时候我们不需要写这么复杂的选择器，但是案例是为了展示整个选择器的知识点的运用 右边是一段文本，我们通过不同的选择器给指定的文字赋予颜色 分析一段复杂的选择器： $("#menu_con div.tag dd > p:first-child") 这段组合的选择器表达式用到了几个之前学到的选择器：ID、Class、元素、层级、子元素筛选器 当用到筛选器 :first-child的时候我们就知道了，这肯定是一组合集，意味着p元素是有多个，而且是分布在不同父元素dd里面的 圈圈中就是选择器对应的选择到的元素： 这个选择器其实挺复杂的，现实的开发中，我们应该要避免出现这么冗余繁琐的选择器，可以最简单的在a元素的父元素上加一个id，或者class直接定位即可。当然这样的处理可能无形中可能要多出一个无意义的属性了 PS：本节主要是对选择器使用的练习，有其他需后期学到的知识提前出现，童鞋们可以酌情去研究和思考。查看全部
-
假如给页面一个P元素绑定一个事件: p.addEventListener('click',function(){ //this === p //以下两者的修改都是等价的 this.style.color = "red"; p.style.color = "red"; },false); 通过addEventListener绑定的事件回调中，this指向的是当前的dom对象，所以再次修改这样对象的样式，只需要通过this获取到引用即可 this.style.color = "red" 但是这样的操作其实还是很不方便的，这里面就要涉及一大堆的样式兼容，如果通过jQuery处理就会简单多了，我们只需要把this加工成jQuery对象 换成jQuery的做法： $('p').click(function(){ //把p元素转化成jQuery的对象 var $this= $(this) $this.css('color','red') }) 通过把$()方法传入当前的元素对象的引用this，把这个this加工成jQuery对象，我们就可以用jQuery提供的快捷方法直接处理样式了 总体： this，表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性和方法。 $(this),代表的上下文对象是一个jquery的上下文对象，可以调用jQuery的方法和属性值。查看全部
-
jQuery选择器之特殊选择器this 相信很多刚接触jQuery的人，很多都会对$(this)和this的区别模糊不清，那么这两者有什么区别呢？ this是JavaScript中的关键字，指的是当前的上下文对象，简单的说就是方法/属性的所有者 下面例子中，imooc是一个对象，拥有name属性与getName方法,在getName中this指向了所属的对象imooc var imooc = { name:"慕课网", getName:function(){ //this,就是imooc对象 return this.name; } } imooc.getName(); //慕课网 当然在JavaScript中this是动态的，也就是说这个上下文对象都是可以被动态改变的(可以通过call,apply等方法)，具体的大家可以查阅相关资料 同样的在DOM中this就是指向了这个html元素对象，因为this就是DOM元素本身的一个引用查看全部
-
jQuery选择器之表单对象属性筛选选择器 除了表单元素选择器外，表单对象属性筛选选择器也是专门针对表单元素的选择器，可以附加在其他选择器的后面，主要功能是对所选择的表单元素进行筛选 表单筛选选择器的描述： 注意事项： 选择器适用于复选框和单选框，对于下拉框元素, 使用 :selected 选择器 在某些浏览器中，选择器:checked可能会错误选取到<option>元素，所以保险起见换用选择器input:checked，确保只会选取<input>元素查看全部
-
.addClass与.css方法各有利弊，一般是静态的结构，都确定了布局的规则，可以用addClass的方法，增加统一的类规则 如果是动态的HTML结构，在不确定规则，或者经常变化的情况下，一般多考虑.css()方式 通过.css方法设置的样式属性优先级要高于.addClass方法(即使.addClass方法是定义在.css方法自后，也无法对.css方法设置的样式进行覆盖)查看全部
举报
0/150
提交
取消