JQuery本质上还是JavaScript,是JavaScript的一个框架,可以让我们更简洁地去使用JavaScript

使用之前,记得在html头部引用JQuery

通过选择器获得JQuery对象

  • id
$('#myDiv').css('background:red');
  • element
$('h2').css('color:red');
  • class
$('.mydiv').css('color:red');
  • selector1,selector2...
$('#myDiv,#myText').css('background:red');
  • 层级
	<h2>this is h2</h2>
<h3>this is h3</h3> $('h2 + h3') 当h2和h3为同级,且相邻 <form>
<input name="t1">
<form>
<input name="t2">
</form>
</form> $('form > input') form标签的子元素
使用此,只会获得name=t1的input元素 $('form input') form标签之中,子元素,孙元素...
使用此,会获得name=t1和name=t2的两个input元素
  • attribute
$('[href]')
$("[type!='button']")
$("[type^='b']") 以b开头
$("[type$='b']") 以b结尾
  • 表单
//input标签,name属性为username的全部元素
$("input[name='username']")
表单对象属性
$('input:checked')

文档解析完毕执行操作

html文档首先是被解析,之后才会被显示

解析完毕也就是ready事件的触发

$(document).ready(function () {
//相关的操作,如修改样式等
}); //ready简写方式
$(function(){
//相关的操作,如修改样式等
});

创建并添加元素

var title = $('<h1>这是标题</h1>');
$('#mydiv').append(title);

修改css

  • 单个属性
//把全部class属于mydiv的元素的样式都修改
$('.mydiv').css('background‘,’red');
  • 多个属性
//属性有"-",得加上引号,没有"-",可以省略引号
$('.mydiv').css({'background-color':'red',width:'50px'});

jQuery对象转为DOM对象

有两种方法

  • jQueryObject[0]
  • jQueryObject.get(0)
var mydiv = $('.mydiv')[0];
var mydiv = $('.mydiv').get(0);

JQuery学习笔记(1)——选择器的更多相关文章

  1. JQuery学习笔记——层级选择器

    JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...

  2. JQuery学习笔记——基础选择器

    第一篇博客,现在原生安卓需求不大了.招聘的Android工程师都需要附带更多的其他技术.这也是开启我学习前端之路的开端.前端时间看了HTML.CSS等,在界面渲染这一块,就不多记录博客了.现在学习着J ...

  3. jQuery学习笔记(2)-选择器的使用

    一.选择器是什么 有了jQuery的选择器,我们几乎可以获取页面上任意一个或一组对象 二.Dom对象和jQuery包装集 1.Dom对象 JavaScript中获取Dom对象的方式 <div i ...

  4. JQuery学习笔记之选择器

    JQuery与DOM对象 <div id="test1" class="test2"></div> DOM对象获取方式: var dom ...

  5. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  6. jQuery 学习笔记

    jQuery 学习笔记   一.jQuery概述    宗旨: Write Less, Do More.    基础知识:        1.符号$代替document.getElementById( ...

  7. jQuery学习笔记(一):入门

      jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...

  8. jQuery学习笔记 - 基础知识扫盲入门篇

    jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...

  9. jQuery 学习笔记:jQuery 代码结构

    jQuery 学习笔记:jQuery 代码结构 这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...

  10. jQuery学习笔记之插件开发(4)

    jQuery学习笔记之插件开发(4) github源码地址 插件:了让原有功能的增强. 1.插件的种类(3种):局部.全局.选择器插件 1.1封装对象方法的插件 这种类型的插件是把一些常用或者重复使用 ...

随机推荐

  1. 《java编程思想(第四版)》第一二章学习笔记

    目录 一.Introduction 1.抽象过程 2.面向对象语言(包括Java)的五个基本特性 3.每个对象都提供服务 4.public.private.protected三者的区别 5.Java的 ...

  2. 你必须知道的Dockerfile

    本篇已加入<.NET Core on K8S学习实践系列文章索引>,可以点击查看更多容器化技术相关系列文章. 一.关于Dockerfile 在Docker中创建镜像最常用的方式,就是使用D ...

  3. Python3 获取系统资源

    cpu disk mem import osimport psutilos.chdir(os.getcwd()) #cpu def get_cpu_info(): cpu_percent=psutil ...

  4. view WITH CHECK OPTION where-clause violation(查看与检查选项where-子句违反)

    创建视图的语句是设置了 WITH CHECK OPTION 这个条件; 创建视图时,sql语句是这样写的: CREATE  OR  REPLACE  VIEW  RZ_TST_VIEW AS WHER ...

  5. Kubernetes的ConfigMap对象使用

    ConfigMap和Secret几乎一样,只是Secret会用base64加密,创建方式也可以彩yaml或者文件方式 下面演示一下通过文件创建configmap 创建配置文件my.yaml name: ...

  6. C# 动态加载资源

    在xaml中控件通过绑定静态资源StaticResource来获取样式Style有多种方式,TextBlockStyle.xaml是一个ResourceDictionary,包含了所需样式 通过相对路 ...

  7. ASP.NET Core 2.2 WebApi 系列【二】使用EF CodeFirst创建数据库

    Code First模式 Code First是指"代码优先"或"代码先行". Code First模式将会基于编写的类和配置,自动创建模型和数据库. 一.准备 ...

  8. Java学习 1.2——简述JVM,JRE,JDK的关系

    在上一节中,我们了解了JVM相关的知识,有兴趣的话可以先去看一下: Java学习 1.1——(JVM介绍)Java为什么能够跨平台? 这个篇主要分享的是JRE,JDK,JVM三者的区别,简言之: JD ...

  9. jenkins-pipeline里使用docker命令

    在jenkins的pipeline里,就是jenkinsfile文件里,如果希望调用docker来构建镜像,需要进行以下配置! tools{}里添加docker是失败的,这个我找了很多资料,最后需要e ...

  10. springcloud 微服务 分布式 Activiti6 工作流 vue.js html 跨域 前后分离

    1.代码生成器: [正反双向](单表.主表.明细表.树形表,快速开发利器)freemaker模版技术 ,0个代码不用写,生成完整的一个模块,带页面.建表sql脚本.处理类.service等完整模块2. ...