-
class 类型的 在$选择元素符号之前要加 .查看全部
-
var $p = $('#imooc2'); $p.html('P2:您好!通过慕课网学习jQuery才是最佳的途径').css('color','red');查看全部
-
DOM对象转化成jQuery对象 相比较jquery转化成DOM,开发中更多的情况是把一个dom对象加工成jquery对象。$(参数) 是一个多功能的方法,通过传递不同的参数而产生不同的作用。 如果传递给$(DOM)函数的参数是一个DOM对象,jquery方法会把这个dom对象给包装成一个新的jquery对象 通过$(dom)方法将普通的dom对象加工成jquery对象之后,我们就可以调用jquery的方法了 HTML代码 <div>元素一</div> <div>元素二</div> <div>元素三</div> javascript代码 var div = document.getElementByTagname('div'); //dom对象 var $div = $(div); //jquery对象 var $first = $div.first(); //找到第一个div元素 $first.css('color','red'); //给第一个元素设置颜色 通过geiElementByTagName获取到所有div节点的元素,结果是一个dom合集对象,不过这个对象是一个数组合集(3个div元素). 通过$(div)方法转化成jquery对象,通过调用jquery对象中的first与css方法查找第一个元素并且改变其颜色。查看全部
-
jQuery库本质上还是javascript代码,它只是对javascript语言进行包装处理,为的是提供更好更方便快捷的DOM处理与开发中经常使用的功能,我们使用jQuery的同时也能混合javascript原生代码一起使用。在很多场景中,我们需要jQuery与dom能相互的转换,它们都是可以操作的Dom元素,jQuery是一个类数组对象,而DOM对象就是一个单独的DOM元素。 如何把jQuery对象转成DOM对象? 利用数组下标的方式读到jQuery中的DOM对象 html代码 <div>元素一</div> <div>元素二</div> <div>元素三</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()方法允许我们直接访问Query对象中相关的Dom节点,get方法中提供一个元素的索引: var $div = $('div') var div = $div.get(0) //通过get方法,转化成dom对象 div.style.color = ‘red’ //操作DOM对象的属性查看全部
-
jQuery对象与DOM对象查看全部
-
jQuery对象是类数组对象查看全部
-
jQuery的处理: var $p = $('#imooc'); $p.html('您好!通过慕课网学习jQuery才是最佳的途径').css('color','red'); 通过$('#imooc')方法会得到一个$p的jQuery对象,$p是一个类数组对象。这个对象里面包含了DOM对象的信息,然后封装了很多操作方法,调用自己的方法html与css,得到的效果与标准的JavaScript处理结果是一致的。 通过标准的JavaScript操作DOM与jQuyer操作DOM的对比,我们不难发现: 通过jQuery方法包装后的对象,是一个类数组对象。它与DOM对象完全不同,唯一相似的是它们都能操作DOM。 通过jQuery处理DOM的操作,可以让开发者更专注业务逻辑的开发,而不需要我们具体知道哪个DOM节点有那些方法,也不需要关心不同浏览器的兼容性问题,我们通过jQuery提供的API进行开发,代码也会更加精短。查看全部
-
dom中有个概念的区分:Attribute和Property翻译出来都是“属性”,《js高级程序设计》书中翻译为“特性”和“属性”。简单理解,Attribute就是dom节点自带的属性查看全部
-
jQuery是一个JavaScript脚本库,不需要特别安装,只需在head标签中通过script标签引入。查看全部
-
jQuery提供一个toggleClass方法用于简化这种互斥的逻辑,通过toggleClass方法动态添加删除Class,一次执行相当于addClass,再次执行相当于removeClass .toggleClass( )方法:在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即:如果存在(不存在)就删除(添加)一个类 .toggleClass( className ):在匹配的元素集合中的每个元素上用来切换的一个或多个(用空格隔开)样式类名 .toggleClass( className, switch ):一个布尔值,用于判断样式是否应该被添加或移除 .toggleClass( [switch ] ):一个用来判断样式类添加还是移除的 布尔值 .toggleClass( function(index, class, switch) [, switch ] ):用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数查看全部
-
.html(),.text(),.val()的差异总结:(http://www.imooc.com/code/8555) 都是用来读取选定元素的内容; .html()用来读取元素的html内容(包括html标签) .text()用来读取元素的纯文本内容,包括其后代元素 .val()用来读取表单元素的value值 其中.html()和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上;另外.html()方法使用在多个元素上时,只读取第一个元素;.val()方法和.html()相同,如果其应用在多个元素上时,只能读取第一个表单元素的"value"值,但是.text()和他们不一样,如果.text()应用在多个元素上时,将会读取所有选中元素的文本内容。查看全部
-
.html与.text的异同: 1、.html与.text的方法操作时一样,只是在具体针对的处理对象不同; 2、.html处理的是元素内容,.text处理的是文本内容; 3、.html只能使用在HTML文档中,.text在XML和HTML文档中都能使用; 4、如果处理的对象只有一个子文本节点,那么html处理的结果与text是一样的; 5、火狐不支持innerText属性,用了类似的textContent属性,.text()方法综合了两个属性的支持,所以可以兼容所有浏览器。 .html()方法内部使用的是DOM的innerHTML属性来处理的,所以在设置与获取上需要注意的一个最重要的问题,这个操作时针对整个HTML内容(不仅仅只是文本内容)。查看全部
-
//找到男装下第一类衣服中的第一个p元素,并改变颜色 //可以通过子类选择器 p:first-child 筛选出第一个p元素 $("#menu_con div.tag dd > p:first-child").css('color','#9932CC'); //找到男装下第一类衣服把a元素从顺序1-4加上颜色 //可以通过基本筛选器lt,选择匹配集合中所有索引值小于给定index参数的元素 //注意了index是从0开始计算,所以选在1-4,为对应的index就是4 $("#menu_con > div.first dd:eq(0)>a:lt(4)").css('color','red'); //找到男装所有a元素中属性名name="setColor"的元素,并设置颜色 //这里用的属性选择器[attribute='value']选择指定属性是给定值的元素 $("#menu_con a[name='setColor']").css('color','blue'); </script> <script type="text/javascript"> //不分男女,选中第一类衣服中第9个a元素,并改变颜色 //这里用了nth-child 选择的他们所有父元素的第n个子元素 $("#menu div.tag dd a:nth-child(10)").css('color','#66CD00'); //找到女装下第一类衣服,把a元素中包含文字"更多"的节点,改变颜色 $(".tag:first a:contains('更多')").css('color','#C71585');查看全部
-
dom中有个概念的区分: Attribute和Property翻译出来都是“属性”,《js高级程序设计》书中翻译为“特性”和“属性”。简单理解,Attribute就是dom节点自带的属性,eg:html中常用的id、class、title、align等;而Property是这个DOM元素作为对象,其附加的内容,eg:tagName、nodeName、nodeType、defaultChecked和defaultSelected,使用.prop方法就行取值或赋值。 获取Attribute就用attr,获取Propert就需要用prop。查看全部
-
$( "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”选择器查看全部
举报
0/150
提交
取消