文档章节

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(属性名); 移除属性

 

© 著作权归作者所有

共有 人打赏支持
上一篇: JQuery_2
下一篇: JavaScript_2
勤劳的开发者px
粉丝 3
博文 54
码字总数 108225
作品 0
荆州
程序员
私信 提问

暂无文章

render常用模版 结合iview

表格添加一对按钮 { title: '操作', align: 'center', render: (h, params) => { return h('div', [ h('Button', { props: { ......

Carbenson
21分钟前
1
0
一次生产 CPU 100% 排查优化实践

前言 到了年底果然都不太平,最近又收到了运维报警:表示有些服务器负载非常高,让我们定位问题。 还真是想什么来什么,前些天还故意把某些服务器的负载提高(没错,老板让我写个 BUG!),不...

crossoverJie
28分钟前
8
0
Spring Cloud Alibaba Sentinel 整合 Feign 的设计实现

作者 | Spring Cloud Alibaba 高级开发工程师洛夜 来自公众号阿里巴巴中间件投稿 前段时间 Hystrix 宣布不再维护之后(Hystrix 停止开发。。。Spring Cloud 何去何从?),Feign 作为一个跟 ...

Java技术栈
44分钟前
9
0
虚拟机加密

在超融合的基础设施和虚拟化成为常态的世界里,对加密的要求越来越高,越来越迫切,IT部门需考虑的重大安全问题和方法也浮现了出来。 物理数据中心时代,采取双保险式数据安全方法是相对简单...

linuxCool
48分钟前
2
0
MySQL 主从同步

MySQL主从介绍 MySQL主从又叫做Replication、AB复制。简单讲就是A和B两台机器做主从后,在A上写数据,另外一台B也会跟着写数据,两者数据实时同步的 MySQL主从是基于binlog的,主上须开启bin...

野雪球
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部