文档章节

JQuery

勤劳的开发者px
 勤劳的开发者px
发布于 2017/09/02 14:32
字数 735
阅读 0
收藏 0
点赞 0
评论 0

1.什么是JQ?

jq本质就是js,只不过把常用的操作封装起来了.

2.jq入门

学习jQuery只需要将对应js库下载,并导入到我们项目下,在html页面使用<script>导入即可。 

<script src="../js/jquery-1.11.0.js" type="text/javascript" ></script>

JQ语法基本语法: jQuery(选择器) 或  $(选择器)

$(function(){
    alert("文档加载完成");
});

3.jQuery对象和DOM转换

     JQ对象是jq特有的,jq对象不能调用js对象的方法和属性. js对象也不能调用jq对象的属性和方法

3.1js对象转jq对象

    语法:  $(js对象)

3.2Jq对象转js对象

    语法一: jq对象[0];
    语法二: jq对象.get(0);

4.jq的常用事件

  • 事件在jq里面都封装成了方法.语法:

    jq对象.事件类型(function(){}); jq对象就是你要设置事件的标签对象
  • 点击事件

    $("#btn1").click(function(){
    console.log("hello..");
    });
  • 获得焦点和失去焦点
  •     <script>
            //jq对象.事件类型(function(){})
            //获得输入框对象
            var $inputObj = $("#inputId");
    ​
            $inputObj.focus(function() {
                console.log("获得焦点...");
            });
    ​
            $inputObj.blur(function() {
                console.log("失去焦点...");
            });
        </script>
  • 内容改变事件
  •   <script>
                //jq对象.change(function(){})
                //获得select对象
                var $selectObj =  $("#selectId");
                $selectObj.change(function(){
                    //this,指的是当前设置事件的对象(是js对象)
                    //this相当于document.getElementById("selectId")
                    console.log("内容改变..."+this.value);
                });
    
            </script>

     

  • 键盘相关事件
  • <script>
            $("#inputId").keydown(function() {
                console.log("键盘按下");
            });
    ​
            $("#inputId").keyup(function() {
                console.log("键盘抬起");
            });
        </script>

5.jq动画

语法:jq对象.方法名([time],[function(){}]);  []为可选参数(可以有,可以没有);
											[time],动画执行时间,单位毫秒
											[function(){}],回调函数,动画执行完成后执行

eg:

 xxxxxxxxxx $("#btn4").click(function() {     
          $("#divId2").slideUp(2000, function() {            
               alert("Bye..")     
                   });
               });

6.选择器

1.基本选择器

  • id选择器;

    $("#id名");
  • 类名选择器;

    $(".类名");
  • 标签选择器;

    $("标签名");
  • 全匹配选择器*;

    $("*");
  • 组合选择器;

    $("选择器,选择器,选择器....")

2.层级选择器

  • A  B  ,获得A元素内部的所有的B元素。(祖孙)--后代
  • A > B ,获得A元素下面的所有B子元素。(父子)
  • A + B ,获得A元素同级下一个B元素(兄弟)
  • A ~ B,获得A元素同级所有B元素(兄弟)

3.基本筛选选择器

  • :first        第一个
  • :last        最后一个
  • :odd        奇数(从0开始计数)
  • :even        偶数(从0开始计数)

4.属性选择器

  • 选择器[属性名] 获得有属性名的元素。
  • [属性名=值] 获得属性名 等于 值 元素。
  • [属性名!=值] 获得属性名 不等于 值 元素。 

5.表单选择器

  • :enabled        可用
  • :disabled        不可用。<xxx  disabled="disabled"> | <xxx  disabled=" ">  | <xxx  disabled>
  • :checked        选中(单选radio ,多选checkbox)  <input type="..."  checked="checked">
  • :selected        选择(下列列表 <select>)  <option selected="selected"> 

7.jq操作属性

jq对象.attr(属性名,属性值); 添加属性; 添加的是标签里面的属性

​ jq对象.attr(属性名);获取属性名对应的属性值

​ jq对象.removeAttr(属性名); 移除属性

 

© 著作权归作者所有

共有 人打赏支持
勤劳的开发者px
粉丝 2
博文 51
码字总数 108225
作品 0
荆州
程序员

暂无相关文章

Qt中的坑--QTreeWidget添加item 不能显示出来

QTreeWidget* pTree = ui.TreeCheckList; QTreeWidgetItem* item = new QTreeWidgetItem(pTree) ;item->setText ( 0, "test" );pTree->addTopLevelItem (item ); 原因是因为创建一个......

k91191 ⋅ 28分钟前 ⋅ 0

使用Guava的RateLimiter做限流

场景: 1. 在日常生活中,我们肯定收到过不少不少这样的短信,“京东最新优惠卷…”,“天猫送您…”。这种类型的短信是属于推广性质的短信。这种短信一般群发量会到千万级别。然而,要完成这...

wind2012 ⋅ 28分钟前 ⋅ 0

QSlider重新enterEvent

#ifndef DIALOG_H#define DIALOG_H#include <QDialog>namespace Ui {class Dialog;}class Dialog : public QDialog{ Q_OBJECTpublic: explicit Dialog(QW......

xxdd ⋅ 29分钟前 ⋅ 0

生产环境redis备份与恢复

生产环境redis备份与恢复 Tyrant0532 0人评论 1563人阅读 2018-02-01 20:34:10 redis是一个开源(BSD许可),内存存储的数据结构服务器,可用作数据库,高速缓存和消息队列代理。生产中我们主...

rootliu ⋅ 31分钟前 ⋅ 0

nginx中出现403forbidden错误

nginx “403 Forbidden” 错误 出现这个错误一般是因为以下原因: 网站禁止特定的用户访问所有内容,例:网站屏蔽某个ip访问。 访问禁止目录浏览的目录,例:设置autoindex off后访问目录。 ...

河图再现 ⋅ 31分钟前 ⋅ 0

上海云栖:金融政企行业的CDN最佳实践

摘要: 在刚刚结束的上海云栖大会飞天技术汇分论坛上,阿里云视频云产品架构师罗小飞进行了《阿里云CDN——面向金融政企的CDN最佳实践》主题分享,为上海的嘉宾介绍CDN的解决方案与技术服务体...

猫耳m ⋅ 36分钟前 ⋅ 0

docker 基本操作

docker介绍 Docker项目提供了构建在Linux内核功能之上,协同在一起的的高级工具。其目标是帮助开发和运维人员更容易地跨系统跨主机交付应用程序和他们的依赖。Docker通过Docker容器,一个安全...

haoyuehong ⋅ 37分钟前 ⋅ 0

上海云栖:金融政企行业的CDN最佳实践

摘要: 在刚刚结束的上海云栖大会飞天技术汇分论坛上,阿里云视频云产品架构师罗小飞进行了《阿里云CDN——面向金融政企的CDN最佳实践》主题分享,为上海的嘉宾介绍CDN的解决方案与技术服务体...

阿里云云栖社区 ⋅ 40分钟前 ⋅ 0

安装与配置hadoop

一、CentOS7安装 java8,参考centos7.0 安装java1.8,tomcat 二、安装hadoop 版本V3.03 1、下载并解压hadoop # mkdir /usr/local/app# mkdir /usr/local/app/hadoop# cd /usr/local/app/had......

iturtle ⋅ 41分钟前 ⋅ 0

Idea设置Serializable自动生成

File --> Settings --> Editor --> Inspections ->Serialization issues,在该项下找到“Serializable class without 'serialVersionUID' ”并勾选...

Gmupload ⋅ 44分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部