jQuery-样式总结

jQuery基本学习内容

一.使用jQuery：
1.导入jQuery包

2.入口函数
$(function(){

});

二.jQuery选择器
1.基本选择器

• $("#id/class/标签名")

• $(“p,div,#id,.class”)并集选择器

• $(“div.redclass”)交集选择器 (div标签和redclass的交集)

  2.层次选择器

• $(“ul>li”)子代选择器

• $(“ul li”)后代选择器

  3.过滤选择器

• $(“li:eq(2)”)li数组中索引号为2的元素

• $(“li:odd”)索引号为奇数的li元素

• $(“li:even”)索引号为偶数的li元素

  4.筛选选择器

• $(“ul”).children(“li”) ul元素的子代元素li

• $(“ul”).find(“li”) ul元素的后代元素li

• $("#first").siblings(“li”) 查找兄弟元素，不包括自己

• $("#first").parent() 查找父级元素

• $(“li”).next() 下一个元素

• $(“li”).prev() 上一个元素

三.方法
1.dom操作：通过id查找对象,返回一个对象
document.getElementById(id); 通过标签名查找对象，返回一个或者多个document.getElementsByTagName(name); 通过类名查找对象，返回一个或者多个对象
document.getElementsByClassName(names);
2. jQuery查找对象
jQuery("#id,.class,标签名");
$("#id,.class,标签名");
3.基本操作

• .click()单击
• .ready()加载
• .css( ‘propert’,‘value’)设置元素的单个样式
• .css({‘propert1’,‘value1’
  ‘propert2’,‘value2’}); 设置元素的多个样式
• .mouseenter();鼠标进入
• .mouseleave();鼠标离开
• .text(‘some text’)设置文本内容
• .val()获取表单的value值
• .val(text)设置表单的value值
• .hasClass(‘classname’)判断是否存在classname**
• .addClass(‘class_name’)添加类
• .removeClass(‘class name’)删除类
• obj.addClass(‘class_name’)给对象添加class_name样式
• obj.removeClass(‘class name’)给对象删除class_name样式
• obj.hasClass(‘className’)判断对象是否有class_name样式，返回true或false
• .index(selector/element)获取某个元素的索引号
• .eq(index)通过索引号获取某个元素
• .show(speed,callback)显示
• .hide(speed,callback)隐藏，其参数与show一致
• .slideUp()滑入（隐藏），参数与show一致
• .slideDown()滑出 （显示），参数与show一致
• .slideToggle()切换滑入滑出效果，参数与show一致
• //callback:动画效果执行完成后的回调函数
• .fadeIn(speed,callback)淡入（隐藏）,参数与show一致
• .fadeOut(speed,callback)淡出 （显示）,参数与show一致
• .fadeToggle(speed,callback)切换淡入淡出效果参数,与show一致
• .fadeTo(speed,opacity,callback):使用渐进的方式实现透明度
• .stop()

4.动画

• animate({params}, speed,callback)自定义动画

• params{}样式队

• speed:slow/narmal/fast/500

• opacity:透明度0-1（0.5）

• fadeTo(speed,opacity,callback):使用渐进的方式实现透明度

  层次动画
  //单击显示图片
  $("#btn1").click(function(){
  $("div>img:first").show(1000,function f1(){
  $(this).next().show(1000,f1);
  });
  });
  //单击隐藏图片
  $("#btn2").click(function(){
  $("div>img:last").hide(1000,function f1(){
  $(this).prev().hide(1000,f1);
  });
  });

5.删除
empty();删除所有子节点
remove();删除所有子节点和自己
$(“div”).remove();//将div也删除
删除div中的p
$(“div”).children(“p”).remove();
6.复制
//单击按钮把p标签div1复制到div2
// (".div1p").appendTo((".div1 p").appendTo((".div1p").appendTo((".div2"));//剪切
(".div1p").clone().appendTo((".div1 p").clone().appendTo((".div1p").clone().appendTo((".div2"));//复制
//(".div2").append((".div2").append((".div2").append((".div1 p"));//剪切
7.添加
单击按钮在div中添加a标签
//1.append(‘Some text’)像元素内部追加内容
//元素.append(‘内容’)
//2.appendTo(‘selector’)将内容主动添加到元素内部
//内容.appendTo(‘元素’)
//3.prepend(‘Some text’)像元素最前一行追加内容
//4.prependTo(‘selector’)像元素最后一行追加内容
//5.before(‘内容’)像元素之前追加内容;
//6.after(‘内容’)像元素之后追加内容;
8.事件绑定
//链式编程，对象不停的调用方法
对象.方法().方法.方法().方法

//  bind方法注册事件
//事件源.bind(事件名称，事件处理程序)
bind链式编程
bind键值对
//使用绑定事件，如果先创建子元素，再为这个元素绑定事件，那么后面添加的子元素没有绑定这个事件。
//使用bind绑定事件，如果先创建子元素，再为这个元素绑定事件，那么后面 添加的子元素没有绑定这个事件。

解绑事件
//解绑原则：被什么方法绑定，就要使用像对应的方法解绑
//如果使用.click方法绑定事件，就要使用unbind解绑。

//父元素.delegat(‘子元素’，‘事件名称’，事件处理程序)；为父元素下面的所有子元素绑定事件
//使用delegate绑定事件，如果先创建子元素，再为这个元素绑定事件,那么后面添加的子元素都有绑定这个事件。
//解绑事件undelegate
$("#btn1").click(function(){
//解绑div所有子元素的所有事件
$("#dv").undelegate();
//解绑div的p中所有事件
$("#dv").undelegate(“p”,"");
//解绑div的p的click事件
$("#dv").undelegate(“p”,“click”);
//解绑div的p的click 和mouseenter事件
$("#dv").undelegate(“p”,“click mouseenter”);
});

//元素.on(“事件名称”，“事件处理程序”)：on注册简单事件
//使用on绑定事件，如果先创建子元素，再为这个元素绑定事件，那么后面 添加的子元素都有绑定这个事件
//解绑事件off
$("#btn1").click(function(){
//解绑父元素和子元素的所有事件
$("#dv").off();
//解绑父元素和子元素的click事件
$("#dv").off(“click”);
//解绑p标签的所有事件
$("#dv").off("",“p”);
//解绑子元素所有事件
$("#dv").off("",“p”);
//解绑p的click 和mouseenter事件
$("#dv").off(“click mouseenter”,“p”);
});

9.元素卷曲值
//单击按钮使dv高度和宽度为原来的两倍
// $("#dv").css(‘width’,w2=“px”);
$("#dv").css(‘height’,h2=“px”);
// $("#dv").width(w2+“px”);
$("#dv").height(h2+“px”);
//width(数值)/height(数值)，可以设置元素的宽度和高度
//scrollLeft:向左面卷曲的值scrolltop:向上面卷曲的值
//scrollWidth:元素内容中实际的宽度scrollHeight:元素内容中实际的高度

• 点赞 1
• 收藏
• 分享
• 文章举报