jquery知识点

iframe相关

在iframe外层获取iframe内层的元素
//格式：
$("#iframe的ID").contents().find("#iframe中的控件ID").click();//jquery 方法1
// 实例：
$("#ifm").contents().find("#btnOk").click();//jquery 方法
//格式：
$("#iframe中的控件ID",document.frames("frame的name").document).click();//jquery 方法2
//实例：
$("#btnOk",document.frames("ifm").document).click();//jquery 方法2

在iframe内层获取iframe外层的元素
//格式：
$('#父窗口中的元素ID', parent.document).click();
//实例：
$('#btnOk', parent.document).click();
//格式：
$('#同级iframe元素ID', parent.frames("frame的name").document).click();
//实例：
$('#btnOk', parent.frames("ifm").document).click();

在iframe内层获取当前iframe元素的id
var frameId = window.frameElement && window.frameElement.id || '';

选择器

元素选择器
$("p")

id选择器
$("#test")

class选择器
$(".test")

$("*") // 所有元素
$(this) // 当前元素
$("p.intro") // 元素+class

伪类选择器
$("p:first")
$("ul li:first-child")
$(":button")
$("tr:even")
$("tr:odd")

属性选择器
$("[href]")
$("a[target='_blank']")
$("a[target!='_blank']")

查找元素

获取祖先元素
parent()
parents()
parentsUntil()

子孙元素
children() //只包括子元素
find() //包括所有子孙元素

同胞元素
siblings() //所有同胞元素
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()

特殊
first()
last()
eq() // 获取第几个，获取出来依然是jquery元素
filter()
not()

dom操作

获取/设置内容
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
attr() 设置或获取属性值
prop() 设置或获取dom本身的属性值
//attr 和 prop 的区别介绍：
//对于 HTML 元素本身就带有的固有属性，在处理时，使用 prop 方法。
//对于 HTML 元素我们自己自定义的 DOM 属性，在处理时，使用 attr 方法。

添加元素 （可以添加纯文本或者元素）
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
var txt1="<b>I </b>";                    // 使用 HTML 创建元素
var txt2=$("<i></i>").text("love ");     // 使用 jQuery 创建元素
var txt3=document.createElement("big");  // 使用 DOM 创建元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3);          // 在图片后添加文本

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

css操作

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
$("p").css({"background-color":"yellow","font-size":"200%"}); // 可以同时设置多个css属性

尺寸

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

效果/动画

隐藏和显示
hide()
show()
toggle()

淡入淡出
fadeIn()
fadeOut()
fadeToggle()
fadeTo() //允许渐变为给定的不透明度（值介于 0 与 1 之间）。

滑动
slideDown()
slideUp()
slideToggle()

自定义动画
$(selector).animate({params},speed,callback);
$("div").animate({left:'250px'});
$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});
// css的属性需要用驼峰，不能用中划线
停止动画
$(selector).stop(stopAll,goToEnd);
//可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
//可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

时间
speed 或 duration 参数可以设置许多不同的值，比如 "slow", "fast", "normal" 或毫秒。
$("p").hide(1000);

回调函数
$("button").click(function(){
  $("p").hide("slow",function(){
    alert("段落现在被隐藏了");
  });
});

jquery链

通过 jQuery，可以把动作/方法链接在一起。
Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。
$("#p1").css("color","red").slideUp(2000).sblurlideDown(2000);
$("#p1").css("color","red")
  .slideUp(2000)
  .slideDown(2000);

事件

鼠标
click()
dblclick()
mouseenter()
mouseleave()
hover()

键盘
keypress()
keydown()
keyup()

表单
submit()
change()
focus()
blur()

文档/窗口

```javascript
load()
unload()
resize()
scroll()

ajax

load 从服务器加载数据，并把返回的数据放入被选元素中。
$(selector).load(URL,data,callback);
$("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 通过 HTTP GET 请求从服务器上请求数据。
$.get(URL,callback);
$("button").click(function(){
  $.get("demo_test.php",function(data,status){
    alert("数据: " + data + "\n状态: " + status);
  });
});

post 通过 HTTP POST 请求向服务器提交数据。
$.post(URL,data,callback);
$("button").click(function(){
    $.post("/try/ajax/demo_test_post.php",
    {
        name:"菜鸟教程",
        url:"http://www.runoob.com"
    },
    function(data,status){
        alert("数据: \n" + data + "\n状态: " + status);
    });
});

解决冲突

noConflict() 方法会释放对 $ 标识符的控制，这样其他脚本就可以使用它了。
$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery 仍然在工作!");
  });
});
// 自定义标识
var jq = $.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery 仍然在工作!");
  });
});
// 只在内部使用
$.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("jQuery 仍然在工作!");
  });
});