Jquery笔记

jQuery语法:是通过选取HTML元素,并对选取的元素执行某些操作。
$(selector).action()
eg:
$(this).hide();
$("p").show();




文档就绪事件:
所有的jQuery函数都位于一个document ready函数中(初始化操作):
$(document).ready(function(){
//开始jQuery...
});
等价于:$(function(){

});




jQuery选择器:
1.元素选择器   
$("p")   :  在页面中选取所有的<p>元素;
2.#id 选择器
$("#test")  :根据ID获取元素
3. .class选择器
$(".test")  : 根据class获取元素


4.其它选择器
$("*")   : 选取所有的元素
$("this") :选取当前HTML元素
$("p.intro") :选取class为intro的<p>元素
$("p:first")  :选取第一个p元素
$("ul li:first")   :选取第一个<ul>元素的第一个<li>元素
$("ul li:first-child") :选取每个<ul>元素的第一个<li>元素
$("[href]")  :选取带有href属性的元素
$("a[target = '_blank']") :选取所有target属性值等于"_blank"的<a>元素
$("a[target != '_blank']")
$(":button")   :选取所有type = "button"的<input>元素和<button>元素
$("tr:even") 选取偶数位置的 <tr> 元素
$("tr:odd") 选取奇数位置的 <tr> 元素
关于 : 和 [] 这两个符号的理解
:可以理解为种类的意思,如:p:first,p 的种类为第一个。
[] 很自然的可以理解为属性的意思,如:[href] 选取带有 href 属性的元素。




jQuery事件(主要):


鼠标事件     键盘事件 表单事件 文档/窗口事件
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload


jQuery效果
隐藏显示  :show(),hide(),toggle();
淡入淡出  :fadeIn(),fadeOut(),fadeToggle(),fadeTo()
滑动 :slideDown(),slideUp(),slideToggle()
动画 : animate() 
$("div").animate({
   left:'250px',
   opacity:'0.5',
   height:'150px',
   width:'150px'
 });
停止动画 : stop()


jQuery HTML
jQuery 捕获(获取/设置内容和属性):
获得/设置内容 text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容(包括 HTML 标记)
val() - 设置或返回表单字段的值
获取/设置属性 attr()  $("#runoob").attr("href")
$("#runoob").attr("href","www.")


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


append()
<p>
  <span class="s1">s1</span>
</p>
<script>
$("p").append('<span class="s2">s2</span>');
</script>
结果是这样的:
<p>
  <span class="s1">s1</span>
  <span class="s2">s2</span>
</p>




after()




<p>
  <span class="s1">s1</span>
</p>
<script>
$("p").after('<span class="s2">s2</span>');
</script>


结果是这样的:
<p>
  <span class="s1">s1</span>
</p>
<span class="s2">s2</span>
总结:
append/prepend 是在选择元素内部嵌入。
after/before 是在元素外面追加。


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


jQuery-获取并设置CSS类
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
css("propertyname");
$("p").css("background-color");
css({"propertyname":"value","propertyname":"value",...});
$("p").css("background-color","yellow");


jQuery-尺寸
width()  返回元素的宽度(不包括内边距、边框或外边距)。
height() 返回元素的高度(不包括内边距、边框或外边距)。
innerWidth()  返回元素的宽度(包括内边距)。
innerHeight() 返回元素的高度(包括内边距)。
outerWidth() 返回元素的宽度(包括内边距和边框)
outerHeight()   返回元素的高度(包括内边距和边框)
outerWidth(true) 返回元素的宽度(包括内边距、边框或外边距)。
outerHeight(true) 返回元素的宽度(包括内边距、边框或外边距)。






jQuery-遍历


<div>


<ul>


<li> <li>


<span> <span>                     <b>




图示解析:
<div> 元素是 <ul> 的父元素,同时是其中所有内容的祖先。
<ul> 元素是 <li> 元素的父元素,同时是 <div> 的子元素
左边的 <li> 元素是 <span> 的父元素,<ul> 的子元素,同时是 <div> 的后代。
<span> 元素是 <li> 的子元素,同时是 <ul> 和 <div> 的后代。
两个 <li> 元素是同胞(拥有相同的父元素)。
右边的 <li> 元素是 <b> 的父元素,<ul> 的子元素,同时是 <div> 的后代。
<b> 元素是右边的 <li> 的子元素,同时是 <ul> 和 <div> 的后代。




jQUery 遍历-祖先


向上遍历 DOM 树  parent() 方法返回被选元素的直接父元素
parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。
parentsUntil()方法返回介于两个给定元素之间的所有祖先元素。


http://www.runoob.com/try/try.php?filename=tryjquery_parent


http://www.runoob.com/try/try.php?filename=tryjquery_parents


http://www.runoob.com/try/try.php?filename=tryjquery_parentsuntil


jQUery 遍历-后代


向下遍历 DOM 树  children() 方法返回被选元素的所有直接子元素。 find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。


http://www.runoob.com/try/try.php?filename=tryjquery_children


http://www.runoob.com/try/try.php?filename=tryjquery_find2




jQuery 遍历 - 同胞(siblings)


在 DOM 树中水平遍历 siblings() 方法返回被选元素的所有同胞元素。 
next() 方法返回被选元素的下一个同胞元素。该方法只返回一个元素。
nextAll() 方法返回被选元素的所有跟随的同胞元素。
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
prev()
prevAll()
prevUntil()


http://www.runoob.com/try/try.php?filename=tryjquery_siblings


http://www.runoob.com/try/try.php?filename=tryjquery_next


http://www.runoob.com/try/try.php?filename=tryjquery_nextall


jQuery 遍历- 过滤


缩小搜索元素的范围 first() 方法返回被选元素的首个元素。
last() 方法返回被选元素的最后一个元素。
eq() 方法返回被选元素中带有指定索引号的元素。
索引号从 0 开始


filter() 方法允许您规定一个标准。匹配的元素会被返回。


not() 方法与 filter() 相反


http://www.runoob.com/try/try.php?filename=tryjquery_first


http://www.runoob.com/try/try.php?filename=tryjquery_last


http://www.runoob.com/try/try.php?filename=tryjquery_eq


http://www.runoob.com/try/try.php?filename=tryjquery_filter


jQuery - AJAX load() 方法
下面的例子会把文件 "demo_test.txt" 的内容加载到指定的 <div> 元素中:$("#div1").load("demo_test.txt");


下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容,加载到指定的 <div> 元素中:$("#div1").load("demo_test.txt #p1");


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




jQuery - AJAX get() 和 post() 方法


$.get(URL,callback);
$.get("demo_test.php",function(data,status){
    alert("数据: " + data + "\n状态: " + status);
  });


 $.post(URL,data,callback);
 $.post("/try/ajax/demo_test_post.php",
    {
        name:"菜鸟教程",
        url:"http://www.runoob.com"
    },
        function(data,status){
        alert("数据: \n" + data + "\n状态: " + status);
    });





展开阅读全文

没有更多推荐了,返回首页