一.选择器(同css)

  1.基本选择器

    $("div")    通过标签名获取标签

    $("#id")    通过id获取标签

    $(".class")   通过class获取标签

  2.高级选择器

     $("div p")    后代选择器

    $("div ,p")      组合选择器

  3.属性选择器

    $("[type]")    有type属性的

    $("[type=text]")  type属性为text的

二.筛选器

  筛选器就是经过选择器选择后再次筛选

  1.基本筛选器

    $("ul li:first")     选取ul标签中的li后再筛选出第一个

    :last       最后一个

    :eq(index)      索引筛选

    :even        索引为偶数的

    :odd        索引为奇数的

    :gt(index)        大于索引的

    :lt(index)       小于索引的

    :not(选择器)    不满足选择器的

    :has(选择器)    has后的选择器是子级标签中的

  2.表单筛选器(多用于form表单)

    :text        type=text的标签

    :password       password类型的标签

    :file           file类型的标签

    :radio        radio类型的标签

    :checkbox      checkbox类型的标签

    :submit        submit类型的标签

    :button         button类型的标签

    :reset        reset类型的标签

    :enable        可用的标签

    :disable       你可用的标签

    :checked        被选择的标签

    :selected         被选中的标签

三.筛选器方法

  1.下一个标签

    $("#id").next()    

    $("#id").nextAll()    往下所有同级元素

    $("#id").nextUntil("#id2")   从id开始到id2的元素,开区间

  2.上一个标签

    $("#id").prev()      

    $("#id").prevAll()

    $("#id").prevUntil("#id2")

  3.父级标签

    $("#id").parent()        父级标签

    $("#id").parents()      父级及以上标签

    $("#id").parentsUntil("#id2")

  4.子级和兄弟标签

    $("#id").children()      所有子级标签

    $("#id").siblings()      所有兄弟标签

  5.查找标签

    $("div").find("p")      等价于$("div p")

  6.筛选标签

    $("div").filter(".c1")     从所有div标签中筛选class=c1的标签

四.样式操作

  1.class操作

    .addClass(cls)      添加类

    .removeClass(cls)      删除类

    .hasClass(cls)        判断类存在不存在

    .toggleClass(cls)      切换类,有就移除,没有就添加

  2.css样式操作

    .css("color","red")      直接修改

    .css({"width":"100px","height":"100px"})  修改多个值

五.位置操作

  1.获取位置和设置位置

    offset()      获取元素在当前窗口的相对偏移

    offset({top:100,left:100})    设置标签位置

    position()      获取元素相对(有relative或absolute)父级标签的偏移

    $(window).scrollTop()  获取上下滚轮的位置,参数可以设置滚轮位置

    $(window).scrollTop(0)  设置上下滚轮的位置

    $(window).scrollLeft()  获取左右滚轮的位置,参数可以设置滚轮位置

  2.尺寸

    .height()       盒子模型中content的大小

    .width()    

    .innerHeight()   内容高度+2padding高度

    .innerWidth()

    .outerHeigt()   内容高度+2padding高度+2border宽度

    .outerWidth()   

六.文本操作

  .html()      获取标签的内容,包含标签

  .html(val)      设置标签文本内容,能识别标签

  .text()      获取标签文本,不包含标签

  .text(val)       设置标签文本内容,不能识别标签

  .val()        获取标签的value

  .val("value")     给标签设置value值

  .val(["v1","v2"])   给标签设置多个value值

七.属性操作

  1.多用于自定义属性

    .attr(属性)       获取属性的值

    .attr(属性,值)       给标签设置或修改属性值

    .attr({属性1:值1,属性2:值2})    设置多个属性值

    .removeAttr(属性)   删除属性

  2.多用于固有属性

    .prop(属性)       获取属性

    .removeProp(属性)   删除属性

八.文档处理

  1.追加到标签子级后面

    $("div").append(a)    

    $(a).appendTo($("div"))

  2.添加到标签子级前面

    $("div").prepend(a)

    $(a).prependTo($("div"))

  3.添加到标签前面(before),后面(after)

    $("div").before(a)

    $(a).insertBefore($("div"))

  4.删除和清空标签

    .remove()    删除标签

    .empty()       清空标签里面的内容

  5.替换

    $("div").replaceWith(a)

    $(a).replaceAll("div")

  6.克隆

    .clone(true)    克隆标签,带上true参数可以把事件也克隆

