jQuery基础

jQuery的基本使用

20170921150596170834439.png

公式：事件源.事件(fuction(){ 事件处理程序 });

jQuery知识点

  • $ === jQuery 在jQuery框架中$ 符号等价于 jQuery对象;

  • 入口函数:

          $(document).ready(function(){});
      $(function(){});
  • 入口函数跟window.onload的区别
    • window.onload只能写一个, 入口函数可以写多个;
    • window.onload等所有外部资源加载完毕之后才执行;
    • 入口函数在DOM加载完毕之后立即执行;

  • jQuery 对象和dom对象相互转化 20170921150596391428171.png

  • jQuery 对象可以调用jQuery方法 例如click;
  • Dom对象可以调用Dom方法 例如 onclick;
  • jQuery对象通过.css()方法添加 css样式

jQuery选择器

基本选择器

选择器 | 作用 | 实例 ————- | ————- | ————- id选择器(#) | 选择id为指定值得第一个元素| $(#"demo") 类选择器(.) | 选择具体指定class类名的所有元素| $(".liItem") 标签选择器(element)|选择标签名为指定值得所有元素| $("li") 并集选择器(,)|单个选择器的所有元素合并后返回| $("#demo,.liItem") 选择id为demo, 类为liItem的元素的合集 通配符选择器(*) | 所有元素 | $("*")

层级选择器

  • 子元素选择器(>)

    选择指定元素的直接子元素, 例如 $("#divItem >p "), 会选择出id为divItem的这个元素下面的p元素;

  • 后代选择器(空格)

    选择指定元素的后代元素, 例如: $("divItem p") 与子元素选择器不同的是,会选中所有后代元素p;

  • 兄弟选择器(~)

    选择指定元素后面所有的兄弟元素（后面的所有兄弟元素）$("#j_liItem ~ li")

基本过滤选择器

选择器 作用 实例
奇数行选择器(:odd) 选择序号为奇数的元素 $("li:odd")
偶数行选择器(:even) 选择序号为偶数的元素 $("li:even")
相等选择器(:eq(index)) 选择序号等于index的元素 $("li:eq(1)")
大于选择器(:li:gt(index)) 选择序号大于index的元素 $("li:gt(3)")

筛选选择器

选择器 作用
.find(selector) 后代查找
.childern(selector) 子代查找
.parent(selector) 查找父元素
.siblings(selector) 查找所有兄弟元素
.eq(index) 相等查找
.prev(selector) 查找前一个兄弟元素
.next(selector) 查找后一个兄弟元素

jQuery DOM操作

HTML节点操作

  • 创建节点
	var node = $("<div>创建的节点</div>")
  • 内部添加节点
	//.append(jqueryobj)
	$("div").append(node);

	//.append(htmlstring)
	$("div").append("<p>动态创建元素</p>");
  • 删除节点.remove()

  • 清空节点 .empty()

  • 外部添加节点
//.before()
$("div").before("<p>动态创建元素</p>");

//.after()
$("div").after("<p>动态创建元素</p>");

HTML控制操作

  • .val() 方法, 获取/设置表单value值;
  • .attr() 方法, 获取/设置属性;
  • .html() 方法, 获取/设置 html内容;
  • .text() 方法, 获取/设置 文本内容;

尺寸操作

  • .width() 方法, 获取/设置宽度
  • .height() 方法, 获取/设置高度

位置操作

  • .offset() 方法, 获取/设置偏移
  • .offset() 设置后,元素变为相对定位
  • .position() 获取元素相对于父元素的偏移, 无法设置;
  • .scrollTop() 获取/设置滚动条距离上方的位置;
  • .scrollLeft() 获取/设置滚动条距离左边的位置;

动画效果

淡入淡出

  • fadeIn() 淡入函数,可以使用数字或常量设置时长

      // slow = 600ms
  // fast = 200ms
  // normal = 400ms
      $("div").fadeIn(1000)
      $("div").fadeIn("fast")
  • .fadeOut() 淡出函数
  • .fadeTogger() 淡入淡出切换

  • .fadeTo() 改变透明度

          // 0 全透明, 1 不透明
      $("div").fadeTo(1000,0.5)

显示隐藏

  • .slideDown() 卷帘门效果下拉显示
  • .slideUp() 卷帘门效果上拉隐藏
  • .slideToggle() 切换
  • .show() 从左上角开始显示;
  • .hide() 收缩到左上角

其他

  • .animate() 自定义动画
	$("div").animate({
		"height": "500px"
	}, 1000);
  • .stop(stopAll, goToEnd)停止动画
// stopAll 是否清空动画队列
// goToEnd 是否立即执行完当前动画
$("div").stop(true, false);

样式操作

  • .css() 方法, 获取和设置样式属性值
// 获取 font-size
$("div").css("font-size");

// 通过字符串设置
$("div").css("font-size","30px");
// 通过json对象设置
$("div").css({"font-size":"30px","color":"red"});
  • .addClass() 添加类
// 类名 className 不带.
$("div").addClass("className");
  • .removeClass() 移除类
// 类名 className 不带.
$("div").removeClass("className");
  • .hasClass() 判断是否存在指定类
  • .toggleClass() 切换指定类

数据缓存 .data()

// 获取：
$(selector).data(); // 获取数据缓存
$(selector).data(“index”);

// 设置：
$(selector).data(“index”, 1); //设置数据缓存
$(selector).data({belong: “传智播客”});

事件

简单事件绑定

click(hander)  .click() //绑定事件 或者触发 click事件
blur() //失去焦点事件，同上
hover(mouseenter, mouseleave) //鼠标移入，移出
mouseenter()： 当鼠标离开元素及它的子元素的时都会触发。
mouseleave(): 当鼠标离开自己时才会触发，子元素不触发。
dbclick() 双击
change() 改变,比如：文本框发送改变，下来列表发生改变等…
focus() 获得焦点
keyup(), keydown(), keypress() : 键盘 键被按下。
mousedown() 鼠标按下

bind 方式绑定

  • bind为某个jquery对象绑定 事件
//.bind( eventType [, eventData ], handler )
// e.g
	$("p").bind("click", function(e){
        //事件响应方法
 	});
  • unbind解绑bind方式绑定的事件
$(selector).unbind(); //解绑所有的事件
$(selector).unbind(“click”); //解绑指定的事件

delegate 方式绑定

  • delegate 为某个元素下所有选中标签添加事件
//$(selector).delegate( selector, eventType, handler )
// e.g
    $(".parentBox").delegate("p", "click", function(){
        //为 .parentBox下面的所有的p标签绑定事件
    });
  • delegate 解绑
$( “p” ).undelegate(); //解绑所有的delegate事件
$( “p” ).undelegate( “click” ); //解绑所有的click事件

on 方式绑定

  • on绑定, 统一所有事件绑定
// $(selector).on( events [, selector ] [, data ], handler )
//e.g
	//绑定一个方法
    $( "#dataTable tbody tr" ).on( "click", function() {
      console.log( $( this ).text() );
    });

    //给子元素绑定事件
    $( "#dataTable tbody" ).on( "click", "tr", function() {
      console.log( $( this ).text() );
    });

    //绑定多个事件的方式
    $( "div.test" ).on({
      click: function() {
        $( this ).toggleClass( "active" );
      }, mouseenter: function() {
        $( this ).addClass( "inside" );
      }, mouseleave: function() {
        $( this ).removeClass( "inside" );
      }
    });
  • off 解绑 on方式绑定的事件
$( “p” ).off(); // 移除所有事件

// 解绑所有的click事件，两个*表示所有
$( “p” ).off( “click”, “**” );

$( “body” ).off( “click”, “p”, foo );

one绑定一次事件的方式

//.one( events [, data ], handler )
//e.g
	$( "p" ).one( "click", function() {
      alert( $( this ).text() );
    });

事件触发

//简单事件触发
$(selector).click(); //触发 click事件

//trigger方法触发事件
$( “#foo” ).trigger( “click” );

//triggerHandler触发 事件响应方法，不触发浏览器行为
$( “input” ).triggerHandler( “focus” );

jQuery事件对象介绍

event.data //传递的额外事件响应方法的额外参数
event.currentTarget === this //在事件响应方法中等同于this，当前Dom对象
event.target //事件触发源，不一定===this
event.pageX //The mouse position relative to the left edge of the document
event.stopPropagation()//阻止事件冒泡
e.preventDefault(); //阻止默认行为
event.type //事件类型：click，dbclick…
event.which //鼠标的按键类型：左1 中2 右3
event.keyCode// code的c是大写

多库共存

jQuery占用了：$ 和jQuery这两个变量

var $ = { name : “itecast” };
$.noConflict(); // 此时可以使用jQuery（如果jQuery没有被占用）

var laoliu_jQ = $.noConflict();//让jQuery释放 $, 让$ 回归到jQuery之前的对象定义上去。此时，可以使用laoliu_jQ来代替   jQuery和$的作用

其他

  • map函数, 返回一个新数组
  • each函数, 遍历一个数组