中软大前端0416-JQuery

发表于 | 分类于

JQuery

封装

链样式

语法

$("selector").action();

做什么

  • 访问和操作DOM元素
  • 控制页面样式
  • 对页面事件进行处理
  • JQuery插件，（分页、表格）

JQuery的使用

在html中引用 用JQuery

$() –>工厂函数；将H5,Css,javaScript元素转换成JQuery元素

页面加载完成后执行的函数等同于JavaScript的onload

$(document).ready(function(){});

简化
$(function(){});

Jquery事件绑定

事件绑定，可同时给一个对象绑定多个事件（on 与 bind 效果相同，同为事件绑定）.

–on(“事件”,匿名函数);
$(".btn").on("click",function(){});

–bind(“事件1 事件2”,匿名函数);

解除事件绑定

off(“事件”，函数名);

事件绑定一次

one(“事件”,匿名函数);

jquery访问标签的内容 –html(“”);

$(".p").html("");

jquery元素隐藏 –hide(“”);

$(".p").hide("");

jquery修改样式– css()

  • 只添加一种样式
    css(“属性名”,”属性值”);

  • 添加多个样式
    css({“属性名”:”属性值”,”属性名”:”属性值”});

删除原本的样式–removeClass(“”);

$(this).removeClass("");

添加样式–addCllass(“”);

$(this).addClass("");
属性值为className，可添加多个

样式切换–toggleClass()

对象.toggleClass(“box”);
原对象没有样式’box’时，添加。
原对象有样式’box’时，删除。
达到切换效果。

JQuery更改元素属性值–attr();

$(“.a”).attr(“href”,”http://baidu.com“)

更改多个属性值
attr({
“href”:”http://baidu.com“,
“class”:”a2”
});

jquery的事件

  • click:单击事件
    $(".btn").click(function(){});

  • dblclick:双击事件
    $(".btn").dblclick(function(){});

  • mouseenter:鼠标悬停
    $(".btn").mouseenter(function(){});

  • mouseout:鼠标移开

  • mouseleave:鼠标移开
    $(".btn").mouseleave(function(){});

  • hover(鼠标移入操作，鼠标移出操作)：鼠标悬停事件

  • focus()获取焦点事件

  • blur() 失去焦点事件

阻止事件冒泡

.stopPropagation()阻止父级事件冒泡；只阻止此触发事件的父级元素的事件。
.stopImmediateProppagation()阻止所有事件冒泡。程序执行到此，之后的事件都会被阻止。

自定义事件

在Jquery中 可以自定义事件

1
2
3
4
5
6
7
8
9
$(document).ready(function(){
	$(".btn").click(funvtion (){
		var e=JQuery.Event("MyEven");
		$("ClickMeBtn").trigger(e);
	});
	//监听事件
	$(".btn").on("MyEven",function(){});
});

选择器

tr:even
偶数行

tr:odd
奇数行

ul li:first
第一个元素

显示/隐藏

hide(2000)：隐藏
属性值：毫秒，slow(慢)

show()：显示

toggle()：显示/隐藏 切换

淡入淡出

fadeIn()
fadeOut()
fadeToggle()

滑动

slideUp();
slideDown();

JQ-动画

外层 相对定位
内层 绝对定位

绝对定位不能单独存在

left正方向
top正方向

语法

animate({ left:'100px'， top:'100px' });

添加元素内容

append();在当前内容后边追加内容
prepend();在当前内容前添加内容

添加多个元素内容
append(str1,str2,str3);

删除元素

remove();删除某个对象中的某个元素

empty():清空所有子元素

查找元素

查找父元素

  • parent();直接父元素
  • parents();被选元素的所有祖先元素（使用可选参数来过滤）
  • parentsUntil();两个给定元素之间的所有祖先元素
    1
    $("a").parentsUntil("#div1") //区间- 选择从a元素 到#div1之间的元素

子元素

  • children();查询子元素(直接子元素)，可设参数（选择器），指定查找某个子元素

  • find(“选择器”);所有子元素（包括子元素的子元素）

同胞元素-向下查找

  • sibings();同级所有元素（包括上下所有元素）
  • next();查找下一个元素
  • nextAll(); 向下查找所有元素
  • nextUntil();向下查找 直到某个元素

同胞元素-向上查找

  • prev();上一个元素
  • prevAll();向上查找所有元素
  • prevUntil();向上查找 直到某个元素

查找第一个元素，最后一个元素

  • first();
    $("p").first();查找第一个P元素

$(".box p").first();查找”.box”中的第一个p元素

  • last();
    $("p").last();

筛选查找元素（过滤）

  • eq(index);参数为下标
    查询到一个集合，根据下标选择元素

  • filter(选择器);满足某个条件的元素
    $("p").filter("#p4"); 查找id为p4的p标签

  • not(选择器);不满足某个条件的元素
    $("p").not("#p4");查找id不为p4的p标签

应用

检测滚动条高度

$(window).scroll(function(){

});

滚动条高度
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

获取div 距离body的高度
var divTop=$(“#div”).offset().top;

ctrl shift + J 剪切到新图层