学习笔记--jQuery

jQuery的安装

引用Google CDN：

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
</head>

引用Microsoft CDN

<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
</head>

jQuery的语法

基础语法是：$(selector).action()
示例：

$(this).hide()
演示 jQuery hide() 函数，隐藏当前的 HTML 元素。
$("#test").hide()
演示 jQuery hide() 函数，隐藏 id="test" 的元素。
$("p").hide()
演示 jQuery hide() 函数，隐藏所有 <p> 元素。
$(".test").hide()
演示 jQuery hide() 函数，隐藏所有 class="test" 的元素。

文档就绪函数，防止文档在完全加载（就绪）之前运行 jQuery 代码：

$(document).ready(function(){
 
--- jQuery functions go here ----
 
});
或者
$(function(){
});

jQuery元素选择器

$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。

jQuery属性选择器

$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

jQuery CSS选择器
把所有 p 元素的背景颜色更改为红色：

$("p").css("background-color","red");

jQuery 属性选择

$("p").attr("attr1", "string1");
$("p").attr("attr1");

jQuery 事件

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

jQuery 效果

隐藏、显示

$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle();

淡入淡出

$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);

滑动

$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);

动画

$(selector).animate({params},speed,callback);
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");

停止动画

$(selector).stop(stopAll,goToEnd);

jQuery chaining（链接）

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

jQuery HTML

获取和设置

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

添加元素

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

var txt1="<p>Text.</p>";               // 以 HTML 创建新元素
var txt2=$("<p></p>").text("Text.");   // 以 jQuery 创建新元素
var txt3=document.createElement("p");  // 以 DOM 创建新元素
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3);         // 追加新元素

删除元素

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

$("p").remove(".italic");

获取并设置CSS类

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

$("h1,h2,p").addClass("blue");
$("#div1").addClass("important blue");
$("p").css("background-color");
$("p").css("background-color","yellow");
$("p").css({"background-color":"yellow","font-size":"200%"});

尺寸

width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。
outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。

jQuery遍历

parent() //所有父元素
parents() //所有祖先元素
parentsUntil() //到某元素之间的所有祖先元素
children() //所有直接子元素
find() //查找某一后代元素
siblings() //所有同胞元素
next() //下一同胞元素
nextAll() //所有跟随的同胞元素
nextUntil() //到某元素之间的所有同胞元素
prev() //上一同胞元素
prevAll() //所有前面的同胞元素
prevUntil() //到某元素之间的所有同胞元素

$("span").parents();
$("span").parents("ul");
$("span").parentsUntil("div");
$("div").children("p.1");
$("div").find("span");
$("div").find("*");   //返回所有后代

过滤
first() 方法返回被选元素的首个元素。
last() 方法返回被选元素的最后一个元素。
eq() 方法返回被选元素中带有指定索引号的元素。
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
not() 方法返回不匹配标准的所有元素。

jQuery AJAX方法

load()方法

$(selector).load(URL,data,callback);

$("#div1").load("demo_test.txt #p1");

$("button").click(function(){
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("外部内容加载成功！");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});

Get/Post方法

$.get(URL,callback);

$("button").click(function(){
  $.get("demo_test.asp",function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

$.post(URL,data,callback);

$("button").click(function(){
  $.post("demo_test_post.asp",
  {
    name:"Donald Duck",
    city:"Duckburg"
  },
  function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

ajax()方法

jQuery.ajax([settings])   //settings为用于配置 Ajax 请求的键值对集合。

$("#b01").click(function(){
  htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
  $("#myDiv").html(htmlobj.responseText);
  });

$.ajax({
   url: page,
   data:{"name":value},
   success: function(result){
      $("#checkResult").html(result);
   }
});

noConflict()方法

$.noConflict();
或
var jq = $.noConflict();
或
$.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("jQuery 仍在运行！");
  });
});

数组操作

遍历

$.each( a, function(i, n){
  document.write( "元素[" + i + "] : " + n + "<br>" );
})

去重

a.sort();
$.unique(a);   //需先进行sort处理

是否存在

document.write($.inArray(9,a));

字符串操作

去除空白

$.trim(" Hello JQuery    ");

JSON

$.parseJSON(Str);
JSON.parse(str);
eval();

posted @ 2018-04-13 23:22 KioLuo 阅读(84) 评论(0) 编辑收藏举报

刷新页面返回顶部

KioLuo