JQ基础

2021-09-08 20:33:13 阅读：151 来源： 互联网

页面加载,入口
#jq用法,优于load
$(function(){ 
});
$(document).ready(function(){
});


$(function(){
#jq获取对象为jq对象,不可使用dom对象属性
$('div').hide();
})

#jq对象转dom对象
$(dom对象);
#dom对象转jq对象,因为jq对象获取的是数组;
$('div')[0];
$('div').get(0);

JQ选择器
在这里插入图片描述

:checked, 获取复选框被选中元素
JQ筛选方法

parents();祖先级筛选,可以填入选择器;
JQ样式操作

$('div').css("color");获取样式;
$('div').css("color","red");修改样式,自己循环,隐式迭代;
$('div').css({
				width:300,
				height:300,
				backgroundColor:"red"
			})
#常用
$('div').addClass("样式名");添加
		.removeClass("样式名");修改
		.toggleClass("样式名");切换
		
          .mouseover(function(){
          });鼠标经过;
          .mouseout();鼠标移出;
          .hover(fn,fn);鼠标经过离开;第一个经过触发,第二个离开触发;只写一个全都触发;
          .stop();停止动画,动画有排队效果,在动画前执行stop()可以结束前一个动画;
          .show();显示;
          .hide();隐藏;

JQ效果
在这里插入图片描述

show([speed],[easing],[fn]);显示三个可选参数;
hide(~~~);隐藏同上
toggle(~~~);切换同上
slideDown()同上
slideUp()同上;
slideToggle();同上
fadeIn();同上
fadeOut();同上
fadeToggle();同上
fadeTo(speed,opacity,[easing],[fn]);//speed,opacity为必须参数;
animate(params,[speed],[easing],[fn]);
speed:速度(slow,normal,fast),或者动画时间毫秒数 例:1000;
easing:切换效果是否变速(swing(默认),linear);
fn:回调函数;
opacity:透明度0-1之间
params:想要更改的样式属性,以对象形式传递,必须写。属性名可以不用带引号,如果是复合属性则需要采取驼峰命名法borderleft.其余参数都可以省略。

JQ属性操作

$("a").prop("属性名");获取固有属性
      .prop("属性名","属性值");修改属性
      .attr();获取自定义属性;
      .data("属性名","属性值");缓存数据到对象中

JQ内容文本值

$("div").html();获取文本中内容,相当于innerHTML;
		.text();相当于innerText;
$("input").val("input内容);

JQ操作元素

遍历
$("div").each(function(index,domelm){
});回调函数第一个参数为索引号,第二个为dom对象;
$.each($("div"),function(i,domelm){});//同上,主要用于操作数据;
创建
var li = $("<li>我是创建的</li>");
内部添加
$("ul").append(li);添加在后面
	   .prepend(li);添加在前边
外部添加	   
       .befor();前面
       .after();后面
删除
$("ul").remove();删除自己
	   .empty();删除子集

JQ尺寸,位置操作
在这里插入图片描述
参数为空获取,有值修改;

offset({
top:200,
left:200
})文档偏移坐标,与父级无关,获取内容为对象,传值修改.
position()获取相对父级偏移,只能获取,不能设置;
scrollTop() 获取被卷去头部,可以填入数字;
scrollLetf()左侧;

JQ事件绑定

on:
$("div").on({
click:function(){ 点击事件 },
mouseenter:function(){ 移入事件 },
"mouseenter click":function(){ 同时绑定两个事件},
"click","li",function(){}事件委派,事件绑定在父级,由子集触发
})
off:
解绑事件，语法等同于on

标签：function,对象,基础,JQ,获取,div,属性
来源： https://blog.csdn.net/caiteng_1/article/details/120171346

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JQ基础