文档章节

JQuery

勤劳的开发者px
 勤劳的开发者px
发布于 2017/09/02 14:32
字数 735
阅读 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
粉丝 3
博文 54
码字总数 108225
作品 0
荆州
程序员

暂无文章

React 服务器渲染原理解析与实践

网盘下载地址 React 服务器渲染原理解析与实践 本套课程,讲解了React中SSR技术的整个搭建思路及流程,完整的从原理上讲清楚了SSR的概念,重点在于讲解编写SSR框架遇到的各种知识点,以及细节...

qq__2304636824
27分钟前
0
0
Jenkins使用

clean install -Dmaven.test.skip=true

1713716445
36分钟前
0
0
多线程

1. 多线程概念。并发和并行的概念。 多线程指的是一段时间内cpu同时执行多个线程。一个程序至少运行>=1个进程,进程就是运行中的程序,而一个进程至少运行>=1个线程,线程是操作系统能调度的...

鱼想吃肉
今天
1
0
HBase 表修复在线方式和离线方式

一、在线修复 1.1 使用检查命令 $ ./bin/hbase hbck 该命令可完整修复 HBase 元数据信息;存在有错误信息会进行输出; 也可以通过如下命令查看详细信息: $ ./bin/hbase hbck -details 1.2 ...

Ryan-瑞恩
今天
3
0
redis 系列二 -- 常用命令

1.基础命令 info ping quit save dbsize select flushdb flushall 2.键命令 2.1 set 直接赋值 set a a 2.2 get 取值 get a 2.3 exists 是否存在 exists a 2.4 expire 设置剩余时间 秒 expire......

imbiao
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部