odd").css("background-color", "#bbbbff"); 子元素伪类选择器 子元素伪类选择器就是选择某一个元素下面的子元素的方式，在jQuery中，子元素伪类选择器分为两大类...元素的淡入与淡出 使用hide()与show()方法 show和hide方法可以接受参数控制隐藏的过程.: show(speed,callback) speed参数规定显示或隐藏的速度: - slow...- fast - normal - 或者直接写数字，单位是毫秒，2000 callback是回调函数 使用fadeIn()方法 jQuery通过控制不透明度的变化来实现淡入效果，并在动画完成之后出发一个回调函数...绑定与接触事件 绑定事件 绑定事件就是将页面中的元素事件类型与其在收到该事件之后期望进行的操作联系到一起。...通过bind()绑定事件，使用方法和DOM中的addEventListener()方法大致相同。
jQuery冲突问题 使用jQuery时， $ 是访问jQuery的标志，但是如果有其他方法与jQuery中的 $冲突时，可以释放$的使用权 ，还可以自定义一个符号来代替 $使用。...> jQuery的核心函数 jQuery的核心函数就是$() 有以下作用： 1.接收一个函数 2.接收一个字符串：接收一个字符串的选择器；接收一个字符串代码片段 3.接收一个DOM元素 示例如下...对象 1.什么是jQuery对象 jQuery对象是一个伪数组 2.什么是伪数组 有0-length-1的属性，并且有length属性 jQuery的静态方法 each方法和 map方法 jQuery...可以找一个在入口函数执行之前就有的元素来监听动态添加的某些事件 为什么要事件委托 新增的节点没有click响应,因为jQuery入口函数加载$("ul>li").click时没有把...中如果通过核心函数找到的元素不知一个，那么在添加事件的时候，jQuery 会遍历所有找到的元素，给所有找到的元素添加事件 */
对象区分 1.jQuery 对象与 dom 对象 ① DOM 对象： 通过 getElementById()查询出来的标签对象时 Dom 对象 通过 getElementName()查询出来的标签对象时...对象 通过 jquery 提供的 API 查询到的对象,是 jQuery 对象 2.jQuery 对象的本质 JQuery 对象时 dom 对象的数组 + JQuery 提供的一系列功能函数。...)取出相对应的 DOM 对象 20200719165719.png 三、jQuery 的 2 把利器 1.jQuery 函数; $/jQuery jQuery 向外暴露的就是 jQuery 函数，可以直接使用...元素的伪数组对象 执行$()返回的就是 jQuery 对象 基本行为： length/size(): 得到 dom 元素的个数 [index] : 得到指定下标对应的 dom 元素 each(function...（子元素） find(selector) 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的方法。
理念：写的少，做的多。（用更少的代码做更多的事情） 注意：jQuery中提供的函数或对象与js中的函数或对象是没有关系的。...该错误的出现意味着jQuery的文件未加载成功 console.log($btns); console.log($btns2); 2.1.2 属性及伪类选择器 使用css2提供的属性选择器及css3提供的伪类选择器可以更快捷的选择元素...针对通过动态添加到页面中的元素进行事件绑定（此处先做了解，动态增删时演示案例） 语法：$(已存在的父元素).on(事件名,子元素选择器,函数) //给删除标签添加点击事件 $('table').on(...(); alert('btn up'); }) 本章小结 1.jQuery获取到的元素都是以组的形式存在的 2.jQuery的对象不能使用js中的属性或函数 3.jQuery中的操作基本都是以函数的形式存在的...(); alert('btn up'); }) 本章小结 1.jQuery获取到的元素都是以组的形式存在的 2.jQuery的对象不能使用js中的属性或函数 3.jQuery中的操作基本都是以函数的形式存在的
`是jQuery的顶级对象，相当于原生js中的window，元素通过`包装成jQuery对象，调用jQuery属性和方法。...（伪数组形式存储）的过程。...，并没有添加到页面元素中 ---- 添加元素 1.内部添加（添加过后与原元素程父子关系 element.append(''内容'');//把内容放入匹配元素内部最后面，类似原生 appendChild。...2.外部添加（添加过后与原元素程兄弟关系 element.after(''内容'');//把内容放入目标元素后面 element.before(''内容'');//把内容放入目标元素前面 ---- 删除元素...; }) var li = $("后来创建的li"); $("ol").append(li); 2.事件处理 off() 解绑事件可以移除通过 on() 方法添加的事件处理程序。
这样我们可以快速高效的使用这些封装好的功能了。 比如 jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）。 ...1.2.5. jQuery 对象和 DOM 对象 使用 jQuery 方法和原生JS获取的元素是不一样的，总结如下 : 用原生 JS 获取来的对象就是 DOM 对象 jQuery 方法获取的元素就是...1.2.6. jQuery 对象和 DOM 对象转换 DOM 对象与 jQuery 对象之间是可以相互转换的。...2.需要得到当前小li 的索引号，就可以显示对应索引号的图片 3.jQuery 得到当前元素索引号 $(this).index() 4.中间对应的图片，可以通过 eq(index) 方法去选择 5...总结: 每次使用动画之前，先调用 stop() ,在调用动画。 1.5.6. 事件切换 jQuery中为我们添加了一个新事件 hover() ; 功能类似 css 中的伪类 :hover 。
操作 CSS&style 使用 Jquery 直接获取 Iframe 里面的元素是不行的 需要多一层操作 $("#portalFrameID").contents().find(".smelter-alert...() 上面的例子将触发 id="demo" 的 button 元素的 click 事件。...这是一个简单的 GET 请求功能以取代复杂 .ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 .ajax。 参数 Attr Exp url 必需。...规定添加到元素的一个或多个事件。 由空格分隔多个事件。必须是有效的事件。 data 可选。规定传递到函数的额外数据。 function 必需。规定当事件发生时运行的函数。...另外 .fn 其实是 .prototype 的别名, 给 prototype 添加方法即是给 jQuery 扩展方法 使用的时候只需要 (function ($) { $.fn.tipTip =
jQuery 对象是经过包装的dom对象（伪数组形式存储） jQuery对象才能使用jQuery方法,不能混用 1.1.4 jQuery对象和Dom对象转换 // DOM对象转换成jQuery对象...属性名和属性值用冒号隔开， 属性可以不用加引号 $(this).css({ "color":"white","font-size":"20px"}); 一般来说通过在style中编写样式，通过添加类的方式添加样式...，第二个是鼠标移出时触发的函数 只写一个参数时，鼠标移入移出都会触发它 4.1 jQuery属性操作 4.1.1 元素固有属性值 prop() 获取元素本身自带的属性,有利于对表单操作 表单属性...页面刷新缓存清除 data('myName','ljc');//向元素添加数据 data('myName');//向元素读取数据 4.1.4 全选按钮 通过:checked选择器，可以以数组形式返回被选中的元素...删除 删除元素集合中的子节点 $('ul').empty();//相当于清空ul里的内容 通过html来清空 $('ul').html(); 4.4 尺寸，位置操作 4.4.1 jQuery尺寸操作 语法
课程目标 掌握jQuery常用API的使用 了解jQuery的设计思想 jQuery基本介绍 为什么要学jQuery 【01-让div显示与设置内容.html】 使用JS操作DOM的时候，会遇到以下的一些缺点...jquery-1.12.4.js:未压缩版本，适用于学习与开发环境，源码清晰，易阅读。 入口函数 入口函数的好处： 1. 等待文档加载完成，保证能够获取到元素 2....2.jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。 jQuery对象与DOM对象(重点) 基本概念： 1....3. jQuery对象其实就是DOM对象的包装集（包装了DOM对象的集合（伪数组）） jQuery对象与DOM对象的区别： 1. DOM对象与jQuery对象的方法不能混用。 2....注意：jQuery选择器返回的是jQuery对象。 jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器。
常用dom操作的实现： 在指定元素后面添加元素（外部）after（） 在指定元素前面添加元素（外部）before（） 在指定元素内部追加元素（内部）append（） 将新元素添加到指定元素的首部...$(“em”).empty 39、jquery事件中的click和on(“click”)有哪些区别 on支持事件委托 支持多个事件 click 不支持事件委托 只能绑定一个事件 40、如何自定义事件...、如何解决项目中已经存在的js类库中 与jQuery中 的冲突？...jQuery.noConflict() jQuery 使用 noConflict 方法来放弃 调用时的命名，之后由 jQuery 代替 进行编写 54、如何用jQuery获取元素在文档中的位置？...，并将新的元素添加到该列上，然后继续寻找所有列的各元素高度之和的最小者，继续添加至该列上，如此循环下去，直至所有元素均能够按要求排列为止 56、如何实现选项卡？
从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。...这样我们可以快速高效的使用这些封装好的功能了。 比如 jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）。...jQuery 对象和 DOM 对象 使用 jQuery 方法和原生JS获取的元素是不一样的，总结如下 : 用原生 JS 获取来的对象就是 DOM 对象 jQuery 方法获取的元素就是 jQuery 对象...jQuery 对象和 DOM 对象转换 DOM 对象与 jQuery 对象之间是可以相互转换的。...事件切换 jQuery中为我们添加了一个新事件hover()，功能类似 css 中的伪类:hover，介绍如下： 语法 hover([over,]out) // 其中over和out为两个函数
源码： //绑定事件的方法 //源码5812行 jQuery.fn.extend( { //在被选元素及子元素上添加一个或多个事件处理程序 //$().on('click'...jQuery.on() 方法： //绑定事件的on方法 //源码5143行 //目标元素，类型（click,mouseenter,focusin,xxx）,回调函数function(){xxx...该方法最终调用 jQuery.event.add( ) 方法 四、jQuery.event.add( ) 作用： 为目标元素添加事件 源码： //源码5235行 /* * Helper functions...事件，也就是说，click()/on() 的本质是 element.addEventListener() 事件，前面一系列的铺垫，都是在为目标 jQuery 对象添加必要的属性。...) ).replace( /\D/g, "" ), 可以看到 jQuery 的 id 是由 jQuery + 版本号+ Math.random() 生成的 关于 Math.random() 是如何生成伪随机数的请看
• fixed 固定定位，固定定位与父元素无关（无论父元素是否定位），直接根据浏览器窗口定位，且不随滚动条拖动页面而滚动，可通过z-index进行层次分级。...以button的Click事件为例： 1、直接在元素上绑定回调函数 click me 2、JS获取DOM元素对象后...JavaScript事件冒泡简介及应用 在Javascript中什么是伪数组？如何将伪数组转化为标准数组？...可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。 js将伪数组转换为标准数组的多种方法 常用JS框架都有什么？...浏览器解析html代码，并请求html代码中的资源 f. 浏览器对页面进行渲染呈现给用户 Jquery与jQuery UI 有啥区别？
优先使用ID与标记选择器 在jQuery中，最快访问DOM元素的方式是通过元素ID号，其次是通过元素的标记。...正确使用选择器 jQuery内部将自动调用浏览器的原生方法，执行速度依据各浏览器支持情况 ID和元素标签选择器(各浏览器都支持)>元素类型选择器(各浏览器对应原生方法各不相同)>伪类型和属性选择器...；为了减少这样的消耗，可以通过对象调用方法对应的函数。...name); //通过调用jQuery函数获取它的值 6....jQuery对象；通过jQuery语法包装原始的DOM对象后生成的新对象 在jQuery中，只需要调用jQuery中提供的[index]与get(index)方法；另外，DOM对象只要通过jQuery
jquery-X.X.X.js Development version - 用于测试和开发（未压缩，是可读的代码） ---- 使用jQuery 可以通过多种方法在网页中添加 jQuery...jQuery 语法 jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。...---- jQuery选择元素 DOM-Document Object Model 文档对象模型 以树状表示的文档模型 为了创建jQuery对象，就用使用$()函数。...您可以通过一个事件函数实现： $("p").click(function(){ // 动作触发后执行的代码!!...jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。
页面中指定一个点击事件： $("p").click(); 下一步是定义了点击后触发事件。您可以通过一个事件函数实现： $("p").click(function(){ // 动作触发后执行的代码!!...click() click() 方法是当按钮点击事件被触发时会调用一个函数。 该函数在用户点击 HTML 元素时执行。... attr() 的回调函数：实质就是返回值 jQuery - 添加元素 添加新的 HTML 内容 我们将学习用于添加新内容的四个 jQuery 方法： append...关于 jQuery 与 AJAX jQuery 提供多个与 AJAX 有关的方法。...通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
jquery的入口函数 使用jQuery的三个步骤： 引入jQuery文件 入口函数 功能实现 关于jQuery的入口函数： //第一种写法 $(document).ready(function() {...}); //第二种写法 $(function() { }); jQuery入口函数与js入口函数的对比： JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。...jQuery对象其实就是DOM对象的包装集包装了DOM对象的集合（伪数组） DOM对象与jQuery对象的方法不能混用。...// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用） // 第四个参数：handler，事件处理函数 $(selector).on(...//通过给$.fn添加方法就能够扩展jquery对象 $.fn. pluginName = function() {};
其实，多库共存就是“$ ”符号的冲突。 方法一： 利用jQuery的实用函数$.noConflict();这个函数归还$的名称控制权给另一个库，因此可以在页面上使用其他库。...其实，可以把(function($){/*代码块*/})(jQuery) 拆分成： 方法三： jQuery(function($){/*代码块*/}) 通过传递一个函数作为jQuery的参数，因此把这个函数声明为就绪函数...事件或js事件 // 4、写出尽可能多的伪类和伪元素 /*css伪类 css伪类用于向某些选择器添加特殊的效果。...中的标准规定伪类使用单冒号“:” ，伪元素使用双冒号“::”，但在此之前都使用的单冒号“:”，所以为了保证兼容伪元素两种使用方法都是可以的。...:hover { color: #000;} //错误写法 伪类与类优先级相同，伪元素与标签优先级相同。
jquery的入口函数 使用jQuery的三个步骤： 引入jQuery文件 入口函数 功能实现 关于jQuery的入口函数： //第一种写法 $(document).ready(function() {...}); //第二种写法 $(function() { }); jQuery入口函数与js入口函数的对比： JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行...jQuery对象其实就是DOM对象的包装集包装了DOM对象的集合（伪数组） DOM对象与jQuery对象的方法不能混用。...// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用） // 第四个参数：handler，事件处理函数 $(selector).on(...//通过给$.fn添加方法就能够扩展jquery对象 $.fn. pluginName = function() {};
表单选中元素 配合基本过滤选择器，缩小选中的范围 4.jQuery的DOM操作 使用jQuery的九种选择器可以基本选中需要操作的对象，但是为了提高jQuery的查询效率，可以结合jQuery的内置查找函数一起使用...(){… }) ，在each函数中可以通过this 获得DOM对象，$(this) 获得jQuery对象 ②：属性操作 设置属性 attr(name,value) 读取属性 attr(name) 同时设置多个属性...{ alert($(this).text()); }); // 使用remove方法删除 p元素，连同事件一起删除 // var $p = $("p").remove(); // 使用detach删除，...练习7： ² 表格数据添加与删除练习 jQuery事件 ①：事件绑定 传统js 一般一个对象只能绑定某种事件一个函数 jQuery 支持对同一个对象，同一个事件可以绑定多个函数 绑定事件函数到对象有两种写法 写法一 $("div").click
云服务器
ICP备案
实时音视频
对象存储
云直播
