jQuery 基础学习笔记
1. jQuery 的执行时间：
$(document).ready(function(){--- jQuery functions go here ----// 保证当文档对象加载完成后，进行元素事件处理函数的绑定 });
jQuery 是基于事件相应机制进行处理的，为给定元素的事件绑定事件处理函数，当事件发生时，触发相关的函数。
2. 常用 函数
a.元素效果（隐藏和显示）
//语法： $(selector).hide(speed,callback); //隐藏元素；speed :"slow"、"fast" 或毫秒 ms 数值， callback:回调函数名 $(selector).show(speed,callback); //显示元素；speed :"slow"、"fast" 或毫秒 ms 数值， callback:回调函数名 $(selector).toggle(speed,callback); // 隐藏显示的元素，显示隐藏的元素；speed :"slow"、"fast" 或毫秒 ms 数值， callback:回调函数名 $(selector).fadeIn(speed,callback); //淡入效果显示被隐藏的元素； speed :"slow"、"fast" 或毫秒 ms 数值， callback:回调函数名 $(selector).fadeOut(speed,callback); //淡出效果隐藏已经显示的元素 speed :"slow"、"fast" 或毫秒 ms 数值， callback:回调函数名 $(selector).fadeTo(speed,opacity,callback); //淡出显示到 指定的透明度 $(selector).slideDown(speed,callback); //以下拉的效果显示被隐藏的元素 speed :"slow"、"fast" 或毫秒 ms 数值， callback:回调函数名 $(selector).slideUp(speed,callback); //以上拉的效果隐藏显示的元素 speed :"slow"、"fast" 或毫秒 ms 数值， callback:回调函数名 $(selector).slideToggle(speed,callback); //以下拉的效果显示被隐藏的元素，以上拉的效果隐藏显示的元素
$(selector).animate(styles,options); //动画元素
2.元素内容的获取
文本内容 $(selector).text(); // 获取或设置内容是元素标签里定义的除去其他标签的纯文本： 即上面的 ：“文本内容” $(selector).html(); // 获取或设置 元素标签内的内容，包括其内的标签 即上面的 ： “文本内容.... ” $(selector).val(); // 获取或设置 元素 value 属性内的值
$(selector).attr(attribute); // 获取元素 指定属性的值
$(selector).attr(attribute，value); // 设置元素 指定属性的值
$(selector).attr(attribute,function(index,oldvalue)); // 设置元素 指定属性的值 index: 元素的索引值，oldvalue ：旧值
$(selector).attr({attribute:value, attribute:value ...})；// 同时设置多个值
3.元素属性操作
| 方法 | 描述 |
|---|---|
| addClass() | 向匹配的元素添加指定的类名。 |
| attr() | 设置或返回匹配元素的属性和值。 |
| hasClass() | 检查匹配的元素是否拥有指定的类。 |
| html() | 设置或返回匹配的元素集合中的 HTML 内容。 |
| removeAttr() | 从所有匹配的元素中移除指定的属性。 |
| removeClass() | 从所有匹配的元素中删除全部或者指定的类。 |
| toggleClass() | 从匹配的元素中添加或删除一个类。 |
| val() | 设置或返回匹配元素的值。 |
4.元素添加
before_area1 <element .........>prepend_area2 someContent append_area3element>after_area4 $(selector).append(contnents); // 将 contents 添加到 append_area3 位置$(selector).prepend(contents); // 将 contents 添加到 append_area2 位置$(selector).before(contents); // 将 contents 添加到 append_area1 位置 $(selector).after(contents); // 将 contents 添加到 append_area4 位置
这里的content可以是字符串表示的元素，也可以是元素变量，并且可以多元素添加。
5. 元素的删除
<div id='root'><div id='child'><div id='grandchild'>...div>div> div><script> var elements = $(selector).remove([filter]); //移除满足条件的元素和其子元素，并返回之，这个移除是让 此元素和子节点从 DOM对象结构上移除，并将其保存于jQuery对象内。 // filter 满足选择器语法 $(selector).empty(); //清空元素内的内容，包括text，和内的节点 <script>
6.样式表CSS 的使用
//获取指定的值 var value=css("propertyname");//设置值 css("propertyname","value");// 设置多个值 css({"propertyname":"value","propertyname":"value",...});
7.尺寸控制 
$(selector).width() ;
$(selector).height();$(selector).innerWidth() ;
$(selector).innerHeight();$(selector).outerWidth([boolean]) ;
$(selector).outerHeight([boolean]) ;//false,不加外边框；true，加外边框
8.选择器参考
| 选择器 | 实例 | 选取 |
|---|---|---|
| * | $("*") | 所有元素 |
| #id | $("#lastname") | id="lastname" 的元素 |
| .class | $(".intro") | 所有 class="intro" 的元素 |
| element | $("p") | 所有 元素 |
| .class.class | $(".intro.demo") | 所有 class="intro" 且 class="demo" 的元素 |
| :first | $("p:first") | 第一个 元素 |
| :last | $("p:last") | 最后一个 元素 |
| :even | $("tr:even") | 所有偶数 |
| :odd | $("tr:odd") | 所有奇数 |
| :eq(index) | $("ul li:eq(3)") | 列表中的第四个元素（index 从 0 开始） |
| :gt(no) | $("ul li:gt(3)") | 列出 index 大于 3 的元素 |
| :lt(no) | $("ul li:lt(3)") | 列出 index 小于 3 的元素 |
| :not(selector) | $("input:not(:empty)") | 所有不为空的 input 元素 |
| :header | $(":header") | 所有标题元素 - |
| :animated | 所有动画元素 | |
| :contains(text) | $(":contains('W3School')") | 包含指定字符串的所有元素 |
| :empty | $(":empty") | 无子（元素）节点的所有元素 |
| :hidden | $("p:hidden") | 所有隐藏的 元素 |
| :visible | $("table:visible") | 所有可见的表格 |
| s1,s2,s3 | $("th,td,.intro") | 所有带有匹配选择的元素 |
| [attribute] | $("[href]") | 所有带有 href 属性的元素 |
| [attribute=value] | $("[href='#']") | 所有 href 属性的值等于 "#" 的元素 |
| [attribute!=value] | $("[href!='#']") | 所有 href 属性的值不等于 "#" 的元素 |
| [attribute$=value] | $("[href$='.jpg']") | 所有 href 属性的值包含以 ".jpg" 结尾的元素 |
| :input | $(":input") | 所有 元素 |
| :text | $(":text") | 所有 type="text" 的 元素 |
| :password | $(":password") | 所有 type="password" 的 元素 |
| :radio | $(":radio") | 所有 type="radio" 的 元素 |
| :checkbox | $(":checkbox") | 所有 type="checkbox" 的 元素 |
| :submit | $(":submit") | 所有 type="submit" 的 元素 |
| :reset | $(":reset") | 所有 type="reset" 的 元素 |
| :button | $(":button") | 所有 type="button" 的 元素 |
| :image | $(":image") | 所有 type="image" 的 元素 |
| :file | $(":file") | 所有 type="file" 的 元素 |
| :enabled | $(":enabled") | 所有激活的 input 元素 |
| :disabled | $(":disabled") | 所有禁用的 input 元素 |
| :selected | $(":selected") | 所有被选取的 input 元素 |
| :checked | $(":checked") | 所有被选中的 input 元素 |
转载于:https://www.cnblogs.com/louluan/p/3542053.html
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！