jquery怎么调用、jquery使用教程 收藏 0

Jquery 详细用法

(1)jQuery是什么? 是一个js框架，其主要思想是利用jQuery提供的选择器查找要操作的节点,然后将找到的节点封装成 一个jQuery对象 。封装成jQuery对象的目的有两个： 一是为了 兼容不同的浏览器 ，另外，也 简化了代码 。

(2)编程的基本步骤 first.html step1, 利用选择器查找节点。选择器类似于css选择器。 step2, 调用jQuery对象的方法或者属性。

(3) jQuery对象与dom对象之间的相互转换 first.html。 a, dom对象 —> jQuery对象 $(dom对象) b, jQuery对象 —> dom对象 方式一: $obj.get(0) 方式二: $obj.get()[0]

1) 基本选择器 #id .class element selector1,selector2..selectorn *

2) 层次选择器 select1 select2 select1>select2 select1+select2 select1~select2

3 )过滤选择器 (1)基本过滤选择器 selector / s3.html :first :last :not(selector) :even :odd :eq(index) :gt(index) :lt(index) (2 )内容过滤选择器 selector : contains(text) 匹配包含给定文本的元素 : empty 匹配所有不包含子元素或者文本的空元素 : has(selector) 匹配含有选择器所匹配的元素的元素 : parent 匹配含有子元素或者文本的元素 (3) 可见性过滤选择器 selector :hidden 匹配所有不可见元素，或者type为hidden的元素 :visible 匹配所有的可见元素 (4) 属性过滤选择器 [attribute] [attribute=value] [attribute!=value] (5) 子元素过滤选择器 :nth-child(index/even/odd) (6) 表单对象属性过滤选择器 :enabled :disabled :checked :selected

4) 表单选择器 :input :text :pasword :radio :checkbox :submit :image :reset :button :file :hidden

(1)查询 dom / d1.html a, 查询或者修改节点的html内容 html() b, 查询或者修改节点的文本 text() c, 查询或者修改节点的属性 attr() d, 查询或者修改节点的值 val() 2) 创建 $(html) 3) 插入节点 append(): 向每个匹配的元素 内部追加内容 prepend() : 向每个匹配的元素 内部前置内容 after() : 在每个匹配的 元素之后插入内容 before() : 在每个匹配的元素 之前插入内容 4)删除节点 dom / d3.html remove() remove(selector) empty():清空节点 5) 将javascript代码与html分离 dom / d4.html $(fn); 6)复制节点 dom /d5.html clone() clone(true) : 使复制的节点也具有行为 (将事件处理代码一块复制) 7) 属性操作 读取：attr(\’id\’); 设置： attr(\’id\’,\’d1\’) 或者一次 设置多个 attr({\”id\”:\”d1\”,\”class\”:\”s1\”}); 删除：removeAttr(\’id\’) 8 )样式操作 dom / d6.html 获取和设置: attr(\”class\”,\”\”) 或者 attr(\”style\”,\”\”) 追加: addClass(\’s1\’) 移除: removeClass(\’s1\’) 或者 removeClass(\’s1 s2\’) 或者 removeClass() //会删除所有样式 切换样式： toggleClass ,有该样式，就删除，没有，就添加。 是否有某个样式 hasClass(\’s1\’) 读取 css(\’font-size\’) 设置 css(\’font-size\’,\’60px\’) 或者 css({\’\’:\’\’,\’\’:\’\’}) //设置多个样式 9) 遍历节点 dom / d7.html children() / children(selector) 只考虑子元素，不考虑其它后代元素。 next()/next(selector)下一个兄弟 prev()/next(selector):前一个兄弟 siblings()/siblings(selector)其它兄弟 find(selector):从当前节点开始查找后代。 parent():父节点 4、jQuery如何处理事件 1) 事件绑订 event / e1.html bind(type,fn) type:事件类型 fn:事件处理函数 2) 绑订方式的简写形式 click(function(){ }); 3) 合成事件 event/e2.html e3.html hover(enter,leave) : 模拟光标悬停事件 toggle(fn1,fn2…)： 模拟鼠标连续单击事件 4)事件冒泡 event/ e4.html a,什么是事件冒泡? 子节点产生的事件会依次向上抛给相应的父节点。 b,如何取消事件冒泡? event.cancelBubble = true; c, 如何获得事件对象? 只需要给事件处理函数添加event作为参数，比如 <a href… οnclick=\”clickA(event);\”> d, 事件对象的作用? 作用1： 找到事件源 event.target; firefox,chrome支持 event.srcElement; ie支持 event.target || event.srcElement 作用2: 获得鼠标点击的坐标 event.clientX;event.clientY; (1)获得事件对象 event / e5.html 只需要给事件处理函数传一个参数。 click(function(event){ }); (2)事件对象的作用 a,获得事件源 event.target; b,获得鼠标点击的坐标 event.pageX event.pageY c,事件类型 event.type (3 )停止冒泡 event / e6.html event.stopPropagation() (4) 停止默认行为 event.preventDefault() 5) 模拟操作 event / e7.html trigger(\’click\’)

2、动画

1)、show(), hide() animate / a1.html a,作用: 通过同时改变元素的宽度和高度来实现显示或者隐藏。 b,用法: show(速度,[callback]) 速度: \’slow\’,\’normal\’,\’fast\’,也可以用毫秒数 callback: 当整个动画执行完毕之后，会立即调用这个函数(回调函数)。 2)、slideUp() slideDown() animate / a1.html a,作用：通过改变元素的高度来实现显示或者隐藏 b,用法：同show 3)、fadeIn() fadeOut() animate / a2.html a,作用：通过改变不透明度来实现显示或者隐藏 b,用法：同show 4)、自定义动画 animate animate / a3.html 用法: animate(params,speed,[callback]) params: 是一个javascript对象，描述了 动画完成之后元素的样式。 比如: {\’left\’:\’500px\’,\’top\’:\’200px\’} speed:速度，单位是毫秒 callback:回调函数，也就是说，当整个 动画执行完毕之后会执行。

