是一个封装好的 js 库函数,

注意用 jq 前 要看文档加载好了没有: 

$(document).ready(function(){

  // jQuery functions go here

});

文档加载好的函数

$(this)    当前 HTML 元素
$("p")    所有 <p> 元素
$("p.intro")    所有 class="intro" 的 <p> 元素
$(".intro")    所有 class="intro" 的元素
$("#intro")    id="intro" 的元素
$("ul li:first")    每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']")    所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head")    id="intro" 的 <div> 元素中的所有 class="head" 的元素

jq选择器

$(document).ready(function)    将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)    触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)    触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)    触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)    触发或将函数绑定到被选元素的鼠标悬停事件

jq操作

$("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });

动画

.stop停止

callback运行完后的事件

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

事件并行运行格式

对于html的处理;

三个简单实用的用于 DOM 操作的 jQuery 方法：

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
alert($("#w3s").attr("href")); 显示属性

View Code

$("#w3s").attr({
    "href" : "http://www.w3school.com.cn/jquery",
    "title" : "W3School jQuery Tutorial"
  });
$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
});

改变

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

添加

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

删除

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

CSS添加和删除

$("button").click(function(){
  $("#div1").addClass("important blue");
});

example

$("p").css({"background-color":"yellow","font-size":"200%"});

对单个css的修改

  $("#div1").width(500).height(500);

设置宽度和高度

 动画特别注意:

 CSS position 属性设置为 relative、fixed 或 absolute。

版权声明：本文为小幻原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/Lamboofhome/p/16937940.html