`
dingqijie
  • 浏览: 102223 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论
阅读更多
一、Jquery 头标题位置

第一行 <script src=”jquery.js” type=”text/javascript”></script>
第二行自定义标签 <script src=”alice.js” type=”text/javascript”</script>
二、Jquery 选择符
    1. 工厂函数
$( )
标签名: $(‘p’) 会取得文档中所有的段落
ID : $(‘#some-id’) 会取得文档中具有对应的 some-id ID 的一个元素。
类: $(‘.some-class’) 会取得文档中带有 some-class 类的所有元素。
    2.  层次选择符
$(‘from input’)
$(‘#selected-plays>li’).addClass(‘horizontal’); 其中 > 表示子元素的顶项
$("ul li:nth-child(2)") 在每个 ul 中查找查找第 2 个 li
$("ul li:first-child") 在每个 ul 中查找第一个 li
$("ul li:last-child") 在每个 ul 中查找最后一个 li
     3. XPath 选择符
$(‘a[@title]’) 选择带有 title 属性的 a 标签 @ 表示指向属性
$(‘div[ol]’) 选择 div 里的 ol 标签
$(‘a[@href^=”mailto:”]’) 选择属性以 mailto 开头的元素,关键字符 ^
$(‘a[@href$=”.pdf”]’) 选择属性以 .pdf 结尾的元素,关键字符 $
$(‘a[@href*=”mysite.com”]’) 选择任意含有才值的元素,关键字符 *
      4.  自定义选择符
$("tr:first") 选择第一行 tr
$(‘tr:last’) 选择最后一行 tr
$(‘div.horizontal:eq(1)’) 选择此类中第 2 个元素,关键字符 eq()
$(‘div form[1]’) 选择 div 中是 form 的第二个 form 元素
$(‘tr:odd’) 选择所有 tr 的奇数元素 关键字符 odd
$(‘tr:even’) 选择所有 tr 的偶数元素 关键字符 even
$("tr:gt(0)") 选择大于 tr 第一行的 tr
$("tr:lt(2)") 选择小于 tr 第三行的 tr
$(":header").css("background", "#EEE") 为 h1,h2,h3 加背景色
$("td:empty") 选择不含有子元素或不含有文本的元素
$("td:parent") 选择含有子元素或是有文本的元素
$(‘td:contains(“Henry”)’) 选择 td 内包换 Henry 的所有元素。
$(‘#selected-plays li:not(.horizontal)’).addClass(‘sub-level’);
       5.  表单选择符
$(‘:input’)
$(‘:text’)
$(‘:password’)
$(‘:radio’)
$(‘:checkbox’)
$(‘:submit’)
$(‘:reset’)
$(‘:button’)
$(‘:file’)
$(‘:hidden’)
$(‘input:disabled’) 查询所有不可有的 input 元素
$(‘input:checked’) 查询所有选中的复选框
$("select option:selected") 查询所有选中的选项元素
三、 事件
      1.  在页面加载后执行事件
$().ready(function(){   });
     2.  为元素添加事件
$(‘body’).bind(‘click’,function(){
        // 编写事件触发时执行。。。
    // 这里为元素添加类为 addClass(‘’);
        // 移除类为 removeClass(‘’); 当括号内为空时移除所有类
});

简写事件
.bind(‘click’,function(){}); 可以写成 .click(function{});
      3.  复合事件
.toggle(function{
},function{
}); 将完成对指定元素两次才做而执行的两个函数
.hover(function{
},function{
}); 当鼠标滑入滑指定元素的时候执行的两个函数
.taggle() 对于添加,删除类更优雅的做法
.toggleClass(‘hidden’);
      4. 限制和终止事件
This 与 event.target
This 指代的是事件说定义元素
Event.target 是实际被出发的元素 如单击的
            a) 必要的判断来组织时间的捕获和冒泡
If(event.target==this)
            b)  停止事件传播
event.stopPropagation(); 来中止时间的传播
          c) 中止默认事件如 submit 锚元素
.preventDefault()
          d)  中止事件
.unbind(‘click’,toggleStyleSwitcher); 移除 click 对应的事件
四、 效果
      1.  修改内联 CSS
.css(‘ 属性 ’) 可以得到该属性的值
.css(‘ 属性 ’,’ 值 ’) 可以设置对应属性的值
Var num=parseFloat(‘ 字符串 ’ , 10) 返回数字字符串转化为 10 进制数值常用于设置 css 的属性值
.slice(-2) 返回字符串的后两个字符
.height() 返回指定元素的高度
.height(val) 设置元素的高度
.width() 返回元素的宽度
.width(val) 设置元素的宽度
      2.  基本隐藏和显示 .hide() .show() 不带任何参数
对指定元素进行隐藏或显示
      3. 效果和速度
默认速度分为: slow 、 normal 、 fast
显示效果速度
.show(slow) 显示速度为慢
.hide(fast) 隐藏效果为快
淡入淡出效果
.fadeIn(slow) 为指定元素增加淡入效果
.fadeOut(slow) 为指定元素增加弹出效果
不透明度效果
fadeTO()
滑入滑出视图
.slideUp(‘slow’) 滑出视图
.slideDown(‘slow’) 滑入视图
      4.  多重效果
.animate({parma1:’value1’,param2:’value2’},speed,function(){
})
      5.  并发与排队效果
对于同一个元素的多种效果的排队为
$().animate()
  .animate()

          对于不同元素的效果排队为使用回调函数
$(). animate({parma1:’value1’,param2:’value2’},speed,function(){
        $().animate()
})
五、 基于命令改变页面
      1.  操作属性
.attr({‘rel’:’external’}) 为指定元素添加 rel 属性值为 external
.removeAttr() 为指定元素删除属性
      2.  遍历方法
.each() 遍历可以遍历 class 中的每个元组并给他们分配方法
      3. 通过工厂函数创建元素
$(‘<a href=”#top”>back to top</a>’) 创建 a 标签
$(‘<a id=”top”></a>’) 创建标签并用来指定上个标签中 href 的锚点
      4.  插入新元素
在相邻元素位置上插入
$(‘ 创建标签 ’).insertBefore(‘div.chaper p’) 将创建标签插入
$(‘ 插入目标 ’).before(‘ 创建新标签 ’) 将创建标签插入
.insertAfter() 和 .after() 与上相仿
在元素内插入
.append()
.appendto()
.prepend()
.prependto()
      5.  移动元素
$(‘span.footnote’).insertBefore(‘#footer’) 将元素 span.footnote 移动到 #footer 之前
      6.  包装元素
.warp('<li id=”foot-note-”></li>’) 将指定元素包装上 li 标签
      7.  复制元素
$(‘’).clone() 克隆指定元素
$(‘’).clone(false) 克隆标签而不克隆内容
      8.  移除元素
$(‘’).remove() 移除指定元素
六、 AJAX
用 AJAX 加载数据
     1. 追加 HTML
$(‘#dictionary’).load(‘a.html’); 将 .load() 中内容加载到 dictionary 中
这里 a.html 不是一个完整的 HTML 格式文本而是类似 XML 的 HTML 格式
      2. 操作 javascript 对象

     3.  追加脚本(在脚本中写入 script 对象)

      4.  加载 XML 文档
            a) XML 文档格式 见电子书
            b)  $.get(‘d.xml’,function(data){
//data 是返回的 XML 数据这里要对 data 进行遍历操作
})
       用 AJAX 访问服务器
      5. 执行 get 请求
$.get(‘e.php’,{‘term’:$(this),text()},function(data){
$.(‘#dictionary’).html(data);
})
return false; // 当用 a 标签请求时将不使用 a 标签的同步请求。
其中, e.php 是要加载的格式;{}里的内容是向服务器发送的参数
最后将数据插入 dictionary
      6.  执行 post 请求
$.post(‘e.php’,{‘term’:$(this).text()},function(data){
        $(‘#dictionary’).html(data);
})
return false; // 不使用 a 标签进行同步请求
.load 方法与 post 相同,上述代码可写为
$(‘#dictionary’).load(‘e.php’,{‘term’:$(this).text()});
return false;
      7. 序列化表单
$(‘#dictionary’).load(‘f.php’,{‘term’:$(‘input[@name=”term”]’)})
      8.  关注请求
当 AJAX 请求开始尚未进行其他传输时,触发 .ajaxStart()
当最有一次活动请求中止时,触发 .ajaxStop()
$(‘#loading’).ajaxStart(function(){
        $(this).show();
}).ajaxStop(function(){
        $(this).hide();
});
七、 Jquery 核心函数
      1. size() 方法 length() 方法
$(‘’).size(); 返回指定元素的数量返回值为 number 类型。
      2. get() 方法与 reverse() 方法
$(‘td’).get().reverse(); 返回 td 元素的类型数组,并让数组反向
$(‘’).get(0); 选择指定元素中的第 1 个元素
      3. index() 方法
$(‘*’).index($(‘td’)[0]); 查找 td 的第一个元素返回他所在 document 中的节点数
      4. jquery 的扩展自定义方法
定义单选框是否被点击
jQuery.fn.extend({
check: function() {
return this.each(function() { this.checked = true; });
  },
uncheck: function() {
return this.each(function() { this.checked = false; });
  }
});

定义最大值最小值
jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});

      5. 文本操作
$(‘’).text() 得到元素的文本内容
$(‘’).text(val) 设置文本的内容
      6. select 与 input 值操作
$(‘’).val() 返回一个 select 或 input 的内容
$(‘’).val(“”) 设置 select 或 input 的内容
      7. 筛选方法 ( 纯 BOM)
.eq( 数字 ) 选择找出界面元素数组中的第‘数字 +1’ 位元素
$(this).hasClass("protected") 返回指定元素中是否含有 protected 类
xxx.is(‘b’) 判断 xxx 是否为 a 是返回 true
数组 .map(function(){return $(this).xxx}) 返回每一个元素的 xxx 的数组
$(‘’).not(‘:contains(“Henry”)’) 删除选择指定元素中不包含 Henry 的元素
.find(‘’) 搜索指定的元素
$(‘’).children(‘td’) 选择元素的所有第一代子元素中为 td 的元素
.contents() 选择指定元素的所有子节点,注意是节点不是子元素
$(‘’).find(‘td:gt(0)’) 选择指定元素中所有编号大于 1 的单元格
$(‘’).next() 选择指定元素同辈的下一个元素
$(‘’).prev() 选择指定元素同辈的前一个元素
$(‘’).Parent() 选择元素的父亲节点 , 此父亲节点为最近的一个父亲
分享到:
评论

相关推荐

    jQuery源码 jQuery源码 jQuery源码

    jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码...

    jquery插件库(jquery.treeview插件库)

    jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery....

    jquery-3.7.0.min.js(jQuery下载)

    jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)...

    jquery-3.4.1_jquery_3.4.1.js_jquery-3.4.1_sangat1_jquery3.4.1_jq

    "jquery-3.4.1_sangat1_jquery3.4.1"可能指的是一个特定的项目或者命名约定,"sangat1"可能是项目名或者是个人开发者的名字,而"jquery3.4.1"是jQuery库的另一种写法,它们都指向同一种资源——jQuery 3.4.1。...

    jQuery基础.pptx

    JavaScript+jQuery 网页特效设计 jQuery(3.4.1)基础 1 jQuery简介 jQuery优势 jQuery安装 jQuery语法 1、jQuery简介 1.1 学习jQuery之前,需要以下基础知识 HTML CSS JavaScript 1、jQuery简介 1.2 什么是jQuery? ...

    jquery-3.3.1.js和jquery-3.3.1.min.js

    jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-...

    jQuery1.12.4+jQuery中文手册.rar

    **jQuery 1.12.4 知识点详解** jQuery 是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。在本压缩包中,我们有两个版本的jQuery核心库文件:`jquery-1.12.4.js` 和 `jquery...

    最新版JQuery-jquery-3.2.1.min.js

    在本文中,我们将深入探讨最新版的jQuery,即`jquery-3.2.1.min.js`,以及该版本中的一些变化。** ### 1. jQuery 3.x 版本概述 jQuery 3.x 系列是继1.x和2.x后的又一重大更新,它主要关注性能优化、API清理以及对...

    jquery插件库大全(200个).zip

    jquery插件库大全(200个): jqueryQQ表情插件 jquery下拉菜单导航 jquery下拉菜单栏 jquery仿Windows系统选中图标效果 jquery仿京东商品详情页图片放大效果 jquery仿百度新闻焦点轮播 jquery分离布局模版 jquery...

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    1. 2款jQuery图片自动切换常用广告代码 2. jquery+css五屏焦点图淡入淡出+圆形按钮切换广告图片代码 3. jQuery+CSS实用图片收缩与放大效果插件 4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. ...

    Jquery多选下拉列表插件jquery multiselect

    **jQuery Multiselect插件详解** 在网页开发中,我们经常需要处理用户的选择操作,特别是当选项较多时,传统的HTML `&lt;select&gt;` 元素显得不够友好。为此,jQuery提供了一个强大的多选下拉列表插件——jQuery ...

    jquery-1.11.0+jquery-UI-1.10.4

    《jQuery 1.11.0与jQuery UI 1.10.4:经典组合的深度解析》 在Web开发领域,jQuery与jQuery UI是两个不可或缺的重要库,它们极大地简化了JavaScript的DOM操作和用户界面设计。本篇将深入探讨jQuery 1.11.0与jQuery ...

    开发工具 jquery-1.11.3.min

    开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-...

    开发工具 jquery.dataTables.min

    开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery....

    前端+jQuery+实现烟花特效

    前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+...

    Java Web Jquery表单验证

    编写基于Jquery的表单验证插件 Java Web Jquery表单验证 jQuery是一个流行的JavaScript库,可用于在网页上进行各种操作,包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分:FrontPage.html、write....

    [jQuery实战第二版].pdf

    ### jQuery实战第二版知识点概述 #### 一、书籍基本信息与评价 - **书籍名称**:《jQuery实战第二版》(jQuery in Action, Second Edition) - **作者**:Bear Bibeault 和 Yehuda Katz - **出版商**:MANNING - **...

    jQuery.mmenu-jquery.mobile最好看的侧边菜单

    **jQuery.mmenu与jQuery Mobile:打造最佳侧边菜单** jQuery.mmenu是一款强大的JavaScript插件,专为构建响应式、交互式的侧边菜单而设计。它与jQuery Mobile框架结合使用,可以创造出用户界面(UI)中最具吸引力的...

    jquery-2.1.1.js 、jquery-2.1.1.min.js 【jquery包 js】

    《jQuery 2.1.1:JavaScript 的强大库》 jQuery 是一个广泛应用于网页开发的JavaScript库,它的出现极大地简化了JavaScript的复杂性,使得网页交互变得更加简单和高效。在这个主题中,我们将深入探讨jQuery 2.1.1...

    jquery1.7中文手册CHM文档(附jquery1.82chm手册)

    资源名称:jquery1.7 中文手册 CHM文档(附jquery1.82 chm手册)内容简介:因国内jquery中文手册更新太慢了,等了一段时间实在等不下去了,干脆自己动手做一个丰衣足食,时刻更新. 最后感谢Shawphy提供1.4.1版,jehn提供...

Global site tag (gtag.js) - Google Analytics