jQuery进阶

复习: jq无论如何都是一个集合 jq是一个包装集

var arr=$("div").get( )会将所有的DOM对象转换成真正的数组,

get( )里边没传参数

兄弟元素: 只要是同级就是兄弟元素,不管是不是同一种元素

方法: next()用来获取当前元素的下一个兄弟元素,获取不到元素 ,那么久获取不到(返回的是一个空 )

1.css方法

参数少的 时候表示获取,参数多的 时候表示设置

作用:用来设置或者 获取指定的JQ对象的样式属性

①:传入2个参数,表示设置样式

②:传入1个参数,表示获取样式

获取样式,不管是行内还是CSS设置的样式都可以获取到。 ③:一次同时设置多个样式:CSS({color:"red, bgc:"pink""})

对象的 属性可以带引号,也可以不带引号

2.类样式操作(类名不带点)

.addClass 给匹配到的元素添加类 .addClass(“ ");

.removeClass( )给你匹配到的元素移除制定的类 .hasClass( )用来判断指定的元素有没有类,返回值是一个布尔值(匹配到的元素中,只要有一个元素只要有一个元素包含这个类,返回值就是true

.toggleClass( )实现 类的切换,如果有类就移除,如果没类就添加

3.动画

效果: 都是数值 属性值都只有一个

展示动画的效果:第一种,不带参数(没有动画效果) $("div").show(传入相应数值参数 ) 参数的单位是毫秒。让div在一秒钟内展示出来 ,改变了宽和高,以及不透明度 传入字符串参数

①:“fast”200

②:“normal”400

③:“slow”600

传入两个参数: 第一个参数是动画执行的时长

第二个参数,是动画执行完,立即执行回调函数

隐藏动画的效果:hide( )

淡入淡出的效果: : 参数乱写时,那么默认值还是normal 其他参数和hide一样

fadeOut( )

滑入和滑出的效果(卷帘门):slidedDown(滑入)改变的是 高度

slildeUp(滑出)

切换:$("div").toggle( );判断是展示还是隐藏 如果展示就隐藏 反之亦然

淡入淡出的切换: $("div").fadeToggle( );//原来括号里能传什么参数,这里就可以传什么

滑入滑出的切换: $("div").slideToggle( );

改变不透明度效果:.fadeTo( )第一个参数:表示动画执行的时长 第二个参数:指定一个不透明度的值

自定义的动画效果:animate({ width:"10px"} ,4000,function(){ }) 第一个参数,要执行动画的样式属性 第二个参数是执行动画的时长 第三个参数是回调函数 在二三参数之间还可以写

linear(表示匀速 ) 默认的是swing(先快后慢 )

3.事件 .hover( )

无论是鼠标进入还是鼠标离开,都会执行这个方法

.hover(function(){ },function(){ })

传入两个参数。第一个表示mouseenter 第二个表示mouseleave

接受一个参数时,不管是鼠标进入还是鼠标离开,都会这行这个方法 配合toggle使用

.hover(function(){$("div").slideToggle( );})

4.stop( )作用: 停止JQ动画,想让那个元素停止动画,就在那个元素的后边调用这个方法

先调用stop( )方法,在调用animate( )方法

第一个参数:表示是否清空后续的所有动画(告后边饭卖完了,后边的动画不会去执行了)

第二个参数: 表示是否立即执行完当前动画(瞬间完成动画true)false(就是不执行就停那里)

stop( false,false)默认的 匆匆从前走到后

5.节点操作

追加节点:append( ) 还是放到最后一个子节点的后边

会把原来的先移除掉,在追加到新的位置去

参数: 可以是JQ对象 可以是一个DOM对象 html格式的字符串

$("div").apppend("<p>nihai</p>");//会在方法的内部创建标签,然后追加到指定的元素中去

$( )函数也可以接受html格式的字符串,也会帮我们 创建出 元素

var $p2=$("<p>nihai</p>") $("div").append( $p2)

6.

7. .html( )用来获取或者设置html的内容

$("div").html("设置 内容")

$("div").html( ) //获取内容

时间: 2024-12-07 08:23:19

jQuery进阶的相关文章

jquery进阶(1)

今天我们接着来学习jQuery中的内容,包括css的操作.尺寸的操作.文档的操作.动画(有待补充),事件处理操作. 一.CSS 在css中可以设置css的基本属性 - .css("color") -> 获取color css值 - .css("color", "#ff0000") -> 设置值 - .css({"color": "#cccccc", "border": &qu

沫沫金 - 实战总结jQuery进阶技巧图册

zly:多个parent使用parents代替 2016-01-04 17:11 关键词:parents $tr = $('td').parent().parent()... 替换 $tr = $('td').parents('tr'); 警! 注意 s 的使用. zly:操作iframe父页面元素 2016-01-04 17:23 关键词:window.parent.document  $("#visitDate", window.parent.document).val(inReg

26、jQuery

一. jQuery简介 (一) jQuery是什么: 是一个javascript代码仓库 是一个快速的简洁的javascript框架,可以简化查询DOM对象.处理事件.制作动画.处理Ajax交互过程. (二) jQuery优势 体积小,使用灵巧(只需引入一个js文件) 方便的选择页面元素(模仿CSS选择器更精确.灵活) 动态更改页面样式/页面内容(操作DOM,动态添加.移除样式) 控制响应事件(动态添加响应事件) 提供基本网页特效(提供已封装的网页特效方法) 快速实现通信(ajax) 易扩展.插

第一百七十四节,jQuery,Ajax进阶

jQuery,Ajax进阶 学习要点: 1.加载请求 2.错误处理 3.请求全局事件 4.JSON 和 JSONP 5.jqXHR 对象 在 Ajax 课程中,我们了解了最基本的异步处理方式.本章,我们将了解一下 Ajax 的 一些全局请求事件.跨域处理和其他一些问题. 一.加载请求 在 Ajax 异步发送请求时,遇到网速较慢的情况,就会出现请求时间较长的问题.而超 过一定时间的请求,用户就会变得不再耐烦而关闭页面.而如果在请求期间能给用户一些提 示,比如:正在努力加载中...,那么相同的请求时

事件绑定之鼠标悬停 -入门-进阶-精通-骨灰(来自锋利的jQuery)

<!DOCTYPE html> <html> <head> <title>事件绑定之鼠标悬停</title> <script src="jquery-3.1.1.js"></script> <script> </script> <style type="text/css"> .head{ width: 200px; border: 1px soli

jQuery基础---Ajax进阶

原文:jQuery基础---Ajax进阶 内容提纲: 1.加载请求 2.错误处理 3.请求全局事件 4.JSON 和 JSONP 5.jqXHR 对象 发文不易,转载请注明出处! 在 Ajax 基础一篇中,我们了解了最基本的异步处理方式.本篇来了解一下 Ajax 的一些全局请求事件.跨域处理和其他一些问题. 一.加载请求 在 Ajax 异步发送请求时,遇到网速较慢的情况,就会出现请求时间较长的问题.而超过一定时间的请求, 用户就会变得不再耐烦而关闭页面. 而如果在请求期间能给用户一些提示,比如:

js菜鸟进阶-jQuery源码分析(1)-基本架构

导读: 本人JS菜鸟一枚,为加强代码美观和编程思想.所以来研究下jQuery,有需要进阶JS的同学很适合阅读此文!我是边看代码(jquery2.2.1),边翻“javascript高级程序设计”写的,有很多基本知识点我都写了书本对应的章节.有分析得不好的还请各位多多指教,更正! 希望我的分析对大家有所帮助,谢谢! 一.代码构成 (function(global, factory){ if ( typeof module === "object" && typeof mo

jQuery插件库代码分享 - 进阶者系列 - 学习者系列文章

这些天将原来在网上找的jQuery插件进行了下整理,特此将代码分享出来给大家. 见下图结构. 对目录结构进行了分类.这里是插件列表. 这里总共收集了20来个插件.还有下面未进行划分的. 下面是DEMO使用示例. 下面是上次的一个示例. 编写Javascript类库(jQuery版) - 进阶者系列 - 学习者系列文章 主要收集了这些个大概能使用到的插件. 下面提供下载地址: http://files.cnblogs.com/lzhdim/JavascriptSLN.rar Ps.今天是周六,天气

前端 - js方式Ajax/ jquery方式Ajax / 伪 ajax /伪ajax 进阶方式

DJANGO环境搭建: 目录文件: 关闭CSRF 添加目录文件路径 配置url 视图配置: index页面配置: 测试:(成功) 进入正题: ajax 通过GET提交数据至后台: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body>