专栏首页james大数据架构Jquery基本用法总结

Jquery基本用法总结

选择器 $("#mydiv") 通过ID $("p#myp") 选择id=myp 的所有p元素(组合型) $(".mydiv") 通过 class="mydiv" $("p.myp") 选择class=myp 的所有p元素

$("p").eq(1) 获取匹配的集合中的第二个元素 这个元素的位置是从0算起(与[i]的区别是eq获得的还是jquery元素,而[i]获得的是dom元素) $("div:first") 选择第一个div $("div:odd") 选择奇数行div $('div:visible') //选择可见的div元素 $('div:gt(2)') //选择所有的div元素,除了前三个(:号的意义??)

$("div").has("p");选择包含p元素的div元素 ??? $("div").first() 选择第一个div ??? $("div").find("p") 选择div内的所有p元素

$("div").children() 取得所有div中的所有直接子元素,不考虑子元素的子元素 $("div").parents() 而parents将查找出所有祖辈元素 $("div").next() 取得紧邻的同辈元素,而不是后面所有的同辈元素(所有的用nextAll()) $("div").prev() 取得每个元素紧邻的前一个同辈元素的元素集合 $("form > input") 匹配表单中所有的一级子级input元素 $("form ~ input") 找到所有与表单同辈的 input 元素

属性选择器 采用XPath表达示来选择给定属性的元素 $("[href]") 选取所有带href属性的元素 $("[href='xxx']") 选取所有属性href='xxx' 的元素 $("[href*='.jpg']") 选取所有属性以.jpg结尾的元素

设置属性 $("div").attr("v","xxx"); $("div").removeAttr("v") 属性删除

复合选择器 $("input[id][name$='ma']") 选择所有含有id属性,且name属性以ma结尾的input元素 $("input:checked") 选择所有选中的筛选框元素 $("select option:selected") 选中所有选中的选项元素

改变HTML内容 $("div").html("xxxx") 相当于innerHTML $("div").append("<p>xxx</p>") 向div(内部)html追加p标签

元素的操作:移动 如果要移动选中的元素,有两种方法:一种是直接移动该元素,另一种是移动其他元素,使得目标元素达到我们想要的位置。 假定我们选中了一个div元素,需要把它移动到p元素后面。 第一种方法是使用.insertAfter(),把div元素移动p元素后面: $('div').insertAfter('p'); 第二种方法是使用.after(),把p元素加到div元素前面: $('p').after('div'); 表面上看,这两种方法的效果是一样的,唯一的不同似乎只是操作视角的不同。但是实际上,它们有一个重大差别,那就是返回的元素不一样。第一种方法返回div元素,第二种方法返回p元素。你可以根据需要,选择到底使用哪一种方法。 使用这种模式的操作方法,一共有四对: .insertAfter()和.after():在现存元素的外部,从后面插入元素 .insertBefore()和.before():在现存元素的外部,从前面插入元素 .appendTo()和.append():在现存元素的内部,从后面插入元素 .prependTo()和.prepend():在现存元素的内部,从前面插入元素

删除元素使用.remove()和.detach()。两者的区别在于,前者不保留被删除元素的事件,后者保留,有利于重新插入文档时使用。 清空元素内容(但是不删除该元素)使用.empty()。

$("input").val(xxx); 获取/设定 文本框中的值 $("input").text() 取出或设置text内容 如果结果集包含多个元素,那么赋值的时候,将对其中所有的元素赋值;取值的时候,则是只取出第一个元素的值(.text()例外,它取出所有元素的text内容)。

CSS 选择器/更改 $("div").css("background-color","red") 把所有 p 元素的背景颜色更改为红色 $("div").width(xxx) /.height(sss)设置高度与宽度

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 网页超过一屏时自动浮动在网页最上方的图层特效

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>adsorpti...

    欢醉
  • CSS侧边栏宽度不动(更改页面宽度时),内容区宽度自适应

    一个页面,左栏是内容栏content,右栏是侧边栏sidebar。如何使侧边栏宽度不动(更改页面宽度时),内容区宽度自适应呢?为了保证内容区宽度自适应,先不设定...

    欢醉
  • MVC中实现加载更多

    需要实现的功能: 数据太多想初次加载部分数据,在底部加上“加载更多”按钮 点击后加载第二页数据(从数据库只取指定页数据)后接在已有数据后面(类似于android...

    欢醉
  • 【漫画】七种最常见的排序算法(动图版)

    https://blog.csdn.net/qq_32799165/article/details/87878876

    用户1564362
  • 移动端触屏事件

    移动端浏览器兼容性较好,我们不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动端也有自己独特的地方。比如触屏事件 touch(也称...

    星辰_大海
  • 这些 CSS 伪类,你可能还不知道,可以用起来了!

    css 伪类是用于向某些选择器添加特殊的效果,是动态的,指当前元素所处的状态或者特性。只有一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它...

    前端小智@大迁世界
  • firstElementChild、firstChild 、childNodes和children方法

    小胖
  • css-height

    ​ 一个div块级元素没有为其设置宽度和高度,浏览器会为其分配可使用的最大宽度(比如全屏宽度),但是不负责分配高度,块级元素的高度是由子元素堆砌撑起来的。那...

    奋飛
  • Easy Martrix!——为新媒体艺术而生的电机矩阵

    作为一群在成天瞎搞事情的我们,这次被上海的朋友拉着,在宁波参加了一个黑客松,一起做了两个项目,这次就先说说第一个。

    UDM Lab
  • 有刷电机、无刷电机、伺服电机、步进电机、减速电机的区别

    有刷电机是内含电刷装置的将电能转换成机械能(电动机)或将机械能转换成电能(发电机)的旋转电机。有刷电机是所有电机的基础,它具有启动快、制动及时、可在大范围内平滑...

    小贝壳

扫码关注云+社区

领取腾讯云代金券