JQuery

 $("#runoob").attr({
        "href" : "http://www.runoob.com/jquery",
        "title" : "jQuery 教程"
    })

jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。
因此,必须在文档完全加载后,才能运行JQuery代码,为保证这一点,所有的JQuery函数必须位于一个document ready 函数中:
$(document).ready(function(){
 
   // 开始写 jQuery 代码...
 
});
基础语法: $(selector).action()
美元符号定义 jQuery
选择符(selector)"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作
实例
$(this).hide() - 隐藏当前元素

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

$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素

$("#test").hide() - 隐藏 id="test" 的元素

事件方法:
$("p").click(function(){
  $(this).hide();
});

$("input").focus(function(){
  $(this).css("background-color","#cccccc");
});

一、JQuery效果

显示隐藏
.hide() .show()
可以使用 toggle() 方法来切换 hide() 和 show() 方法
淡入淡出
fadeIn() 用于淡入已隐藏的元
fadeOut() 方法用于淡出可见元素
fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换
fadeTo() 方法允许渐变为给定的不透明度(参数必须 值介于 0 与 1 之间)
滑动
slideDown() 方法用于向下滑动元
 slideUp() 方法用于向上滑动元素
 slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换
动画
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
停止动画
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此,默认地,stop() 会清除在被选元素上指定的当前动画。
通过链,可以在同一个元素上运行多条 jQuery 命令,一条接着另一条
$("#p1").css("color","red").slideUp(2000).slideDown(2000);

二、JQuery HTML


JQuery的核心部分就是操作DOM的能力,提供了一系列与DOM相关的方法
JQuery操作DOM真的好方便啊!!怎么没人告诉过我!!可恶!!!!
设置/获取内容 text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容(包括 HTML 标记)
val() - 设置或返回表单字段的值
( )中输入参数即可设置对应内容
设置/获取属性
attr() -用于获取属性值
( )中输入参数即可设置对应内容
设置一个属性:  $("#runoob").attr("href","http://www.xxx.com");
设置多个属性:  $("#runoob").attr({
        "href" : "http://www.runoob.com/jquery",
        "title" : "jQuery 教程"
    })
添加元素 append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
删除元素 remove() - 删除被选元素(及其子元素)
empty() - 从被选元素中删除子元素
CSS类 addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
如:$("p").css({"background-color":"yellow","font-size":"200%"})
尺寸

三、JQuery遍历

JQuery的遍历,说白了就是对DOM树进行遍历,在DOM树上进行移动
向上遍历
找祖先
parent()-返回被选元素的直接父元素
parents()-返回被选元素的所有祖先元素一路向上直到文档的根元素
(可设置可选参数,过滤祖先元素)
parentsUntil()-返回介于两个给定元素之间的所有祖先元素
例:$("span").parentsUntil("div")
向下遍历
找后代
children()-返回被选元素的所有直接子元素
find()-返回被选元素的后代元素,一路向下直到最后一个后代
可以使用可选参数来过滤对子元素的搜索)
水平遍历
找兄弟
siblings()-返回被选元素的所有同胞元素
next()-返回被选元素的下一个同胞元素,只返回一个
nextAll()-返回被选元素的所有跟随的同胞元素
nextUntil()-返回介于两个给定参数之间的所有跟随的同胞元素
prev()-返回被选元素的前一个同胞元素,只返回一个
prevAll()-返回被选元素的前面所有的同胞元素
prevUntil()-返回介于两个给定参数之间的所有跟随的同胞元素
过滤
first() 方法返回被选元素的首个元素   $("div p").first();
last() 方法返回被选元素的最后一个元素
eq() 方法返回被选元素中带有指定索引号的元素(索引号从0开始)
filter() -规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回
not()-filter()的反方法

四、JQuery AJAX


load ( )
从服务器加载数据
$(selector).load(URL,data,callback);
必需的 URL -需要加载的 URL
可选的 data -与请求一同发送的查询字符串键/值对集合
可选的 callback - load() 方法完成后所执行的函数名称
$("#div1").load("demo_test.txt");
get()
通过 HTTP GET 
从服务器获得(取回)数据 
$.get(URL,callback);
必需的 URL 参数-请求的 URL。
可选的 callback -请求成功后所执行的函数名。
如:
 $.get("demo_test.php",function(data,status){
    alert("数据: " + data + "\n状态: " + status);
  })
post()
HTTP  POST
向指定的资源提交要处理的数据
也可用于从服务器获取数据。
但不会缓存数据
$.post(URL,data,callback);
必需的 URL -请求的 URL
可选的 data -连同请求发送的数据
可选的 callback- 请求成功后所执行的函数名
如:
$.post("/try/ajax/demo_test_post.php",
    {
        name:"菜鸟教程",
        url:"http://www.runoob.com"
    },
    function(data,status){
        alert("数据: \n" + data + "\n状态: " + status);
    });




全部评论

相关推荐

秋招投简历提醒助手:个人经验是,一般面二十场左右就会进入侃侃而谈阶段。我今年七月末的时候开始的第一次面试,都是很多不会,回复很慢。后面慢慢迭代,到九月中的时候基本上面啥说啥,很放松的状态
远程面试的尴尬瞬间
点赞 评论 收藏
分享
专业嗎喽:个人信息名字太大,合到电话邮箱那一栏就行,有党员写过党,剩下其他全删,站空太大了 把实习经历丰富,放最前面,然后是个人评价,技能之类的,然后是学校信息。项目经历最后面,可以就选一个自己擅长的。 现在是学校不是92就扣分的,没必要放前面。 然后现在看重实习经历>竞赛经历(校园经历)>课程项目经历
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务