-
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <script src="http://code.jquery.com/jquery-1.11.3.js"></script> </head> <body> <div>元素一</div> <div>元素二</div> <div>元素三</div> <script type="text/javascript"> var $div = $('div'); //jQuery对象 var div = $div[0] ;//var div =$div.get(0); div.style.color = 'red'; //操作dom对象的属性 </script> </body> </html>查看全部
-
html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。
查看全部 -
var div = $div.get(0);
查看全部 -
var $div = $(div);
查看全部 -
var p = document.getElementById('imooc'); p.innerHTML = '您好！通过慕课网学习jQuery才是最佳的途径'; p.style.color = 'red';var $p = $('#imooc'); $p.html('您好！通过慕课网学习jQuery才是最佳的途径').css('color','red');查看全部 -
even:选择索引值为偶数的元素，从 0 开始计数
odd: 选择索引值为奇数的元素，从 0 开始计数查看全部 -
last 最后的
child 小孩
nth 第n个
first 第一个
only 只有
:last-child 最后一个小孩
:first-child 第一个小孩
:only-child 只有一个小孩
:nth-last-child 倒数第n个小孩
查看全部 -
对于才开始接触jQuery库的初学者，我们需要清楚认识一点：
jQuery对象与DOM对象是不一样的
可能一时半会分不清楚哪些是jQuery对象，哪些是DOM对象，下面重点介绍一下jQuery对象，以及两者相互间的转换。
通过一个简单的例子，简单区分下jQuery对象与DOM对象：
<p id=”imooc”></p>
我们要获取页面上这个id为imooc的p元素，然后给这个文本节点增加一段文字：“您好！通过慕课网学习jQuery才是最佳的途径”，并且让文字颜色变成红色。
普通处理，通过标准JavaScript处理：
var p = document.getElementById('imooc'); p.innerHTML = '您好！通过慕课网学习jQuery才是最佳的途径'; p.style.color = 'red';通过原生DOM模型提供的document.getElementById(“imooc”) 方法获取的DOM元素就是一个DOM对象，再通过innerHTML与style属性处理文本与颜色。
jQuery的处理：
var $p = $('#imooc'); $p.html('您好！通过慕课网学习jQuery才是最佳的途径').css('color','red');通过$('#imooc')方法会得到一个$p的jQuery对象，$p是一个类数组对象。这个对象里面包含了DOM对象的信息，然后封装了很多操作方法，调用自己的方法html与css，得到的效果与标准的JavaScript处理结果是一致的。
通过标准的JavaScript操作DOM与jQuery操作DOM的对比，我们不难发现：
通过jQuery方法包装后的对象，是一个类数组对象。它与DOM对象完全不同，唯一相似的是它们都能操作DOM。
通过jQuery处理DOM的操作，可以让开发者更专注业务逻辑的开发，而不需要我们具体知道哪个DOM节点有那些方法，也不需要关心不同浏览器的兼容性问题，我们通过jQuery提供的API进行开发，代码也会更加精短
查看全部 -
JavaScript三种绑定事件的方式： 1. <div id="btn" onclick="clickone()"></div> //直接在DOM里绑定事件 2. document.getElementById("btn").onclick = function（）{ alert("hello"); } //脚本里面绑定 3.document.getElementById("btn").addeventlistener("click",clickone,false); //通过侦听事件处理相应的函数 用 "addeventlistener" 可以绑定多次同一个事件，且都会执行，而在DOM结构如果绑定两个 "onclick" 事件，只会执行第一个；在脚本通过匿名函数的方式绑定的只会执行最后一个事件
查看全部 -
表单对象属性 选择器 表单对象属性选择器也是专门针对 表单元素的选择器 可以附加在其他选择器的后面 对表单元素进行筛选 $(":enabled") 选取可以使用的表单元素 $(":disabled")选取不可以使用的表单元素 $(":checked")选取被选择中的<input> $(":selected")选取被选择中的<option>元素 选择器适用于复选框和单选框，对于下拉框元素, 使用 :selected 选择器 在某些浏览器中，选择器:checked可能会错误选取到<option>元素，所以保险起见换用选择器input:checked，确保只会选取<input>元素
查看全部 -
$(":input") $("input:text")匹配所有文本框 $("input:password")匹配所有密码档 $("input:radio")匹配所有单选按钮 $("input:checkbox")匹配所有复选框 $("input:submit")匹配所有提交按钮 $("input:image")匹配所有图像域 $("input:reset")匹配所有重置按钮 $("input:button")匹配所有按钮 $("input:file")匹配所有文件域
查看全部 -
$(':first-child'):针对所有父元素下的第一个子元素 $(':last-child'):针对所有父元素下的最后一个子元素 $(':only-child'):针对所有父元素下的只有一个子元素（只有唯一一个子元素） $(':nth-child(n)')针对所有父元素下的弟n个元素（这里的n是从1开始计数） $(':nth-last-child(n)')针对所有父元素下的倒数弟n个元素
查看全部 -
属性筛选选择器： $('div[name=p1]')： //查找所有div中，属性name=p1的div元素 $('div[p2]')： //查找所有div中，有属性p2的div元素 $('div[name|="-"]')//查找所有div中，有属性name中的值只包含一个连字符“-”的div元素，或以连字符‘-’相连的前缀为字符“-”的div $('div[name~="a"]') //查找所有div中，有属性name中的值包含一个连字符“空”和“a”的div元素，以空格风格的属性中有属性值a $('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
查看全部 -
display="none"文字不可见，元素同样被认为是不可见的，所以show($("#div1:visible"))返回的值是0，show($("#div1:hidden"))返回的值是1。 height="0";width="0";虽然文字是显示的，但是元素被认为是不可见的。所以show($("#div2:visible"))返回值是0，show($("#div2:hidden"))返回值是1。 visibility:hidden;opacity:0;文字不可见，但是元素被认为是可见的，所以show($("#div3:visible"))返回值是1，show($("#div3:hidden"))返回值是0
查看全部 -
$(".div:contains(span)").css("color", "blue");//包含关键字span的div<br> $(".div:has(span)").css("color", "blue");//包含标签span的div $(".div:parent").css("color", "blue")//选择已经当爹的div $(".div:empty").css("color", "blue")//选择空巢的div
查看全部
举报