3、 类数组的操作 array/a1.html 所谓类数组，指的是jQuery对象里面包含的所有的dom对象。可以利用jQuery对象提供的一些方法 和属性来对这些dom对象进行遍历。 1)属性 length: 获得dom对象的个数。 2)方法 a, each(fn(i)): 循环遍历每一个元素, i表示被迭代的对象的下标。this代表被迭代的dom对象，$(this)代表被迭代的jquery对象。 b,eq(index)： 返回index位置处的jquery对象 c,index(obj)： 返回下标，其中obj可以是dom对象或者 jquery对象。 d,get()：返回dom对象组成的数组 e,get(index)：返回index位置处的dom对象。

4、jQuery对ajax的支持 1)load a,作用： 将服务器返回的数据直接添加到符合要求的节点之上。

b,用法: $obj.load(请求地址,[请求参数]); 请求地址: 服务器端某个组件的地址，比如 ***.do 请求参数: 有两种形式 请求字符串： \”username=zs&age=22\” 对象: {\’username\’:\’zs\’,\’age\’:22} 注意: 如果没有请求参数，则load方法会发送get请求， 如果有参数，则发送post请求。 2)$.get a, 作用： 向服务器发送get请求。 b,用法: $.get(请求地址,[请求参数],[callback],[服务器返回的数据类型]); callback: 是一个函数，格式callback(data,status),其中，可以通过data获得服务器返回的数据,status是一个状态的描述。 服务器返回的数据类型: 可以是 html : html内容 text: 文本 json: json字符串 xml: xml文档 script: javascript脚本 $.post a, 作用：向服务器发送post请求。 b,用法：同$.get 3)$.ajax 用法: $.ajax({}); 可以添加的参数: url(string): 请求地址 type(string): GET/POST data(object/string): 请求参数 dataType(string) : 预期服务器返回的数据类型。 同$.get一样。 success(function): 请求成功后调用的回调函数，有两个参数：function(data,textStatus),其中，data是服务器返回的数据，textStatus 描述状态的字符串。 error(function): 请求失败时调用的函数。 async: true(缺省)/false: 当值为false,发送同步请求。 keyup事件有一个bug, 某些浏览器在切换到中文输入法以后，keyup事件会失效。为解决这个问题，可以使用input(非ie浏览器支持)和propertychange(ie支持)事件来解决。

利用JQuery操作iframe父页面/子页面元素和方法汇总

前言

iframe在复合文档中经常用到，利用jquery操作iframe可以大幅提高效率，本文主要给大家分享了关于简单使用JQUERY来操作IFRAME的一些记录，这个使用纯JS也可以实现。下面话不多说了，来一起看看详细的介绍吧。

第一、在iframe中查找父页面元素的方法：

第二、在父页面中获取iframe中的元素方法：

第三、在iframe中调用父页面中定义的方法和变量：

JQUERY、JS调用IFRAME父窗口与子窗口元素的方法

1.jquery 在iframe子页面获取父页面元素代码如下:

2. jquery在父页面 获取iframe子页面的元素 代码如下:

3.js 在iframe子页面获取父页面元素代码如下:

4.js 在父页面获取iframe子页面元素代码如下:

5.子类iframe内调用父类函数：

jquery_iframe父子级页面事件使用

1、index.html

2、main.html

利用JQuery操作iframe父页面、子页面的元素和方法汇总

jQuery常见事件的监听方式

在 Web 页面经常会有各种事件发生，事件发生后需要进行一些特定处理，即执行特定的函数或者语句。这就需要对事件进行监听，监听事件的常见方式有以下三种，本人将通过实例来具体介绍。

实例1：单击页面 \”Hello\” 按钮，弹出提示框显示 Hello world！

注：在实例1中，事件的监听代码是放在 HTML 标签中，这种方式看起来比较直观，但是这是一种不大提倡的事件监听方式。首先，将视图代码（HTML）与交互代码（Javascript）相结合，意味着每当需要更新功能时，都必须编辑 HTML，这将给代码后期的维护带来很烦。其次，它不具备可扩展性。如果我们要将这个单击功能附加到许多按钮上，那么不仅要用一堆重复的代码来增加页面量，而且还会破坏可维护性。

实例2：单击页面\”Hello\”按钮，弹出提示框显示Hello world！

使用jQuery监听事件有很多种方法，如实例3所示。

实例3：单击页面 \”Hello\” 按钮，弹出提示框显示 Hello world！

注：下面具体分析实例3中用到的 jQuery 事件监听方法。（1）第一种事件监听方法click()，是一种比较常见的、便捷的事件监听方法。（2）第二种事件监听方法bind()，已被jQuery 3.0弃用。自jQuery 1.7以来被 on() 方法（即第三种事件监听方法）所取代，虽然在这里也能使用且不报错，而且此方法之前比较常见，但是不鼓励使用它。（3）第三种事件监听方法on()，从jQuery 1.7开始，所有的事件绑定方法最后都是调用on() 方法来实现的，使用on() 方法实现事件监听会更快、更具一致性。（4）第四种和第五种方法，监听的是 body 上所有 button 元素的 click 事件。DOM 树里更高层的一个元素监听发生在它的 children 元素上的事件，这个过程叫作事件委托（event delegation）。感兴趣的读者可以查看官方帮助文档。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com