Jqury笔记
1. ---------------
-var aa = new Array();
aa.push(1);
alert(aa[0]);
var aa=[];也表示一个数组;
--------------------------
var a = "sdfsfs";
if (typeof (a) == "string")
alert("shfidfodsf");
else if (typeof (a) == "undefined")
alert("未定义");
-----------------通过构造函数属性来判断类型;分割字符串
var gg = "gu,oze,ng";
var aa = gg.split(",");
if(aa.constructor==Array)
alert(aa[2]);
-------------------归并字符串;
var aa = new Array(1, 2, 3, 4);
var b = aa.join("-");
alert(b);
--------------------------
$(document.body).css("background-color","Red");
---------------------:切记没有分号,px后面,否则无效果;
$("li").each(function () {
$(this).css("background-color", "green");
$(this).css("font-size","20px");
});
--------------
$("li:eq(3)").css("background-color", "red");匹配第四个li;
------------
$("li:contains('b')").css("background-color", "red");内容含有b的标签;
---------------
//$("ul").css("background-color","red");
//$("ul").attr("style", "background-color:red; font-size:20px;");
//$("ul").attr({ style: "background-color:red;",style: "background-color:red;"});
$("ul").attr("class", "lii");
$("ul").removeAttr("class");
-------------------------
$("p").addClass("selected highlight");
------------------获得索引:
.index();从0开始,返回一个数字;
-----------有的话,删除,没有的话添加;
$("ul").click(function () {
$(this).toggleClass("lii");
});
--------------not:除此之外的;
$("li").not($("li:last")).css("background-color", "red");
-------------2,3只选择第三个,2,4只选择第三和第四个,索引从0开始;当slice(2),表示从第三个到最后一个;
$("li").slice(2,3).css("background-color", "red");
---------------------lt:前四个;
$("li:gt(4)").css("background-color", "red");
-------所有的li;
$("ul").children().css("background-color", "red");
--------class为dd的类;
$("ul").children(".dd").css("background-color", "red");
-------------所有的同级元素;
$("#f").nextAll().css("background-color", "red");
-----------挨着的第一个同级元素;
$("#f").next().css("background-color", "red");
-----------同级直到table标记之间的同级标记,不包括table;
$("#f").nextUntil("table").css("background-color", "red");
-------------找到所有父级的标记;
$("#nei").parents().css("background-color","red");
-------------应该只有上一级;
$("#nei").parent().css("background-color","red");
-------------
siblings:除此之外的所同级元素;
---------相当于累加;
$("#nei").add("table").add("#f").css("background-color","red");
-----------并把自己也加上;
$("div").find("p").andSelf().addClass("border");
--------------将所有元素添加到b标签中;
$("#nei").contents().wrap("<b/>");
-------------在p标签的前面添加标记;append是后面;
$("p").prepend("<b>Hello</b>");
--------------.after,.before,insertafter,insertbefore;
------------将元素包含到另一元素中;
$("p").wrap(document.getElementById('content'));
------------
将所有匹配的元素用单个元素包裹起来时使用wrapall();
---------------------------:在p的内部添加b;(将p的内容用b抱起来)
$("p").wrapInner("<b></b>");
-----------变换标记;
$("p").click(function () {
$(this).replaceWith("<img src='../img/_8-1.png'></img>");
-----------
});
---------------------复制一份添加到标记中
$("b").clone().prependTo("p");
---------------------
将所有段落的字体颜色设为红色并且背景为蓝色。
jQuery 代码:
$("p").css({ color: "#ff0011", background: "blue" });描述:
如果属性名包含 "-"的话,必须使用引号:
jQuery 代码:
$("p").css({ "margin-left": "10px", "background-color": "blue" });
-----------------------不管怎么样:键值都加双引号;
$("#f").css({"color":"red","background":"blue"});
----------------------------------------------------------offset相对document的位置;
-----------设定移量;
$("#xuan").offset({top:200,left:400});
-------------得到相对位置
var a = $("#xuan").offset();
alert(a.left+"----"+a.top);
--------------------------------------------------------------position(),相对于父元素的偏移量;用法和offset一样;
------blur():失去焦点触发的事件;
-----change()事件:当内容改变且失去焦点时触发;
-------------滚动条滚动
$(window).scroll(function () {
setTimeout();
$("#xuan").offset({ top: $(window).scrollTop() + 200 });
});
-----------序列化操作:
var a = $.parseJSON('{ "name": "guozeng" }');
alert(a.name);
---------------------
------------------------textbox下拉框案例
$(function () {
$("#Text1").focus(function () {
//$("#gg").attr("display","block");
$("#gg").css("display", "block");
$("#gg").offset({ top: $("#Text1").offset().top + $("#Text1").height() + 5, left: $("#Text1").offset().left });
});
$("li").click(function () {
$("#Text1").val($(this).text());
$("#gg").css("display", "none");
});
})
-------------------pannel案例:
$(function () {
$("img[alt='a']").click(function () {
if ($(this).attr("src") == "../img/_8-1.png") {
$(this).attr("src", "../img/_8-2.png")
$("#gg").slideUp(500);
}
else {
$(this).attr("src", "../img/_8-1.png")
$("#gg").slideDown(500);
}
});
})
---------------------------
Jqury笔记的更多相关文章
- MAVEN学习笔记之私服Nexus(2)
MAVEN学习笔记之私服Nexus(2) 私有服务器搭建 Nexus www.snatype.org下载 snatype-work 是默认nexus存储nexus a:将bin添加到环境中 Admin ...
- git-简单流程(学习笔记)
这是阅读廖雪峰的官方网站的笔记,用于自己以后回看 1.进入项目文件夹 初始化一个Git仓库,使用git init命令. 添加文件到Git仓库,分两步: 第一步,使用命令git add <file ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- SQL Server技术内幕笔记合集
SQL Server技术内幕笔记合集 发这一篇文章主要是方便大家找到我的笔记入口,方便大家o(∩_∩)o Microsoft SQL Server 6.5 技术内幕 笔记http://www.cnbl ...
- PHP-自定义模板-学习笔记
1. 开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2. 整体架构图 ...
- PHP-会员登录与注册例子解析-学习笔记
1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...
- NET Core-学习笔记(三)
这里将要和大家分享的是学习总结第三篇:首先感慨一下这周跟随netcore官网学习是遇到的一些问题: a.官网的英文版教程使用的部分nuget包和我当时安装的最新包版本不一致,所以没法按照教材上给出的列 ...
- springMVC学习笔记--知识点总结1
以下是学习springmvc框架时的笔记整理: 结果跳转方式 1.设置ModelAndView,根据view的名称,和视图渲染器跳转到指定的页面. 比如jsp的视图渲染器是如下配置的: <!-- ...
- 读书笔记汇总 - SQL必知必会(第4版)
本系列记录并分享学习SQL的过程,主要内容为SQL的基础概念及练习过程. 书目信息 中文名:<SQL必知必会(第4版)> 英文名:<Sams Teach Yourself SQL i ...
随机推荐
- 安卓开发笔记——探索EventBus(转)
1.关于EventBus: 组件通讯在Android开发中是不可避免的,随着业务需求的复杂化,代码中需要我们去处理的业务逻辑难度也不断增大.例如多个Fragment之间的数据传递,Service与Ac ...
- JS基础——数组总结
JS中数组被觉得是一种对象,慢慢的,怎么忽然感觉,JS中仅仅要能够独立出来的概念怎么都能够当成对象来解释呢?有点儿怀疑.继续学吧.先来总结一下JS中数组是怎样详细使用的. 一.创建 数组的创建在JS中 ...
- thinkphp学习笔记7—多层MVC
原文:thinkphp学习笔记7-多层MVC ThinkPHP支持多层设计. 1.模型层Model 使用多层目录结构和命名规范来设计多层的model,例如在项目设计中如果需要区分数据层,逻辑层,服务层 ...
- 使用 CodeIgniter 框架快速开发 PHP 应用(五)
原文:使用 CodeIgniter 框架快速开发 PHP 应用(五) 简化 HTML 页面和表格设计这一章介绍了又一个节约你的时间而且使你的代码更具安全性和逻辑性的领域.第一,我们将会介绍创建视图的各 ...
- ASP.NET MVC+EF框架+EasyUI实现权限管理系列(7)-DBSession的封装
原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(7)-DBSession的封装 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇) (1):框架搭建 ...
- Asp.Net超时问题汇总
在数据库或者请求操作时,如果选择的时间段过短或操作数据量过大,就会遇到"请求超时"的的问题,网络上提供很多解决方案,但普遍不完善,根据个人经验及参考网络解决方案,先将其汇总如下: ...
- 几个更新(Update声明)查询方法
积极 文化: 上的方法,数据库更新Update.的标准格式:Update 表名 set =值 where 条件只是依据数据的来源不同,还是有所差别的: 1.从外部输入这样的比較简单例:update ...
- CSharp设计模式读书笔记(23):模板方法模式(学习难度:★★☆☆☆,使用频率:★★★☆☆)
模板方法模式:定义一个操作中算法的框架,而将一些步骤延迟到子类中.模板方法模式使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤. 模式角色与结构: 实现代码: using System; ...
- 防SQL注入:生成参数化的通用分页查询语句
原文:防SQL注入:生成参数化的通用分页查询语句 前些时间看了玉开兄的“如此高效通用的分页存储过程是带有sql注入漏洞的”这篇文章,才突然想起某个项目也是使用了累似的通用分页存储过程.使用这种通用的存 ...
- 使用ButterKnife无法inject view的解决办法
使用ButterKnife做android开发时,发现无法inject,如下,tvInfo总是null. @InjectView(R.id.textView1Info) TextView tvInfo ...