JQuery学习笔记(1)——选择器
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)——选择器的更多相关文章
- JQuery学习笔记——层级选择器
JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...
- JQuery学习笔记——基础选择器
第一篇博客,现在原生安卓需求不大了.招聘的Android工程师都需要附带更多的其他技术.这也是开启我学习前端之路的开端.前端时间看了HTML.CSS等,在界面渲染这一块,就不多记录博客了.现在学习着J ...
- jQuery学习笔记(2)-选择器的使用
一.选择器是什么 有了jQuery的选择器,我们几乎可以获取页面上任意一个或一组对象 二.Dom对象和jQuery包装集 1.Dom对象 JavaScript中获取Dom对象的方式 <div i ...
- JQuery学习笔记之选择器
JQuery与DOM对象 <div id="test1" class="test2"></div> DOM对象获取方式: var dom ...
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
- jQuery 学习笔记
jQuery 学习笔记 一.jQuery概述 宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
- jQuery学习笔记(一):入门
jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- jQuery 学习笔记:jQuery 代码结构
jQuery 学习笔记:jQuery 代码结构 这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...
- jQuery学习笔记之插件开发(4)
jQuery学习笔记之插件开发(4) github源码地址 插件:了让原有功能的增强. 1.插件的种类(3种):局部.全局.选择器插件 1.1封装对象方法的插件 这种类型的插件是把一些常用或者重复使用 ...
随机推荐
- Pro Micro
选择这块Arduino板主要是因为它便宜(淘宝上20元左右搞定),引脚相对较多,体积小,而且其使用的处理器核心ATmega32U4(兼容Arduino Leonardo)可用于模拟HID设备,可以配合 ...
- 网络爬虫入门:你的第一个爬虫项目(requests库)
0.采用requests库 虽然urllib库应用也很广泛,而且作为Python自带的库无需安装,但是大部分的现在python爬虫都应用requests库来处理复杂的http请求.requests库语 ...
- 利用Python进行数据分析-Pandas(第六部分-数据聚合与分组运算)
对数据集进行分组并对各组应用一个函数(无论是聚合还是转换),通常是数据分析工作中的重要环节.在将数据集加载.融合.准备好之后,通常是计算分组统计或生成透视表.pandas提供了一个灵活高效的group ...
- 织女星开发板RISC-V内核实现微秒级精确延时
前言 收到VEGA织女星开发板也有一段时间了,好久没玩了,想驱动个OLED屏,但是首先要实现IIC协议,而实现IIC协议,最基本的就是需要一个精确的延时函数,所以研究了一下如何来写一个精确的延时函数. ...
- ETCD:词汇表
原文地址:词汇表 本文档定义了etcd文档,命令行和源代码中使用的各种术语. Alarm 每当集群需要操作员干预以保持可靠性时,etcd服务器都会发出警报. Authentication 身份验证管理 ...
- 【已解决】前端到后端400错误(The server cannot or will not process the request due to...)
看到400错误,一般是请求无效.出现该异常一般有三种情况: 第一种情况: 前端提交的内容在后端一般都用String类型来接收,用Date类型接收会报错. 第二种情况: 在提交表单的时候,填写的数据类型 ...
- vscode解决nuget插件不能使用的问题
错误提示 使用vscode安装nuget插件之后出现错误: "Versioning information could not be retrieved from the NuGet pac ...
- Initialize a Property After Creating an Object 创建对象后初始化属性 (XPO)
In this lesson, you will learn how to set the default value for a particular property of a business ...
- OpenCV:增加和减少图像的亮度,图像的加减法
首先导包: import numpy as np import cv2 import matplotlib.pyplot as plt def show(image): plt.imshow(imag ...
- 小程序Canvas性能优化实战
以下内容转载自totoro的文章<小程序Canvas性能优化实战!> 作者:totoro 链接:https://blog.totoroxiao.com/canvas-perf-mini/ ...