jQuery基础知识_$(this).hide()-CSDN博客

1.页面中引入jquery

在head中，添加<script type="text/javascript" src="jquery.js">

2.jquery 部分语法

$(selector).action() selector html元素 action 执行的操作

$(this).hide() //隐藏当前的html元素

$("#text").hide(); //隐藏id为text的原素

$("p").hide(); //隐藏所有<p>元素

$(".test").hide();// 隐藏所有class为test的元素

3.所有的jquery都存放在一个函数中

$(document).ready(function(){

})

4.jquery 可以按照元素进行选择，

jquery 可以按照属性选择

$("[href]")选取所有带有href的属性的元素

$(“[href='#'])选取所有带有href值等于#的元素

$("[href!='#']")选取所有带有href值不等于#的元素

$("[href$='.jpg']")选取所有href值以“”。jpg“”结尾的元素

5.jquery css选择器html元素的css属性

jquery 也可以填写外部文件

6.jquery中$符号冲突可以自己定义符号

var zxl=$.noConflict();

那么所有的$可以用zxl替代

7.jquery时间

$(document).ready(function(){})将函数绑定到文档的就绪时间

$(selector).click(function) dbclick focus mouseover触发或者将函数绑定到被选择元素的点击事件

$(this).parents(".ex").hide("slow") class为ex的父级元素逐渐隐藏

8.$(selector).hide/show(speed,callback) speed 为速度，包括slow ,fast 或者是毫秒数callbak完成后执行的函数名称

显示或者隐藏可以使用toggle() 直接实现

9.jquery元素的淡入淡出

fadeIn() 淡入已隐藏的元素

fadeOut() 淡出可见元素

fadeToggle()淡入和淡出的切换

fateTo()渐变为给定的不透明度

10.slideDown() slideUp slideToggle 滑动显示和隐藏

11.动画 animate({css属性},speed,callback) callback 动画完成后，执行的函数名，如cs ，不需要cs()加括号

所有 HTML 元素都有一个静态位置，且无法移动。

如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

可以使用相对值：需要在值的前面加上 += 或 -=：

可以把属性的动画值设置为 "show"、"hide" 或 "toggle"： height:'toggle'

可以编写多个animate实现队列似的动画

12.stop(stopall,gotoend)方法用于在动画或者效果完成前对他们进行停止，两个参数默认都是false

stop 包含两个参数，一个是是否清楚动画队列，一个是是否立即完成当前动画

jquery所执行的动作可以直接用。来连接

13.jquery 获取对象的值

text() -设置或者返回所选元素的文本内容

html -设置或者返回所选元素的内容(包括html标记)

val-设置或返回字段的值

attr 获取属性值如attr("href")获取连接的值

.text() 和.html()中，可以有回调函数，回调函数包含两个参数 1，一个是参数值的位置坐标，2是原始值 function(i,origText){}

14.添加元素

append()在被选元素的结尾插入内容

prepend()在被选元素的开头插入内容

after() 在被选元素之后插入内容

before在被选元素之前插入内容

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

15.使用remove()函数删除被选元素及其子元素，其中可以使用参数如 $("p").remove(".italic") 删除class为italic的<p>元素

使用empty() 从被选元素中删除子元素

16.jquery 可以对css元素进行操作

addClass() 增加一个或多个类 $("h1,h2,p").addClass("blue"); 对多个对象增加一个类

$("#div1").addClass("important blue"); 可以直接添加两个类

removeClass() 删除一个或多个类

toggleClass 添加或删除类的切换操作

css() 设置或返回样式属性

17对于css 返回制订的css属性的值 css("background-color") 返回背景颜色

$("p").css("background-color","yellow")设置所有的段落背景色为黄色

$("p").css("background-color":"yellow","font-size":"200%"); //可以直接设置多个属性

18.jquery的尺寸

width() 设置或返回元素的宽度（不包含内边距，边框，及外边距）

height() 设置或返回元素的高度（同上）

例如：$("#div1").height();
innerWidth()返回元素的宽度(包括内边距)

innerHeight()

outerWidth() 返回元素的宽度（包括内边距和边框）

19.jquery遍历

a. 祖先

parent() 反复返回被选元素的直接父元素

parents()返回被选元素的所有祖先元素，全部的父级及向上的父级，一直到文档的根元素html。中间可以加参数如$("span").parents("ul") 找到父级元素是ul的span

parentsUntil()返回介于两个给定元素之间的所有祖先元素

b 后代

children()返回被选元素的所有直接子元素 $("div").children("p.1") 也可以增加参数，即div的子元素是P并且类为1

find()返回被选元素的后代元素，一路找到最后一个后代可以find("span") 或者find("*")

c.同胞

siblings()返回被选元素的所有同胞元素

next()返回被选元素的下一个同胞元素

nextAll() 返回被选元素的所有跟随的同胞元素，

nextUntil()介于两个给定参数之间的所有跟随的同胞元素

prev()返回被选元素的上一个同胞元素

prevAll()

prevUntil()

d过滤

fist() 返回被选元素的首个元素 $("div p").first(); 返回首个div元素内部的第一个p元素

last() 返回被选元素的最后一个元素

eq() 返回被选元素中带有指定索引号的元素 $("p").eq(1) 选择第二个p元素

filter() 匹配的元素 $("p").filter(.intro) 返回类名为intro的所有P元素

not（）与filter相反

20ajax

load方法，从服务器加载数据，并把返回的数据放入到被选元素中

$(selector).load(url,data,callback)

必需的 URL 参数规定您希望加载的 URL。

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称。

样例：

   $("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);
  });
});