jQuery基础语法的更多相关文章

  1. jQuery 基础语法

    jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Aja ...

  2. js进阶 10-2 JQuery基础语法是什么

    js进阶 10-2 JQuery基础语法是什么 一.总结 一句话总结: 1.jquery语法超级简单:基础语法是:$(selector).action() 2.jquery选择的时候是带了引号的,肯定 ...

  3. web前端----jQuery基础语法

    一.jQuery基础1.为什么要用jquery? 写起来简单,省事,开发效率高,兼容性好2.什么是jQuery? jQuery是一个兼容多浏览器的JavaScript库(类似python里面的模块)3 ...

  4. <学习笔记 之 JQuery 基础语法>

    jQuery 库 - 特性 jQuery 是一个 JavaScript 函数库. jQuery 库包含以下特性: HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaSc ...

  5. 学习jQuery基础语法,并通过一个案例引出jQuery的核心

    jquery是一个快速.小巧,功能强大的javascript函数库. jquery主要用来替代原生的javascript,简化代码. 前端最头疼的就是兼容:IE6/7/8兼容的最高版本是jQuery1 ...

  6. jQuery基础语法知识梳理

    一.attr() attr()方法设置或返回元素的属性. attr(属性名):获取元素属性名的值. attr(属性名,属性值):设置元素属性名的值. 例子: <a href=”http://12 ...

  7. jQuery的基础语法实例

    jQuery 基础语法 jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作. 基础语法是:$(selector).action() 美元符号定义 jQuery 选择符(sele ...

  8. Web前端学习笔记之jQuery基础

    0x0 jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Aja ...

  9. 【前端】之jQuery基础知识

    jQuery 简介 在项目中引入jQuery: 去jQuery官网下载jQuery包:jquery-3.2.1.min.js 将下载的jQuery包添加到项目目录中 在标签下添加jQuery引用:&l ...

随机推荐

  1. MySQL之Haproxy+Keepalived+MySQL高可用均衡负载部署 (网络摘抄)

    来源于:https://blog.csdn.net/weisong530624687/article/details/71536837?utm_source=blogxgwz3 一.安装主从MySQL ...

  2. 涂抹mysql笔记-搭建mysql高可用体系

    mysql的高可用体系<>追求更高稳定性的服务体系 可扩展性:横向扩展(增加节点).纵向扩展(增加节点的硬件配置) 高可用性<>Slave+LVS+Keepalived实现高可 ...

  3. [SQL]查询整个数据库中某个特定值所在的表和字段的方法

    查询整个数据库中某个特定值所在的表和字段的方法 当数据库做的太庞大的时候,难免会出现忘记哪个值会存入哪个表的情况,于是在网上找到的如下解决办法. 通过做一个存储过程,只需要传入一个想要查找的值,即可查 ...

  4. 03-封装BeanUtil工具类(javabean转map和map转javabean对象)

    package com.oa.test; import java.beans.BeanInfo; import java.beans.IntrospectionException; import ja ...

  5. 第25课 可变参数模板(6)_function_traits和ScopeGuard的实现

    1. function_traits (1)function_traits的作用:获取函数的实际类型.返回值类型.参数个数和具体类型等.它能获取所有函数语义类型信息.可以获取普通函数.函数指针.std ...

  6. java.util.ConcurrentModificationException详解

    引用于http://blog.csdn.net/dabing69221/article/details/40065071 在使用set/map时,一个可爱的小bug:Java.util.Concurr ...

  7. java常见面试题及答案 11-20(JVM)

    11.JVM内存分哪几个区,每个区的作用是什么? Java虚拟机主要分为以下一个区: 方法区:1. 有时候也成为永久代,在该区内很少发生垃圾回收,但是并不代表不发生GC,在这里进行的GC主要是对方法区 ...

  8. PyQt5 入门

    换了VSCODE开发,感觉比sublime好点,可能是由于第三版老弹框烦人吧.VSCODE看着也挺好看的. 学习 PyQt5 中文教程 0. 安装完之后错误 pip 安装了 pyqt5 from Py ...

  9. Xeon Phi 《协处理器高性能编程指南》随书代码整理 part 3

    ▶ 第二章,几个简单的程序 ● 代码,单线程 #include <stdio.h> #include <stdlib.h> #include <string.h> ...

  10. kettle数据库连接使用变量

    新增db连接(密码也可以设置参数) 转换中,右键空白处,选择转换设置