jQuery-介绍 加载 选择器 样式操作 属性操作 绑定click事件
jQuery - 介绍 加载 选择器 样式操作 属性操作 绑定click事件
注意:以下部分问题不能实现效果,因该是单词拼写错误(少个t)或者没有加引号(“swing”)。。。
jquery介绍
jQuery是目前使用最广泛的javascript函数库。据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库。微软公司甚至把jQuery作为他们的官方库。
jQuery的版本分为1.x系列和2.x、3.x系列,1.x系列兼容低版本的浏览器,2.x、3.x系列放弃支持低版本浏览器,目前使用最多的是1.x系列的。
jquery是一个函数库,一个js文件,页面用script标签引入这个js文件就可以使用。
- <script type= " text/javascript " src= " js/jquery-1.12.2.js " ></script>
jquery的口号和愿望Write Less, Do More(写得少,做得多)
1、http://jquery.com/ 官方网站
2、https://code.jquery.com/ 版本下载
jquery加载
将获取元素的语句写到页面头部,会因为元素还没有加载而出错,jquery提供了ready方法解决这个问题,它的速度比原生的window.onload 更快。
- <script type= " text/javascript " >
- $(document).ready(function(){
- ......
- });
- </script>
可以简写为:
- <script type= " text/javascript " >
- $(function(){
- ......
- });
- </script>
jquery选择器
jquery用法思想一
选择某个网页元素,然后对它进行某种操作
jquery选择器
jquery选择器可以快速地选择元素,选择规则和css样式相同,使用length属性判断是否选择成功。
- $( " #test " ).html()
- 意思是指:获取ID为test的元素内的html代码。其中html()是jQuery里的方法
- 这段代码等同于用DOM实现代码: document.getElementById( " test " ).innerHTML;
- 虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法.乱使用会报错
- 约定:如果获取的是jQuery 对象, 那么要在变量前面加上$.
- var $variable = jQuery对象
- var variable = DOM对象
- $variable[ 0 ]:jquery对象转为dom对象$( " #msg " ).html(); $( " #msg " )[ 0 ].innerHTML
jquery的基础语法:$(selector).action()
参考:http://jquery.cuishifeng.cn/
- $(document) // 选择整个文档对象
- $( ' li ' ) // 选择所有的li元素
- $( ' #myId ' ) // 选择id为myId的网页元素
- $( ' .myClass ' ) // 选择class为myClass的元素
- $( ' input[name=first] ' ) // 选择name属性等于first的input元素
- $( ' #ul1 li span ' ) // 选择id为为ul1元素下的所有li下的span元素
对选择集进行修饰过滤(类似CSS伪类)
- $( ' #ul1 li:first ' ) // 选择id为ul1元素下的第一个li
- $( ' #ul1 li:odd ' ) // 选择id为ul1元素下的li的奇数行
- $( ' # ul1 li:eq(2) ' ) // 选择id为ul1元素下的第3个li
- $( ' #ul1 li:gt(2) ' ) // 选择id为ul1元素下的前三个之后的li
- $( ' #myForm :input ' ) // 选择表单中的input元素
- $( ' div:visible ' ) // 选择可见的div元素
表单选择器
- :enabled
- :disabled
- : checked
- :selected
- <body>
- <form>
- <input type= " checkbox " value= " 123 " checked >
- <input type= " checkbox " value= " 456 " checked >
- < select >
- <option value= " 1 " >Flowers</option>
- <option value= " 2 " selected= " selected " >Gardens</option>
- <option value= " 3 " selected= " selected " >Trees</option>
- <option value= " 3 " selected= " selected " >Trees</option>
- </ select >
- </form>
- <script src= " jquery.min.js " ></script>
- <script>
- // console.log($("input:checked").length); // 2
- // console.log($("option:selected").length); // 只能默认选中一个,所以只能lenth:1
- $( " input:checked " ).each(function(){
- console.log($( this ).val())
- })
- </script>
- </body>
such as
对选择集进行函数过滤
- $( ' div ' ).has( ' p ' ); // 选择包含p元素的div元素
- $( ' div ' ).not( ' .myClass ' ); // 选择class不等于myClass的div元素
- $( ' div ' ).filter( ' .myClass ' ); // 选择class等于myClass的div元素
- $( ' div ' ).first(); // 选择第1个div元素
- $( ' div ' ).eq( 5 ); // 选择第6个div元素
选择集转移
- $( ' div ' ).prev( ' p ' ); // 选择div元素前面的第一个p元素
- $( " div " ).prevAll()
- $( " div " ).prevUntil() // 直到找到符合括号里面的条件的停止
- $( ' div ' ).next( ' p ' ); // 选择div元素后面的第一个p元素
- $( " .test " ).nextAll()
- $( " .test " ).nextUntil()
- $( ' div ' ).closest( ' form ' ); // 选择离div最近的那个form父元素
- $( ' div ' ).parent(); // 选择div的父元素
- $( " .test " ) .parents();所有级别的父级别标签
- $( " .test " ).parentUntil() ;所有级别的父级别标签,直到。。。
- $( ' div ' ).children(); // 选择div的所有子元素
- $( ' div ' ).siblings(); // 选择div的同级元素
- $( ' div ' ).find( ' .myClass ' ); // 选择div内的class等于myClass的元素
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样式
jquery属性操作
1、html() 取出或设置html内容
- // 取出html内容
- var $htm = $( ' #div1 ' ).html();
- // 设置html内容
- $( ' #div1 ' ).html( ' <span>添加文字</span> ' );
2、text() 取出或设置text内容
- // 取出文本内容
- var $htm = $( ' #div1 ' ).text();
- // 设置文本内容
- $( ' #div1 ' ).text( ' <span>添加文字</span> ' );
3、attr() 取出或设置某个属性的值
- // 取出图片的地址
- var $src = $('#img1').attr('src');
- // 设置图片的地址和alt属性
- $('#img1').attr({ src: "test.jpg", alt: "Test Image" });
绑定click事件
给元素绑定click事件,可以用如下方法:
- $('#btn1').click(function(){
- // 内部的this指的是原生对象
- // 使用jquery对象用 $(this)
- })
事件委派
$(父标签).on("click",".item",function(){});
--- 解决添加子元素的绑定事件
$(标签).off(事件)
--- 解除事件
jquery特殊效果
- fadeIn() 淡入
- $btn.click(function(){
- $('#div1').fadeIn(1000,'swing',function(){
- alert('done!');
- });
- });
- fadeOut() 淡出
- fadeToggle() 切换淡入淡出
- hide() 隐藏元素
- show() 显示元素
- toggle() 依次展示或隐藏某个元素
- slideDown() 向下展开
- slideUp() 向上卷起
- slideToggle() 依次展开或卷起某个元素
尺寸1、获取和设置元素的尺寸相关、滚动事件
- width()、height() 获取元素width和height
- innerWidth()、innerHeight() 包括padding的width和height
- outerWidth()、outerHeight() 包括padding和border的width和height
- outerWidth(true)、outerHeight(true) 包括padding和border以及margin的width和height
2、获取元素相对页面的绝对位置
- offset()
3、获取可视区高度
- $(window).height();
4、获取页面高度
- $(document).height();
5、获取页面滚动距离
- $(document).scrollTop();
- $(document).scrollLeft();
6、页面滚动事件
- $(window).scroll(function(){
- ......
- })
jquery事件
事件函数列表:
- blur() 元素失去焦点
- focus() 元素获得焦点
- change() 表单元素的值发生变化
- click() 鼠标单击
- dblclick() 鼠标双击
- mouseover() 鼠标进入(进入子元素也触发)
- mouseout() 鼠标离开(离开子元素也触发)
- mouseenter() 鼠标进入(进入子元素不触发)
- mouseleave() 鼠标离开(离开子元素不触发)
- hover() 同时为mouseenter和mouseleave事件指定处理函数
- mouseup() 松开鼠标
- mousedown() 按下鼠标
- mousemove() 鼠标在元素内部移动
- keydown() 按下键盘
- keypress() 按下键盘
- keyup() 松开键盘
- load() 元素加载完毕
- ready() DOM加载完成
- resize() 浏览器窗口的大小发生改变
- scroll() 滚动条的位置发生变化
- select() 用户选中文本框中的内容
- submit() 用户递交表单
- toggle() 根据鼠标点击的次数,依次运行多个函数
- unload() 用户离开页面
事件冒泡
什么是事件冒泡
在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。
事件冒泡的作用
事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元素上),它还可以让你在对象层的不同级别捕获事件。
阻止事件冒泡
事件冒泡机制有时候是不需要的,需要阻止掉,通过 event.stopPropagation() 来阻止
- $(function(){
- var $box1 = $('.father');
- var $box2 = $('.son');
- var $box3 = $('.grandson');
- $box1.click(function() {
- alert('father');
- });
- $box2.click(function() {
- alert('son');
- });
- $box3.click(function(event) {
- alert('grandson');
- event.stopPropagation();
- });
- $(document).click(function(event) {
- alert('grandfather');
- });
- })
- ......
- <div class="father">
- <div class="son">
- <div class="grandson"></div>
- </div>
- </div>
阻止默认行为
阻止右键菜单
- $(document).contextmenu(function(event) {
- event.preventDefault();
- });
合并阻止操作
实际开发中,一般把阻止冒泡和阻止默认行为合并起来写,合并写法可以用
- // event.stopPropagation();
- // event.preventDefault();
- // 合并写法:
- return false;
jquery元素节点操作
创建节点
- var $div = $('<div>');
- var $div2 = $('<div>这是一个div元素</div>');
插入节点
1、append()和appendTo():在现存元素的内部,从后面插入元素
- var $span = $('<span>这是一个span元素</span>');
- $('#div1').append($span);
- ......
- <div id="div1"></div>
2、prepend()和prependTo():在现存元素的内部,从前面插入元素
3、after()和insertAfter():在现存元素的外部,从后面插入元素
4、before()和insertBefore():在现存元素的外部,从前面插入元素
删除节点
- $('#div1').remove();
滚轮事件与函数节流
jquery.mousewheel插件使用
jquery中没有鼠标滚轮事件,原生js中的鼠标滚轮事件不兼容,可以使用jquery的滚轮事件插件jquery.mousewheel.js。
函数节流
javascript中有些事件的触发频率非常高,比如onresize事件(jq中是resize),onmousemove事件(jq中是mousemove)以及上面说的鼠标滚轮事件,在短事件内多处触发执行绑定的函数,可以巧妙地使用定时器来减少触发的次数,实现函数节流。
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>整页滚动</title>
- <link rel="stylesheet" type="text/css" href="css/test.css">
- <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
- <script type="text/javascript" src="js/jquery.mousewheel.js"></script>
- <script type="text/javascript">
- $(function(){
- var $h = $(window).height();
- var len = $('.pages').length;
- var $points = $('.points li');
- var $pages = $('.pages');
- var nowscreen = 0;
- var timer = null;
- $pages.eq(0).addClass('moving');
- $('.pages').css({height:$h});
- //dat的值:-1是向下滑动,1是向上滑动
- $(window).mousewheel(function(event,dat){
- //清掉前面刚刚开的定时器
- clearTimeout(timer);
- // 最新的一次定时器
- timer = setTimeout(function(){
- if(dat==-1)
- {
- nowscreen++;
- if(nowscreen>len-1){
- nowscreen=len-1;
- }
- }
- else
- {
- nowscreen--;
- if(nowscreen<0){
- nowscreen=0;
- }
- }
- $('.pages_con').animate({top:-$h*nowscreen},300);
- $points.eq(nowscreen).addClass('active').siblings().removeClass('active');
- $pages.eq(nowscreen).addClass('moving').siblings().removeClass('moving');
- },200);
- })
- $points.click(function(){
- $(this).addClass('active').siblings().removeClass('active');
- $('.pages_con').animate({top:-$h*$(this).index()},300);
- $pages.eq($(this).index()).addClass('moving').siblings().removeClass('moving');
- })
- })
- </script>
- </head>
- <body>
- <div class="pages_con">
- <div class="pages page1 moving">
- <div class="main_con">
- <div class="left_img"><img src="data:images/001.png"></div>
- <div class="right_info">
- Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是Web1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行为也以浏览为主。
- </div>
- </div>
- </div>
- <div class="pages page2">
- <div class="main_con">
- <div class="right_img"><img src="data:images/002.png"></div>
- <div class="left_info">
- 2005年以后,互联网进入Web2.0时代,各种类似桌面软件的Web应用大量涌现,网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的。
- </div>
- </div>
- </div>
- <div class="pages page3">
- <div class="main_con">
- <div class="left_img"><img src="data:images/004.png"></div>
- <div class="right_info">
- 以前会Photoshop和Dreamweaver就可以制作网页,现在只掌握这些已经远远不够了。无论是开发难度上,还是开发方式上,现在的网页制作都更接近传统的网站后台开发,所以现在不再叫网页制作,而是叫Web前端开发。
- </div>
- </div>
- </div>
- <div class="pages page4">
- <div class="main_con">
- <div class="left_img"><img src="data:images/003.png"></div>
- <div class="right_info">
- Web前端开发在产品开发环节中的作用变得越来越重要,而且需要专业的前端工程师才能做好,这方面的专业人才近几年来备受青睐。Web前端开发是一项很特殊的工作,涵盖的知识面非常广,既有具体的技术,又有抽象的理念。简单地说,它的主要职能就是把网站的界面更好地呈现给用户。
- </div>
- </div>
- </div>
- <div class="pages page5">
- <div class="main_con">
- <div class="center_img"><img src="data:images/005.png"></div>
- </div>
- </div>
- </div>
- <ul class="points">
- <li class="active"></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- </ul>
- </body>
- </html>
整屏滚动
jQuery-介绍 加载 选择器 样式操作 属性操作 绑定click事件的更多相关文章
- 19 01 13 JQery 加载 选择器 样式操作
在Javascript 中应该用下方法经行编辑 <script type="text/javascript" src="js/jquery-1.12.4.min ...
- jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax
jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...
- 前端(十八)—— jQuery高级操作:选择器、文本属性与类、事件、文档操作、动画、结构关系
JQ选择器.文本属性与类.事件.文档操作.动画.结构关系 可参考jQuery的API文档 一.选择器 1.css语法匹配 标签 | 类 | id | 交集 群组 | 后代 | 兄弟 伪类 | 属性 $ ...
- jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色
jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...
- 2016/4/1 jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色
jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...
- jQuery - 02. 样式表属性操作/类操作、动画、显示隐藏、滑入、淡入、停止动画、节点操作、添加对象、清空节点
样式表属性操作.css $("div").css({'width':100,'height':100,'background':'red'}); $("div" ...
- jQuery自动加载更多程序
1.1.1 摘要 现在,我们经常使用的微博.微信或其他应用都有异步加载功能,简而言之,就是我们在刷微博或微信时,移动到界面的顶端或低端后程序通过异步的方式进行加载数据,这种方式加快了数据的加载速度,由 ...
- jQuery+zTree加载树形结构菜单
jQuery+zTree加载树形结构菜单 由于项目中需要设计树形菜单功能,经过一番捣腾之后,终于给弄出来了,所以便记下来,也算是学习zTree的一个总结吧. zTree的介绍: 1.zTree 是利用 ...
- jQuery自动加载更多程序(转)
jQuery自动加载更多程序 1.1.1 摘要 现在,我们经常使用的微博.微信或其他应用都有异步加载功能,简而言之,就是我们在刷微博或微信时,移动到界面的顶端或低端后程序通过异步的方式进行加载数据 ...
随机推荐
- Gym 102028J 扫描线/二维差分 + 解方程
题意:有一个二维平面,以及n个操作,每个操作会选择一个矩形,使得这个二维平面的一部分被覆盖.现在你可以取消其中的2个操作,问最少有多少块地方会被覆盖? 思路:官方题解简洁明了,就不细说了:https: ...
- 前端学习(十三)js运算符(笔记)
类型转换: 1.强制类型转换:(数字字符串转数字) parseInt() parseFloat() Number()--严格转换 NaN: 不是 ...
- fzu 1901 next+脑洞
题目大意: 给你一个字符串str,对于每个str长度为p的前缀,如果str[i]==str[p+i](p+i<len),那么我们认为它是一个periodic prefixs.求所有满足题意的前缀 ...
- Spring 整合 Redis(转)
转自http://blog.csdn.net/java2000_wl/article/details/8543203 pom构建: <modelVersion>4.0.0</mode ...
- 【Web】Spring WebFlux
阅读目录 一.关于WebFlux 二.SpringMVC与SpringWebFlux 三.Reactive Spring Web 四.实现WebFlux示例 SpringWebflux是SpringF ...
- 【LeetCode 6】Z 字形变换
题目链接 [题解] 还想着模拟这个过程.然后发现只有行有用啊!... 那就建个rows大小的字符串数组存每行从左到右的字符就行啦.. 然后就是i从1变到n然后又变回1反复就好了. 最后把1..rows ...
- 暴力——cf557c
//枚举高度[1,100000],>l的全部割掉,<l的砍掉最小的 #include<bits/stdc++.h> using namespace std; #define N ...
- 关于cefsharp 获取js动态加载后的信息
IFrame frame = null; var identifiers = Browser.GetBrowser().GetFrameIdentifiers(); foreach (var i in ...
- 屏幕左侧鼠标常驻,隐藏部分显示,文章鼠标常驻,隐藏部分隐藏(我的hexo next博客)
文章目录 如图 功能 代码 博客地址:https://mmmmmm.me 源码:https://github.com/dataiyangu?tab=repositories 如图 功能 最左侧添加透明 ...
- 使用U盘或在本地电脑作为git远程仓库进行托管
情景描述: 当有两台电脑需要共同维护一段代码,其中一台电脑不希望(或者不能)通过网络的方式进行访问git仓库(即不使用github),那么可以使用U盘作为介质将其作为远程仓库,或者使用局域网中一台电脑 ...