首页 > 代码库 > jquery
jquery
<!DOCTYPE html><html><head> <meta charset="utf-8"/> <title>第一个简单的jQuery程序</title> <style type="text/css"> div{ padding:8px 0px; font-size:12px; text-align:center; border:solid 1px #888; } </style> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(
function() { $("div").html("您好！通过慕课网学习jQuery才是最佳的途径。"); }); </script></head><body> <div></div></body></html>
代码分析：
$(document).ready 的意思是等页面的文档（document）中的节点都加载完毕后，在执行后续的代码，因为我们在执行代码的时候，可能会依赖页面的某一个元素，我们要确保这个元素真正的的被加载完毕后才能正确的使用。
jQuery是一个类数组对象，DOM对象就是一个单独的DOM元素。
<!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> <!-- 使用JS原生语法 --> <script type="text/javascript"> window.onload = function(){ // 通过原生JS语法获取id为imooc1的元素p var p = document.getElementById(‘imooc1‘); // 将元素p在html中内容改变 p.innerHTML = ‘P1：您好！通过慕课网学习jQuery才是最佳的途径‘; // 将元素p的内容颜色改为红色 p.style.color = ‘red‘; } </script> <!-- 使用jQuery语法 --> <script type="text/javascript"> $(document).ready(function() { /** * 通过jQuery语法获取id为imooc2的元素获得一个jQuery对象 * 调用该对象的html()方法进行更改内容 * 调用该对象的css()方法进行更改颜色样式 */ var $p = $(‘#imooc2‘);//根据id获取jquery对象 $p.html(‘P2：您好！通过慕课网学习jQuery才是最佳的途径‘).css(‘color‘,‘red‘); }); </script> </head><body> <p id="imooc1"></p> <p id="imooc2"></p></body></html>
HTML代码<div>元素一</div><div>元素二</div><div>元素三</div>JavaScript代码var $div = $(‘div‘) //jQuery对象var div = $div[0] //转化成DOM对象div.style.color = ‘red‘ //操作dom对象的属性
var $div = $(‘div‘) //jQuery对象var div = $div.get(0) //通过get方法，转化成DOM对象div.style.color = ‘red‘ //操作dom对象的属性
//数组的索引是从0开始的，也就是第一个元素下标是0<div>元素一</div><div>元素二</div><div>元素三</div>
var div = document.getElementsByTagName(‘div‘); //dom对象var $div = $(div); //jQuery对象var $first = $div.first(); //找到第一个div元素$first.css(‘color‘, ‘red‘); //给第一个元素设置颜色
id选择器：一个用来查找的ID，即元素的id属性
$( "#id" )
类选择器，顾名思义，通过class样式类名来获取节点，可以多选
$( ".class" )
元素选择器：根据给定（html）标记名称选择所有的元素
$( "element" )
全选择器（*选择器）
$( "*" )
<!DOCTYPE html><html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" href="http://www.mamicode.com/imooc.css" type="text/css"> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script></head><body> <h2>子选择器与后代选择器</h2> <div class="left"> <div class="aaron"> <p>div下的第一个p元素</p> </div> <div class="aaron"> <p>div下的第一个p元素</p> </div> </div> <div class="right"> <div class="imooc"> <article> <p>div下的article下的p元素</p> </article> </div> <div class="imooc"> <article> <p>div下的article下的p元素</p> </article> </div> </div> <script type="text/javascript"> //子选择器 //$(‘div > p‘) 选择所有div元素里面的第一个子元素P $(‘div>p‘).css("border", "1px groove red"); </script> <script type="text/javascript"> //后代选择器 //$(‘div p‘) 选择所有div元素里面的p元素 $(‘div p‘).css("border", "1px groove black"); </script> <h2>相邻兄弟选择器与一般兄弟选择器</h2> <div class="bottom"> <div>兄弟节点div, +~选择器不能向前选择</div> <span class="prev">选择器span元素</span> <div>span后第一个兄弟节点div</div> <div>兄弟节点div <div class="small">子元素div</div> </div> <span>兄弟节点span,不可选</span> <div>兄弟节点div</div> </div> <script type="text/javascript"> //相邻兄弟选择器 //选取prev后面的第一个的div兄弟节点 $(‘.prev+div‘).css("border", "3px groove blue"); </script> <script type="text/javascript"> //一般相邻选择器 //选取prev后面的所有的div兄弟节点 $(‘.prev~div‘).css("border", "3px groove blue"); </script></body></html>
筛选选择器
选择器用冒号“：”开头，通过一个列表，看看基本筛选器的描述：
<!DOCTYPE html><html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" href="http://www.mamicode.com/imooc.css" type="text/css"> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script></head><body> <h2>基本筛选器</h2> <h3>:first/:last/:even/:odd</h3> <div class="left"> <div class="div"> <p>div:first</p> <p>:even</p> </div> <div class="div"> <p>:odd</p> </div> <div class="div"> <p>:even</p> </div> <div class="div"> <p>:odd</p> </div> <div class="div"> <p>:even</p> </div> <div class="div"> <p>div:last</p> <p>:odd</p> </div> </div> <script type="text/javascript"> //找到第一个div $(‘.div:first‘).css("color", "#CD00CD"); </script> <script type="text/javascript"> //找到最后一个div $(‘.div:last‘).css("color", "#CD00CD"); </script> <script type="text/javascript"> //:even 选择所引值为偶数的元素，从 0 开始计数 $(‘.div:even‘).css("border", "3px groove red"); </script> <script type="text/javascript"> //:odd 选择所引值为奇数的元素，从 0 开始计数 $(‘.div:odd‘).css("border", "3px groove blue"); </script> <h3>:eq/:gt/:lt</h3> <div class="left"> <div class="aaron"> <p>:lt(3)</p> </div> <div class="aaron"> <p>:lt(3)</p> </div> <div class="aaron"> <p>:eq(2)</p> </div> <div class="aaron"> </div> <div class="aaron"> <p>:gt(3)</p> </div> <div class="aaron"> <p>:gt(3)</p> </div> </div> <script type="text/javascript"> //:eq //选着单个 $(‘.aaron:eq(3)‘).css("border", "3px groove blue"); </script> <script type="text/javascript"> //:gt 选择匹配集合中所有索引值大于给定index参数的元素 $(‘.aaron:gt(1)‘).css("border", "3px groove blue"); </script> <script type="text/javascript"> //:lt 选择匹配集合中所有索引值小于给定index参数的元素 //与:gt相反 $(‘.aaron:lt(1)‘).css("color", "#CD00CD"); </script> <h3>:not</h3> <div class="left"> <div> <input type="checkbox" name="a" /> <p>Aaron</p> </div> <div> <input type="checkbox" name="b" /> <p>慕课</p> </div> <div> <input type="checkbox" name="c" checked="checked" /> <p>其他</p> </div> </div> <script type="text/javascript"> //:not 选择所有元素去除不匹配给定的选择器的元素 //选取所有input中,没有checked属性的p元素，赋予颜色 $(‘input:not(:checked)+p‘).css("background-color", "#CD00CD"); </script></body></html>
表单元素选择器
jquery
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。