jQuery基础部分笔记
jquery文档加载完再执行
将获取元素的语句写到页面头部,会因为元素还没有加载而出错,jquery提供了ready方法解决这个问题,它的速度比原生的 window.onload 更快。
可以简写为: $(function(){ … })
<script type="text/javascript">$(function(){......});</script>
jquery选择器
jquery用法思想一
选择某个网页元素,然后对它进行某种操作
$('#myId') //选择id为myId的网页元素
$('.myClass') // 选择class为myClass的元素
$('li') //选择所有的li元素
$('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素
$('input[name=first]') // (特殊)选择name属性等于first的input元素
对选择集进行过滤
$('div').has('p'); // 选择包含p元素的div元素
$('div').not('.myClass'); //选择class不等于myClass的div元素
$('div').eq(5); //选择第6个div元素
选择集转移(了解)
$('#box').prev(); //选择id是box的元素前面紧挨的同辈元素
$('#box').prevAll(); //选择id是box的元素之前所有的同辈元素
$('#box').next(); //选择id是box的元素后面紧挨的同辈元素
$('#box').nextAll(); //选择id是box的元素后面所有的同辈元素
$('#box').parent(); //选择id是box的元素的父元素
$('#box').children(); //选择id是box的元素的所有子元素
$('#box').siblings(); //选择id是box的元素的同级元素
$('#box').find('.myClass'); //选择id是box的元素内的class等于myClass的元素
判断是否选择到了元素
jquery有容错机制,即使没有找到元素,也不会出错,可以用length属性来判断是否找到了元素,length等于0,就是没选择到元素,length大于0,就是选择到了元素。
var $div1 = $('#div1');
var $div2 = $('#div2');
alert($div1.length); // 弹出1
alert($div2.length); // 弹出0
......
<div id="div1">这是一个div</div>
jquery样式操作
jquery用法思想二
同一个函数完成取值和赋值
操作行间样式
(一个参数为获取)
(两个参数为设置)
// 获取div的样式
$("div").css("width");
$("div").css("color");
//设置div的样式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});
特别注意
选择器获取的多个元素,获取信息获取的是第一个,比如:$(“div”).css(“width”),获取的是第一个div的width。
操作样式类名(重点)
$("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2
$("#div1").removeClass("divClass") //移除id为div1的对象的class名为divClass的样式
$("#div1").removeClass("divClass divClass2") //移除多个样式
$("#div1").toggleClass("anotherClass") //重复切换anotherClass样式
绑定click事件
给元素绑定click事件,可以用如下方法:
$('#btn1').click(function(){// 内部的this指的是原生对象// 使用jquery对象用 $(this)})
jquery动画
通过animate方法可以设置元素某属性值上的动画,可以设置一个或多个属性值,动画执行完成后会执行一个函数。
animate参数:参数一:要改变的样式属性值,写成字典的形式参数二:动画持续的时间,单位为毫秒,一般不写单位参数三:动画曲线,默认为‘swing’,缓冲运动,还可以设置为‘linear’,匀速运动参数四:动画回调函数,动画完成后执行的匿名函数
$('#div1').animate({width:300,height:300
},1000,'swing',function(){alert('done!');
});
jQuery基础部分笔记相关推荐
- jQuery基础学习笔记(上)
1.简介及语法 认识jQuery 1.jQuery: jQuery库可以通过一行简单的标记被添加到网页中. 2.什么事jQuery: jQuery是一个JavaScript函数库. 3 ...
- jQuery基础知识笔记一
学习目标 知道jQuery常用选择器的写法 知道jQuery如何操作元素样式 知道jquery的常用事件 知道选项卡的基本实现原理 知道如何制作基本的动画 了解表单验证的基本原理 03-[了解]jqu ...
- jQuery 基础学习笔记
1. jQuery 的执行时间: $(document).ready(function(){--- jQuery functions go here ----// 保证当文档对象加载完成后,进行元素事 ...
- jQuery基础学习笔记(下)
8.jQuery的扩展与noConflict 1.jQuery扩展 <script src="../../jquery-2.1.3.min.js"></scrip ...
- jQuery基础学习笔记(中)
5.CSS操作及jQuery的盒子模型 1.jQuery CSS方法 <div></div> css.css .style1{width: 100px;height: 100p ...
- JQuery-学习笔记04【基础——JQuery基础案例】
Java后端 学习路线 笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
- JQuery-学习笔记01【基础——JQuery基础】
Java后端 学习路线 笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
- 阮一峰:jQuery官方基础教程笔记
原文地址:http://www.jobbole.com/entry.php/1151 jQuery是目前使用最广泛的javascript函数库. 据统计,全世界排名前100万的网站,有46%使用jQu ...
- JQuery 基础笔记
JQuery 基础笔记 1. jQuery 概述 1.1 jQuery 是什么? 1.2 jQuery 简单应用 1.3 jQuery 功能应用 1.4 jQuery 技术优势 1.5 jQuery ...
最新文章
- 利用LSM实现更安全的linux
- nextcloud 中文乱码解决方案
- java隐藏与覆盖_java中方法的隐藏和覆盖问题?
- 在基于对话框的MFC创建状态栏以及添加时间显示
- 渐进式Web应用程序居然是Web开发的未来
- 【ACL 2021】基于一致性正则的跨语言微调方法
- 关于自定义任务(Tasks)的心得(转载)
- SQLServer 使用sp_repldone标识所有未分发的事务为已分发
- 一文让你彻底搞懂主成成分分析PCA的原理及代码实现(超详细推导)
- GBK字库 ISO 10646 Unicode UTF8
- STC8H8K64U单片机学习-1-芯片功能介绍
- matlab 取符号函数,Matlab 符号表达式和符号函数的操作
- 大数据整体技术流程及架构
- 图文并茂 RAID 技术全解 – RAID0、RAID1、RAID5、RAID100
- 通过PHP使用Google Translate API
- 《星际迷航*:舰桥船员》与虚拟现实新趋势
- 网游无间道:你所忽略的托儿
- 小布机器人怎么断网_小布壳Q1,用人工智能重新定义儿童阅读
- 坐标下载gRaphael——JavaScript 矢量图表库:两行代码实现精美图表
- windows10环境下iceworks(飞冰)安装