前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jQuery 基础学习笔记

jQuery 基础学习笔记

作者头像
亦山
发布2019-05-25 09:50:54
5550
发布2019-05-25 09:50:54
举报
文章被收录于专栏:Spring Cloud设计原理

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://cloud.tencent.com/developer/article/1432224

  1. jQuery 的执行时间:
代码语言:javascript
复制
$(document).ready(function(){
      --- jQuery functions go here ----
     // 保证当文档对象加载完成后,进行元素事件处理函数的绑定
});

 jQuery 是基于事件相应机制进行处理的,为给定元素的事件绑定事件处理函数,当事件发生时,触发相关的函数。

  1. 常用 函数

a.元素效果(隐藏和显示)

代码语言:javascript
复制
//语法:
$(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.元素内容的获取

代码语言:javascript
复制
<element type='...' name='...'  value='.....'> 文本内容<element> </element>    </element>
$(selector).text();   //    获取或设置内容是元素标签里定义的除去其他标签的纯文本: 即上面的 :“文本内容”
$(selector).html();  //     获取或设置 元素标签内的内容,包括其内的标签     即上面的 : “文本内容<element>.... </element>”
$(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.元素添加

代码语言:javascript
复制
before_area1 <element  .........>prepend_area2  someContent append_area3</element>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可以是字符串表示的元素,也可以是元素变量,并且可以多元素添加。
  1. 元素的删除
代码语言:javascript
复制
<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 的使用

代码语言:javascript
复制
//获取指定的值
var  value=css("propertyname");
//设置值
css("propertyname","value");
// 设置多个值
css({"propertyname":"value","propertyname":"value",...});

7.尺寸控制

代码语言:javascript
复制
$(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")

所有 <p> 元素

.class.class

$(".intro.demo")

所有 class="intro" 且 class="demo" 的元素

:first

$("p:first")

第一个 <p> 元素

:last

$("p:last")

最后一个 <p> 元素

:even

$("tr:even")

所有偶数 <tr> 元素

:odd

$("tr:odd")

所有奇数 <tr> 元素

: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")

所有标题元素 <h1> - <h6>

:animated

所有动画元素

:contains(text)

$(":contains('W3School')")

包含指定字符串的所有元素

:empty

$(":empty")

无子(元素)节点的所有元素

:hidden

$("p:hidden")

所有隐藏的 <p> 元素

: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")

所有 <input> 元素

:text

$(":text")

所有 type="text" 的 <input> 元素

:password

$(":password")

所有 type="password" 的 <input> 元素

:radio

$(":radio")

所有 type="radio" 的 <input> 元素

:checkbox

$(":checkbox")

所有 type="checkbox" 的 <input> 元素

:submit

$(":submit")

所有 type="submit" 的 <input> 元素

:reset

$(":reset")

所有 type="reset" 的 <input> 元素

:button

$(":button")

所有 type="button" 的 <input> 元素

:image

$(":image")

所有 type="image" 的 <input> 元素

:file

$(":file")

所有 type="file" 的 <input> 元素

:enabled

$(":enabled")

所有激活的 input 元素

:disabled

$(":disabled")

所有禁用的 input 元素

:selected

$(":selected")

所有被选取的 input 元素

:checked

$(":checked")

所有被选中的 input 元素

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2014年02月09日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档