jquery用法初探

JQuery选择器

JQuery选择器用于查找满足条件的元素,比如可以用$(“#控件Id”)来根据控件id获得控件的jQuery对象,相当于getElementById:

1、id 选择器   $(“#div1”).html(“<font color=red>hello</font>”)。语法、意义类似于CSS选择器

2、标签选择器 $("TagName")来获取所有指定标签名的jQuery对象,相

当于getElementsByTagName:

$(function() {

$("#btnClick").click(function() {

$("p").html("我们都是P");

});

});

3、类选择器

JQuery中注册事件监听的写法:click()、leave()、focus()、blur...,自己动手写click函数。

规则: $(who).when({what});      例: $(‘#a’).click(function(){});

4、复合选择器:$("p,div,span.menuitem"),同时选择p标签、div标签和拥有menuitem样式的span标签元素(类似于CSS选择器)

/5、层次选择器:

(1)$("div p")获取div下的所有p元素(后代,子、子的子……)

(2)$("div > p")获取div下的直接p子元素

(3)$(".menuitem + div")获取样式名为menuitem之后的第一个div元素(不常用)

(4)$(".menuitem ~ div")获取样式名为menuitem之后所有的div元素(不常用)

在JQuery中,js里面的几乎所有属性和事件都变成了方法,如果在方法中没写任何参数那表示是获取,写了就是设置

如果需要判断指定的id是否存在,应该写:

if ($("#btn1").length <= 0) {

alert("id为btn1的元素不存在!");

}

节点遍历

next()方法用于获取节点之后的挨着的第一个同辈元素,$(".menuitem").next("div")、nextAll()方法用于获取节点之后的所有同辈元素,$(".menuitem").nextAll("div")

prev、prevAll兄弟中之前的元素。

siblings()方法用于获取所有同辈元素,$(".menuitem").siblings("li")。siblings、next等所有能传递选择器的地方能够使用的语法都和$()语法一样。

end()将匹配的元素列表变为前一次的状态。

andSelf()加入先前所选的加入当前元素中

案例:横向菜单,选中的项高亮显示 $(this).css();$(this).siblings().css()

案例:评分控件。prevAll,this,nextAll

简单选择器

:first 选取第一个元素。$("div:first")选取第一个<div>$(".warn:first");

:last 选取最后一个元素。$("div:last")选取最后一个<div>

:not(选择器) 选取不满足“选择器”条件的元素,$("input:not(.myClass)")选取样式名不是myClass的<input>

:even、:odd,选取索引是奇数、偶数的元素:$("input:even")选取索引是奇数的<input>

:eq(索引序号)、:gt(索引序号)、:lt(索引序号) 选取索引等于、大于、小于索引序号的元素,比如$("input:lt(5)")选取索引小于5的<input>

$(":header")选取所有的h1……h6元素(*)

$("div:animated")选取正在执行动画的<div>元素。 (*)

样式操作

获取样式 attr("class"),设置样式attr("class","myclass"),

追加样式addClass("myclass")(不影响其他样式),

移除样式removeClass("myclass"),

切换样式(如果存在样式则去掉样式,如果没有样式则添加样式)toggleClass("myclass"),判断是否存在样式:hasClass("myclass")

案例:网页开关灯的效果。background

练习:给body设置body{ filter:Gray; } 这个style就可以让网页变为黑白显示,做切换黑白效果的按钮。

点击表格行,被点击的行高亮显示(背景是黄色),其他行白色背景。监听每个tr的click事件,将点击的背景设置为黄色,其他的设置为白色背景。颜色定义为class样式。

时间: 2024-11-07 14:12:53

jquery用法初探的相关文章

JQuery之初探

软考过后又进入了紧张的B/S学习阶段,由于自己的进度比较慢,所以更要加进学习.现在就来总结下JQuery的一些基础知识: JQuery定义 jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作.其宗旨是--WRITE LESS,DO MORE,写更少的代码,做更多的事情. JQuery特点 1.以强大的CSS选择器为基础,几乎所有的操作都先使用选择器查找DOM对象,然后对其进行各种操作. 2.屏蔽浏览器差异,对DOM的操作提供了方便的扩展,易用的事件处

Jquery用法

向您的页面添加 jQuery 库 jQuery 库位于一个 JavaScript 文件中,其中包含了所有的 jQuery 函数. 可以通过下面的标记把 jQuery 添加到网页中: <head> <script type="text/javascript" src="jquery.js"></script> </head> 请注意,<script> 标签应该位于页面的 <head> 部分. Jq

data 原生用法 jquery 用法

//原生js: document.getElementById("obj").dataset.bid = "1";//赋值 var bid = document.getElementById("obj").dataset.bid;//取值 document.getElementById("obj").setAttribute("data-bid", "1");//赋值 var bid =

总结几个关于 jQuery 用法

有关 jquery 用法 目录: $.trim() $.inArray() $.getJSON() 事件委托 on 遍历closest() ajaxSubmit() 拖拽排序 dragsort() 进入正文 ing... 1. jQuery.trim(str) 解释:从字符串的开头和结尾删除空格. var str=' hello hi '; var new_str=$.trim(str); console.log(str.length) // 12 console.log(new_str.len

jQuery底层初探

// jQuery的CSS()方法,其底层运作就应用了getComputedStyle以及getPropertyValue方法.// getComputedStyle方法是只读的// element.style能读能写 // getAttribute方法提供了与getPropertyValue方法类似的功能,可以访问CSS样式对象的属性.用法与getPropertyValue类似// 返回 px,rgb// 返回 em #fff function getStyle(obj,attr,value)

jquery用法第二波

过滤器 属性过滤选择器: $("div[id]")选取有id属性的<div> $(“#id”) $("div[title=test]")选取title属性为“test”的<div>,JQuery中没有对getElementsByName进行封装,用$("input[name=abc]") $("div[title!=test]")选取title属性不为“test”的<div> 还可以选择开头

jQuery用法总结

-- 该笔记的整理引用自[http://www.cnblogs.com/Chenfengtao/archive/2012/01/12/2320490.html],感谢博主的整理!-- jQuery简介 jQuery是一个javascript的函数库,本质是对JS的一个封装,可以更加方便使用.比如JS中取对象document.getElementById()但用jquery的话$("#id")即可.使用Jquery可以: 1.快速获取文档元素 jQuery的选择机制构建于CSS的选择器,

Android开发 - ActivityLifecycleCallbacks用法初探

ActivityLifecycleCallbacks是什么? Application通过此接口提供了一套回调方法,用于让开发人员对Activity的生命周期事件进行集中处理. 为什么用ActivityLifecycleCallbacks? 以往若需监測Activity的生命周期事件代码,你可能是这样做的.重写每个Acivity的onResume(),然后作统计和处理: @Override protected void onResume() { super.onResume(); //TODO 处

jQuery用法小结

filtering过滤: .not('' ) 在所选元素集合中,  排除特定的元素 $( "li" ).not( ":even" ).css( "background-color", "red" ); .filter('') 在所选集合中,选定特定的元素:与.not( )相反: .eq(num )  num:0 1 2 3 4... .has(“ul”)  $( "li" ).has( "ul&q