jquery基础知识

jquery基础知识

1.Q设计思想？
2.选择网页元素
3.模拟CSS选择元素
4.独有表达式选择
5.多种筛选方法
6.JQ写法
7.方法函数化
8.链式操作
9.取值赋值合体
10.JQ与JS关系
可以共存，不能混用

1.所有的jQuery都是用函数封装的,根据html元素来编制的
$(selector   css选择器).action();

常见的选择器方法：
语法  描述
$(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" 的元素
空格子元素

2.
jQuery 使用名为 noConflict() 的方法来解决该问题。
var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。

3.
结论
由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：
    把所有 jQuery 代码置于事件处理函数中
    把所有事件处理函数置于文档就绪事件处理器中
    把 jQuery 代码置于单独的 .js 文件中
    如果存在名称冲突，则重命名 jQuery 库

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

5.

隐藏和显示
hidden(),show(speed,callback);
toogle();
speed = slow,fast,毫秒

利用动画效果，将控制宽高大小；
6.
淡入淡出
fadeIn(),fadeOut(),fadeToggle(speed,callback),fadeTo(speed,opacity,callback);
opacity 0 - 1

用透明度减少直到消失，最后设置不占空间

7.
滑动
    slideDown()
    slideUp()
    slideToggle(speed,callback)

8.
动画：
animate({param},speed,callback)
{param}    形成动画的css的属性

使用相当于值
height:'+=150px',
width:'+=150px'

 使用预定义的值
height:'toggle'

使用队列功能
添加多个动画，使之动作连贯
div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");

"开始" 按钮会启动动画。
 stop()   每次点击只会停止一个动画,"停止" 按钮会停止当前活动的动画，但允许已排队的动画向前执行。

stop(true) "停止所有" 按钮停止当前活动的动画，并清空动画队列；因此元素上的所有动画都会停止。

stop(true,true) "停止但要完成" 会立即完成当前活动的动画，然后停下来。


9.
Chaining链式操作
$("#p1").css("color","red").slideUp(2000).slideDown(2000);

10.

    text() - 设置或返回所选元素的文本内容   textContent
    html() - 设置或返回所选元素的内容（包括 HTML 标记）  innerHTML
    val() - 设置或返回表单字段的值         value
    加入参数就是设置，不加参数就是返回值。

 12.

回调函数由两个参数：被选元素列表中当前元素的下标(i)，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
 $("#test1").text(function(i,origText){
      return "Old text: " + origText + " New text: Hello world! (index: " + i + ")";

返回的值就是新的字符串;

11.

 attr('href')
 获取属性值
 设置属性值
 attr("href","http://www.w3school.com.cn/jquery")
 设置多个属性值：
  $("#w3s").attr({
    "href" : "http://www.w3school.com.cn/jquery",
    "title" : "W3School jQuery Tutorial"
  });

13.
attr的回调函数
 $("#w3s").attr("href", function(i,origValue){
    return origValue + "/jquery";
  });

14.

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

 $("p").append(" <b>Appended text</b>.");

15.

var txt2=$("<p></p>").text("Text.");   // 以 jQuery 创建新元素
var txt3=document.createElement("p");  // 以 DOM 创建新元素

$("p").append(txt1,txt2,txt3);         // 追加新元素多个内容
$("img").after(txt1,txt2,txt3);          // 在 img 之后插入新元素

16.

append在元素内进行添加,after在所选择的元素外（后面添加）

17.

remove();    删除被选中元素以及子元素
empty();     删除子元素

18.

过滤被删除的元素
jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
下面的例子删除 class="italic" 的所有 <p> 元素以及他的子元素：
实例

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

19.

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

$("button").click(function(){
  $("h1,h2,p").addClass("blue important");
});

 $("h1,h2,p").removeClass("blue");

 $("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

20.
css
$("p").css("background-color");不写属性就代表返回。
$("p").css({"background-color":"yellow","font-size":"200%"});
添加多个属性

21.

    width()
    height()
    innerWidth()
    innerHeight()
    outerWidth()
    outerHeight()

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

innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。

outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。

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

22.

parent() 方法返回被选元素的直接父元素。
该方法只会向上一级对 DOM 树进行遍历。
  $("span").parent();

parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
$("span").parents();
您也可以使用可选参数来过滤对祖先元素的搜索。
  $("span").parents("ul");

23.
jQuery parentsUntil() 方法

parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素：
  $("span").parentsUntil("div");


24.

children() 方法返回被选元素的所有直接子元素。
该方法只会向下一级对 DOM 树进行遍历。
 $("div").children();

 您也可以使用可选参数来过滤对子元素的搜索
  $("div").children("p.1");

find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
$("div").find("span");
 $("div").find("*");

 25.

    siblings()  所有兄弟元素
    next()      下一个兄弟元素
    nextAll()    这个元素所有的后面的兄弟元素
    nextUntil()  两个元素之间的兄弟元素
    prev()
    prevAll()
    prevUntil()


26.

过滤的方法：
选取首个 <div> 元素内部的第一个 <p> 元素
$("div p").first();
最后一个元素
$("div p").last();
第n个元素从0开始
$("p").eq(n);

27.
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

$(document).ready(function(){
  $("p").filter(".intro");
});

not() 方法与 filter() 相反。
 $("p").not(".intro");