`

jQuery记录

阅读更多
1隐式迭代(一般不需要for循环遍历dom对象)
2css88.com
3jQuery1.x支持低版本和非标准浏览器
a) 谷歌CDN: http://www.google-jquery-cdn.com/
b) 百度CDN:http://developer.baidu.com/wiki/index.php?title=docs/cplat/libs
c) 微软CDN:http://msdn.microsoft.com/zh-cn/library/ee517318.aspx
d) 新浪CDN:http://sae.sina.com.cn/?m=devcenter&catId=147
注意:优先引入CDN上的jquery,如果失效再引入本地的jquery,引入必须在head标签里。
4jQuery对象转换为Dom对象的两种方法[index]或get(index)
Dom对象转换为jQuery对象只需要用$()把Dom对象包装起来
length、toString等等是公用的
5val()、html()、click()
6jQuery库和其他库共存的两种办法(即释放$权限)
jQuery.noConflict();
alert("这是prototype弹出的:"+$F('a'));
alert("这是jQuery弹出的:"+jQuery('#a').val());
率先引入jQuery库,还有后面的$换为jQuery
<script src="jquery.js"></script>
<script src="prototype.js"></script>
选择器
css中div>a选择div下的一级子元素,低版本浏览器不兼容,但jQuery(‘div>a’)却不会存在兼容性的问题!
$(“body *”)
div+p选择div的下一个兄弟相当于next()方法
div~p选择div的后面的所有兄弟节点   相当于nextAll()方法
基本过滤选择器
p:first  第一个p
p  :first     p元素的所有子孙元素的第一个
:not()、:even、:odd、:eq()、:gt(2)大于2的下标、:lt(2)小于2的下标、:animated
内容过滤选择器
:contains()选取含有指定文本内容的元素
:has()选择含有指定标签(元素)的元素
:empty选择不包含子元素或文本的空元素
:parent选择含有子元素或文本的元素
可见性选择器
:hidden选取所有不可见元素
:visible选取所有可见元素    例如:$(‘div:hidden’)选取不可见的div
注意:opacity:0或visibility:hidden虽然不可见但都占据空间用所以:hidden是选择不到的
属性选择器
$(“div[title=js]”)选取有属性title且属性名为js的div元素(属性不一定是title,可以自定义的)
$(“div[title]”)选取有属性为title的元素,而不论属性名如何
子元素过滤选择器
:first-child选择父元素第一个子元素
:last-child选择父元素最后一个子元素
:only-child选择父元素只包含一个子元素的子元素  例如$(“div p:only-child”)
$(“div p:nth-child(2n)”)注意:索引从1开始
表单元素选择器
:input选择所有表单元素包括textarea、select等
:text、:password、:radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden等
$(“input:disabled”)或$(“input[disabled=disabled]”)选择不能修改的表单元素
$(“select option[selected=selected]”)或$(“select option:selected”)



$('p').eq(0).css('background','red');
$('p:eq(0)').css('background','green');
$('p').filter(":odd").css('background','red');//参数也可为类名
$('p').first().css('background','red');



$('p').click(function(){
        if($(this).is('.box'))//如果类型为box则......
        {
                $(this).css('background','red');
        }
});

$('p').not(':first').css('background','green');//除去第一个不加样式
$('p').slice(1,5).css('background','red');//第一个开始第五个结束,包一不包五
遍历查找
$(“#wrap”).children().not(“div”)选取id为wrap的子元素不包括div
$(“#wrap”).children(‘p’)选取id为wrap的子元素仅包括p
parent()
parents()和parentsUntil()是一样的
offsetParent()返回父元素中第一个其position设为relative或absolute的元素,仅指可见元素
next()、nextAll()、prev()、prevAll()
siblings()除本身之外的所有兄弟元素
注意:只要是返回一组元素的都可以加参数
.end()返回上一级匹配的节点
.addBack()与end一样,只不过位置不同
分别弹出每个input的值each()
$(function(){
$('input').each(function(){
        alert($(this).val());
});        });
\\[\\]特殊字符
$("#tab1 tr:even").css("background","red");
$("#tab1 tr:odd").css("background","green");        
合并
$("#tab1 tr").filter(":even").css("background","red").end().
filter(":odd").css("background","green");
选择器的优化
1.优先使用id选择器
2.在class选择器前添加标签名
3.采用find(),而不使用上下文查找
4.强大的链式操作比缓存更快
5.从左值右的模型
Dom操作
创建(两种方式)
var newElement='<div>我是用字符串创建的div标签</div>';
var newElement=$('<div>我是$符创建的div标签</div>');
$('body').append(newElement);
内部插入
后插入的两种方法append和appendTo
var str=$("<strong>大家好,我是后来插入的</strong>");
//$("p").append(str);
str.appendTo($("p"));
前插入的两种方法prepend和prependTo
//$("p").prepend(str);
str.prependTo($("p"));
外部插入
后插入的两种方法after和insertAfter
//$("p").after(str);
str.insertAfter($('p'));
前插入的两种方法before和insertBefore
包裹节点
wrap()讲所有匹配元素单独包裹
wrapAll()将所有匹配元素用一个元素包裹
WrapInner讲所有匹配的元素的子内容用其他标签包裹
删除节点
remove()、empty()        清除标签及内容,但仍占用位置
unwrap()仅删除父元素(不包括子元素本身及父元素的内容即不包括父元素的子元素)
复制节点
Clone克隆标签及及标签包含的事件注意:标签包含的事件要写在克隆事件的后面或写成clone(true)
$("a").click(function(){         alert("hello boy!"); });
var newA=$("a").clone(true);
$("body").append(newA);

替换标签
replaceWith与replaceAll
$("a").replaceWith("<p>我是p标签</p>");
$("<p>我是p标签</p>").replaceAll($("a"));
操作dom属性
attr()获取或添加或修改属性值           prop
removeAttr()删除属性值           removeProp
样式操作
addClass()添加样式(可以连续用两个addClass,也可以用一个,Class间用空格隔开)
removeClass()移除样式
toggleClass()切换样式(有和无之间切换,上面两个的交换)
hasClass()判断是否有样式,返回布尔值
css()设置匹配元素的css(行内样式)
height()获取高度
innerHeight()获取包括padding的高度
outerHeight(l)获取包括border的高度
outerHeight(true)获取包括margin的高度
width()
innerWidth()
outerWidth(bool)
offset()使用方法:先获取offset对象,然后left、top等   相对于文档 与原生js不同        
position()相对于有定位的父级
设置或获取节点内的元素(html和文本)
text()获取或设置匹配元素的文本节点(无参为获取,有参则设置)
html()获取匹配元素的dom节点或文本节点
查看、修改和删除实例
children指的是一级子元素
关于z-index与position的关系
事件和对象
$.holdReady(bool)暂停或恢复ready事件       jQuery的工具函数        
事件
click()
dblclick()双击鼠标左键
focusin()获得焦点事件,可作用于父爷级
focusout()失去焦点事件,可作用于父级
mouseenter、mouseleave可以阻止冒泡的
键盘事件:keydown、keyup、keypress
绑定和移除事件:bind()、unbind、on、off、one执行一次事件,然后销毁该事件、delegate....
$("body").delegate("p","click",function(){
        $(this).append("<p>我是新增加的p标签</p>");//新增标签也有绑定事件,相当于on
});
$("p").bind("click",function(){
        $("body").append("<p>我是新增加的p标签</p>");//新增标签没有绑定事件
});
事件命名空间
click点命名空间
event.preventDefault()阻止浏览器默认的行为        
动画
基础动画、渐变动画、滑动动画、自定义动画、动画队列
obj.hide(300)、obj.hide(“fast/slow/normal”)
模拟toggle
$("a").click(function(){
        if($("p").is(":visible"))
        {
                $("p").hide(300);
        }
        else
        {
                $("p").show(300);
        }
});

div里面的文字自动换行
white-space:normal; word-break:break-all; overflow:hidden;


fadeIn()自动显示   透明度从0变到100
fadeOut自动隐藏
fadeTo(执行到目标所需的时间,0.2,回调函数)


slideDown()、slideUp()、slideToggle()


animate({...},所需时间,回调函数)

动画队列
stop()、dequeue()、finish()、delay()
hover(函数一,函数二)
$("a").hover(function(){
        $("#div1").stop(false,true).slideDown();
},function(){
        $("#div1").stop(false,true).slideUp();
});
表格搜索实例
$("#tab1 tr:not('#header')").hide().filter(":contains('"+oT+"')").show();
微博发布限制字数
注意:关于val()和text()的区别?
jQuery中的Ajax
jqueryDom.load();
$.get();
$.post();
$.ajax();
$(".load").load("ccc.html");

 

分享到:
评论

相关推荐

    jQuery记录搜索历史

    **jQuery记录搜索历史** 在网页应用中,提供一个搜索历史功能可以极大地提升用户体验,让用户能够方便地回顾和重复他们的搜索行为。"jQuery记录搜索历史"这个主题涉及到的是使用JavaScript库jQuery来实现用户输入的...

    jQuery记录滚动深度的插件ScrollDepth.zip

    Scroll Depth 是个小型的 Google Analytics 插件,跟踪用户滚动的轨迹,它监控 25%, 50%, 75% 和 100% 的滚动标记,给每个状态都发送一个 Google Analytics 事件。用户也可以页面跟踪指定元素的滚动。...

    jQuery+Ajax打开弹出分页层并保存多选框选中数据

    3. **多选框处理**:为每个多选框添加`change`事件监听器,每当用户更改选中状态时,记录选中的多选框ID或值。可以使用数组或JSON对象来存储这些信息。 4. **保存数据**:在用户完成选择并点击保存按钮时,通过Ajax...

    jQuery带事件记录的多功能日历

    《jQuery带事件记录的多功能日历详解》 在网页开发中,日历插件是一种常见的交互元素,用于显示日期、安排事件以及提醒用户。本文将深入探讨一款特别的jQuery日历插件,它具备事件记录功能,使得日历不仅美观,而且...

    jQuery计算器带操作记录.zip

    《jQuery计算器带操作记录》 在网页开发中,交互性和用户体验是至关重要的因素。这个名为“jQuery计算器带操作记录”的项目,就是一种优秀的实践,它利用了jQuery库的强大功能,为用户提供了直观、友好的计算体验,...

    jQuery购买记录列表文字滚动更新代码

    本教程将详细讲解如何利用jQuery实现一个购买记录列表的文字滚动更新效果。 首先,jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理和动画效果。在这个例子中,我们将用到jQuery的`$(window).scroll...

    推荐10款jQuery插件.zip

    推荐10款jQuery插件.zip jQuery标签插件 jQuery表单插件 jQuery File Upload-jQuery上传插件 jquery.barrager.js专业的网页弹幕...jQuery记录历史搜索框 jQuery密码强度提示插件 jquery实现宽度百分比瀑布流排列效果

    jquery合并表格行记录

    本文将围绕“jquery合并表格行记录”这一主题展开,探讨如何利用jQuery实现表格数据的合并,提高数据展示的可读性。 首先,表格(Table)在网页中用于展示结构化数据,但在显示大量重复数据时,可能会显得过于冗余...

    jQuery文字记录搜索历史代码.zip

    本项目“jQuery文字记录搜索历史代码”利用jQuery结合HTML5的localStorage API,实现了用户在搜索框输入文字时,记录并展示搜索历史的功能。这个功能在很多网站和应用中都很常见,比如搜索引擎或者电商网站,它能够...

    jQuery mobile带历史记录的仿谷歌搜索

    在这个主题“jQuery mobile带历史记录的仿谷歌搜索”中,我们将深入探讨如何使用jQuery Mobile创建一个具有类似谷歌搜索功能的页面,同时利用其内置的历史管理功能,实现用户浏览历史的记录和回溯。 首先,jQuery ...

    asp+jquery+access拖动排序 ajax更新数据库

    2. **拖动事件**:当用户开始拖动元素时,jQuery记录初始位置。拖动过程中持续更新元素的位置。 3. **释放事件**:用户释放鼠标时,jQuery捕获元素的新位置,通过Ajax发送到服务器。 4. **服务器处理**:ASP接收到...

    jQuery学习记录----处理XML数据(二)

    在本篇博客“jQuery学习记录----处理XML数据(二)”中,我们将深入探讨如何使用jQuery库来解析和操作XML文档。XML(eXtensible Markup Language)是一种用于存储和传输结构化数据的标准格式,广泛应用于Web应用程序...

    综合案例--记录_jQuery记事本_

    本案例"综合案例--记录_jQuery记事本_"就是一个使用jQuery构建的简单记事本应用,它实现了记录、分类以及事件处理等功能,帮助用户方便地管理待办事项。 首先,让我们深入了解jQuery库。jQuery是由John Resig于2006...

    jQuery购买记录列表文字滚动更新代码.zip

    《jQuery购买记录列表文字滚动更新代码详解》 在网页开发中,动态滚动更新是一种常见的交互效果,能够为用户带来生动且实时的体验。本篇将深入解析“jQuery购买记录列表文字滚动更新代码”的核心概念与实现方法,...

    jQuery考勤时间段记录代码.zip

    【jQuery考勤时间段记录代码】是一个专为实现员工考勤管理设计的JavaScript代码示例,主要基于jQuery库,用于记录并展示一周内每日的工作时间段。这个功能强大的工具可以帮助企业或个人轻松跟踪和管理考勤数据,提高...

    jQuery购买记录滚动更新代码.zip

    本资源"jQuery购买记录滚动更新代码.zip"提供了一个实现购买记录列表滚动更新的示例,这在电子商务网站或管理后台中非常常见。这种功能能够实时展示最新的购买记录,无需用户手动刷新页面,提升用户体验。 首先,...

    jQuery Validation 使用记录

    《jQuery Validation 使用详解》 jQuery Validation 是一个广泛使用的JavaScript库,专为简化表单验证而设计,它使得在网页上创建高效、用户友好的验证规则变得轻而易举。在这个教程中,我们将深入探讨如何利用...

Global site tag (gtag.js) - Google Analytics