jQuerycss
JS类库 其实就是简化Js的开发,主要是DOM的操做,JS类库会预约义一系列对象和函数,下降对JS的使用难度,兼容各个浏览器html
主要是简化经过函数 定位页面元素,将
DOM对象包装成jQuery对象,创建页面元素jquery
<script src="js/jquery.js"></script> <!--引入jQuery--> </head> <body> <button id="qyc">按钮</button> <script> var qyc = document.getElementById('qyc'); // DOM对象(返回该对象),获取页面中的按钮元素 console.log(qyc); // var qyc = $('#qyc'); var qyc = jQuery('#qyc'); /*获取页面中按钮元素 jQuery()是jQuery的工厂函数 * 函数是jQuery的人口 * 定位页面中元素 * 另外一个用法;$()=jQuery() */ console.log(qyc); </script> </body>
DOM对象和jQuery对象是能够互相转换的,是为了简化DOM的浏览器
<script src="js/jquery.js"></script> </head> <body> <button id="qyc">按钮</button> <script> var qyc = document.getElementById('qyc'); // DOM操做()返回该对象 var $qyc = $(qyc); console.log($qyc); // DOM对象转换为jQuery对象-工厂函数 var qyc1 = $qyc[0]; console.log(qyc1); // jQuery对象转换为DOM对象-jQuery对象[索引值] var qyc2 = $qyc.get(0); console.log(qyc2); // jQuery对象提供了get(index)方法-index为索引值 </script> </body>
ID选择器 - ID匹配指定个元素
元素选择器 - 匹配全部元素名的元素
类选择器 - 匹配CSS属性名的元素
通配符选择器 - 匹配页面全部ide
<title>基本选择器</title> <script src="js/jquery.js"></script> </head> <body> <div id="qi">爱新觉罗</div> <div id="q2" class="cla">呼延觉罗</div> <script> console.log($('#q1')); console.log($('div')); console.log($('.cla')); console.log($('*')); // 通配符选择器-匹配全部 console.log($('#d1, .cls')); // 组合选择器-多个选择器使用逗号分隔(并集) console.log($('#q2.cla')); // 组合选择器-多个选择器没有分隔(交集) </script> </body>
后代选择器-匹配祖先元素中后代元素
子选择器-匹配父元素中子元素
相邻兄弟选择器-匹配该元素下一个兄弟元素
普通兄弟选择器-匹配该元素后全部兄弟元素函数
<body> <div id="qh"> <div id="cq"> <div id="q6"></div> <div id="q1"></div> <div id="q2"></div> <div id="q4"></div> <div id="q5"></div> </div> <div id="cq2"> <div id="q3"></div> </div> </div> <script> console.log('#qh div'); console.log('#qh>div'); // 指定元素的下个相邻兄弟元素 console.log('#q1~div'); // 指定元素后面全部的兄弟元素 console.log('#q1').siblings('div'); // siblings()方法-获取指定元素全部兄弟元素(前面+后面) </script> </body>
<script src="js/jquery.js"></script> <style> #qyc { width: 100px; height: 200px; background-color: blue; } </style> </head> <body> <h1>标题</h1> <h2>标题</h2> <div id="q1"> <div id="qh"></div> </div> <div></div> <div></div> <div id="animated"></div> <script> console.log($('div:first')); console.log($('div:last')); // 在指定范围匹配元素中进行筛选 console.log($('div:even')); console.log($('div:odd')); // 索引值为偶数时-奇数元素;索引值为奇数十-偶数元素 console.log($('div:eq(0)'));//等于 console.log($('div:gt(2)'));//大于 console.log($('div:lt(2)'));//小于 console.log(':header'); // :header-匹配h1到h6元素 function animated() { $('animated').slideToggle(animated); } animated(); console.log($(':animated')); // :animated-只匹配由jQuery实现动画 console.log($('div:not("#qh")')); </script> </body>
<script src="js/jquery.js"></script> </head> <body> <div>div元素</div> <div></div> <div> <div id="qh"></div> </div> <script> console.log($('div:contains("q1")')); console.log(('div:empty')); console.log($('div:parent')); console.log($('div:has("#qh")')[0]); // :has()-表示包含匹配指定选择器元素父级元素 </script> </body>
<script src="js/jquery.js"></script> <style> #q1 { display: none; } #q2 { visibility: hidden; } </style> </head> <body> <div id="q1">呼延觉罗</div> <div id="q2">爱新觉罗</div> <input type="hidden" value="用户名"> <input type="text" name="username"> <script> /* :hidden选择器 * 不能匹配CSS样式属性visibility设置为hidden的隐藏元素 * 还能匹配HTML页面中不作任何显示效果的元素 * 用法 - 尽可能肯定元素类型或指定范围 */ console.log($(':hidden')); /* :visible选择器 * 匹配CSS样式属性visibility设置为hidden的隐藏元素 * 当visibility设置为hidden时的元素,依旧占有页面空间 * 还能匹配HTML页面中<html>和<body>元素 */ console.log($(':visible')); </script> </body>
<script src="js/jquery.js"></script> </head> <body> <div id="username" name="q1" class="mydiv"></div> <div id="PASSWORD" name="d2" class="mycls"></div> <div id="d1"></div> <div class="myq"></div> <script> console.log($('div[name]')); console.log($('div[class=mydiv]')); // [attr!=value]选择器-包含没有attr属性的元素 console.log($('div[class!=mydiv]')); console.log($('div[class^=my]')); // 属性过滤选择器组合用法-交集 console.log($('div[name=q1][class^=my]')); </script> </body>
<script src="js/jquery.js"></script> </head> <body> <div id="q1">id为qi的div元素</div> <div id="q2">id为qi的div元素</div> <div id="q3">id为qi的div元素 <div id="qh"></div> </div> <script> console.log($('div:first-child')); // :first-child- 当前元素是否为第个子元素 console.log($('div:last-child')); console.log(('div:nth-child')); console.log(('div:only-child')); // 匹配当前元素做为第index个字元素 // index是从1开始,即是第几个 </script> </body>
<body> <form action="#"> <input type="text" disabled> <input type="checkbox">html <input type="checkbox" checked>css <select> <option>端游</option> <option selected>单机</option> <option>页游</option> </select> </form> <script> console.log($('input:disabled')); console.log($('input:checked')); console.log($('option:selected')); </script> </body>