JQuery小结

选择器

元素选择器

  • ("p") 选取p元素。

  • $("p.intro") 选取所有 class="intro" 的 p 元素。

  • $("p#demo") 选取所有 id="demo" 的 p 元素。

属性选择器

  • $("[href]") 选取所有带有 href 属性的元素。
  • $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
  • $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
  • $("[href='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

CSS选择器

  • 把所有 p 元素的背景颜色更改为红色 $("p").css("background-color","red");

事件

当按钮的点击事件被触发时会调用一个函数:

    $("button").click(function() {..some code... } )

名称冲突

jQuery 使用 $符号作为 jQuery 的简介方式。
某些其他 JavaScript 库中的函数(比如 Prototype)同样使用$ 符号。
jQuery 使用名为 noConflict() 的方法来解决该问题。
var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。

Html

获得(设置)

text()、html() 以及 val()
不带参表示获取数据,带参表示设置内容

添加

  • append() - 在被选元素的结尾插入内容
  • prepend() - 在被选元素的开头插入内容
  • after() - 在被选元素之后插入内容
  • before() - 在被选元素之前插入内容

删除

  • remove() - 删除被选元素(及其子元素)
  • empty() - 从被选元素中删除子元素

获取并设置 CSS 类

  • addClass() - 向被选元素添加一个或多个类
  • removeClass() - 从被选元素删除一个或多个类
  • toggleClass() - 对被选元素进行添加/删除类的切换操作
  • css() - 设置或返回样式属性

尺寸

  • width()
  • height()
  • innerWidth()
  • innerHeight()
  • outerWidth()
  • outerHeight()

遍历

祖先

  • parent() 返回被选元素的直接父元素
  • parents() 返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。
  • parentsUntil() 返回介于两个给定元素之间的所有祖先元素。

后代

  • children() 返回被选元素的所有直接子元素
  • find() 返回被选元素的后代元素,一路向下直到最后一个后代。

同胞

  • siblings() 返回被选元素的所有同胞元素
  • next() 返回被选元素的下一个同胞元素
  • nextAll() 返回被选元素的所有跟随的同胞元素
  • nextUntil() 返回介于两个给定参数之间的所有跟随的同胞元素
  • prev()
  • prevAll()
  • prevUntil()

过滤

  • first() 返回被选元素的首个元素
  • last() 返回被选元素的最后一个元素
  • eq() 返回被选元素中带有指定索引号的元素
  • filter() 不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。
  • not() 返回不匹配标准的所有元素。

Ajax

load

    $(selector).load(URL,data,callback);

get

    $.get(URL,callback);

post

    $.post(URL,data,callback);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 通过jQuery,您可以选取(查询,query)HTML元素,并对它们执行“操作”(actions)。 jQuer...
    枇杷树8824阅读 674评论 0 3
  • jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作。由约翰·雷西格(...
    静候那一米阳光阅读 813评论 0 18
  • 请记得在进行JQuery类库的运用时,加入JQuery类库,并且要保证先写文档就绪函数 $(document).r...
    Sunshinemm阅读 2,927评论 1 40
  • 一、页面加载 JQ的页面加载比JS要快,当整个dom树结构生成完毕后就会加载 JQ页面加载不存在覆盖问题,加载的时...
    zengsiyong阅读 1,042评论 0 17
  • 警告请使用 document.write() 仅仅向文档输出写内容。如果在文档已完成加载后执行 document....
    鹿守心畔光阅读 2,859评论 3 104