1、jQ中最常用对象是$对象,$是jQ的简写。只有将普通的Dom对象封装成jQ对象,才能使用其中方法,jQuery(document).ready()是允许多个的,$(fn)与$(document).ready(fn);等价

2、$.map(array,callback(element,index));

对于数组array中的每个元素,调用callback()函数,最终返回一个新的数组。原数组不变。

$.each(arr,function(k,ele))//k--建  ele--值

3、链式编程(因为每一次css结束之后都是返回到对象那里)

例:$(dvObj).css('width','300px').css('height','200px').css('backgroundColor','yellow').text('hahah');//如果text写内容了,那么就是设置,如果没就是获取

4.选择器

优先顺序:id选择器>类选择器>标签选择器

//id选择器

例:

<style type="text/css">
#p{
width:300px;
height:500px;
background-color:yellow;
text-align:center;
}
</style>

<div id="p">
钟宁是SB
</div>

//标签选择器

div{//这里写标签
width:300px;
height:300px;
background-color:black;
text-align:center;
}

//类选择器

.cls{
width:200px;
height:200px;
background-color:red;
}

5.例子:

script type="text/javascript">
$(function () {//表示$(document).ready(fn)
  $('#btn').click(
    function () {
    $('.cls').css('width','300px').css('height','200px').css('backgroundColor','orange').html('<font color="red" size=7>wahahahhah</font>')
  })
}
)
</script>

6.多条件选择

$(div.cls){}//div是标签,.cls是类(div .cls)表示是div标签下的cls类

7.层次选择器

1).$('div p').css('backgroundColor','red');//层中所有的p标签都发生改变

2).$('div>p').css('backgroundColor','red');//直接的子元素,如果在直接的子元素中还有该元素,那么也会发生改变

3).$('div+p').css('backgroundColor','red');层后面的直接的p标签发生改变

4).$('div~p').css('backgroundColor','red');//层后面所有的p标签

5).$('*').css('backgroundColor','red');//所有的标签

8.十个常用方法

1).$('div').next().css('color','red');//层后面的第一个元素

2).$('div').nextAll().css('color','blue');//层后面所有的元素

3).$('div').prev().css('color','blue');//层前面的第一个

4).$('div').prevAll().css('color','blue');//层前面的所有

9.选择器

eq:equal//与eq(number)number相等的那个标签
gt:great than//比number大的
lt:less than//比number小的

note:

$('#tb .tr:first').css('fontSize', '30px');
$('#tb tr:last').css('color', 'red');
$('#tb tr:gt(0):lt(3)').css('fontSize', '28px');
$('#tb tr:odd').css('backgroundColor', 'red');

$('#tb tr:even').css('backgroundColor', 'red');

10.相对元素

例子:

<script type="text/javascript">
$(function () {
$('#tb tr').click(function () {//this会表示id为tb中的行tr
$('td',$(this).siblings()).css('backgroundColor', '');//此处表示click处的行(tr)的所有的兄弟元素里的所有的单元格(td)
$('td:odd', $(this)).css('backgroundColor', 'red');//此处表示click处的行(tr)的所有的奇数单元格(td)
$('td:even', $(this)).css('backgroundColor', 'green');//此处表示click处的行(tr)的所有的偶数单元格(td)
})
})
</script>

JQ第一天的更多相关文章

  1. JQ第一篇

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  2. css3 位置选择器 类似jq的:eq(0)

    JQ使用 :eq(位置),可以选择第几个元素 CSS3里面新增了一个用法,:nth-child(位置) 可实现和JQ同样的功能 需要注意的是jq第一个是从0开始,CSS的第一个是从1开始

  3. javascript如何用递归写一个简单的树形结构

    现在有一个数据,需要你渲染出对应的列表出来: var data = [ {"id":1}, {"id":2}, {"id":3}, {&qu ...

  4. (网页)javascript如何用递归写一个简单的树形结构

    转自博客园: 现在有一个数据,需要你渲染出对应的列表出来: var data = [ {"id":1}, {"id":2}, {"id":3 ...

  5. OpenStack命令行工具与API

    Openstack命令行工具 我们推荐Openstack命令行工具和Openstack的Dashboard两者结合使用.一些用户由于使用过其他云技术背景的,可能会使用EC2兼容的API,相对于我们需要 ...

  6. Jquery第一篇【介绍Jquery、回顾JavaScript代码、JS对象与JQ对象的区别】

    什么是Jquery? Jquey就是一款跨主流浏览器的JavaScript库,简化JavaScript对HTML操作 就是封装了JavaScript,能够简化我们写代码的一个JavaScript库 为 ...

  7. jq weui 图片浏览器Photo Browser 第一次点击任意图片总是显示第一张

    第一次做这个图片浏览器的时候遇到一个问题,如共有6张图片,每次进入页面时,第一次点击,无论去点击6张图片的哪一张初始化显示的都是第一张图片.后面的每次点击都没有问题的. for(let i = 0;i ...

  8. jq选择器 第一部分

    没有什么新意,全是从网上摘抄的,如果哪天忘了,就来查查吧. 1. id选择器(指定id元素) 将id="one"的元素背景色设置为黑色.(id选择器返单个元素) $(documen ...

  9. js与jq对数组的操作

    一.数组处理 1.数组的创建  var arrayObj = new Array(); //创建一个数组  var arrayObj = new Array([size]); //创建一个数组并指定长 ...

随机推荐

  1. 【转】python编码的问题

    摘要: 为了在源代码中支持非ASCII字符,必须在源文件的第一行或者第二行显示地指定编码格式: # coding=utf-8 或者是: #!/usr/bin/python # -*- coding: ...

  2. angularjs里对JS的lowercase和uppercase的完善

    读angularjs的源码开头. var lowercase = function (string) { return isString(string) ? string.toLowerCase() ...

  3. 设计模式--工厂模式Factory(创建型)

    工厂模式属于创建型模式,分为三类,简单工厂模式.工厂方法模式.抽象工厂模式. 一.简单工厂模式 在工厂中做判断,根据产品类型从而创造相应的产品,当增加新产品时需要修改工厂类. 例如: enum CTY ...

  4. Python 开发轻量级爬虫08

    Python 开发轻量级爬虫 (imooc总结08--爬虫实例--分析目标) 怎么开发一个爬虫?开发一个爬虫包含哪些步骤呢? 1.确定要抓取得目标,即抓取哪些网站的哪些网页的哪部分数据. 本实例确定抓 ...

  5. C#反射机制 (转载)

    转载:原文出处      http://www.cnblogs.com/binfire/archive/2013/01/17/2864887.html 一:反射的定义 审查元数据并收集关于它的类型信息 ...

  6. Sublime Text 2 增加python版本

    当系统中装有多个python版本时,Sublime Text 2  使用哪个版本需要手动添加 键入一下内容,path输入python的安转路径 保存至Python27.sublime-build文件 ...

  7. MySQL存储引擎之Myisam和Innodb总结性梳理

    Mysql有两种存储引擎:InnoDB与Myisam,下表是两种引擎的简单对比   MyISAM InnoDB 构成上的区别: 每个MyISAM在磁盘上存储成三个文件.第一个 文件的名字以表的名字开始 ...

  8. linux下bus、devices和platform的基础模型

    转自:http://blog.chinaunix.net/uid-20672257-id-3147337.html 一.kobject的定义:kobject是Linux2.6引入的设备管理机制,在内核 ...

  9. [Android]电话拨号器开发

    继续今天的Android,经过昨天大体了解了Android开发的一些基本文件结构,今天来做一个电话拨号器! 预期达到的效果 实现过程 首先还是按照昨天第一篇教程,新建一个项目叫PhoneCall的An ...

  10. Google赛马问题

    http://coolshell.cn/articles/1202.html 据说,这是Google的面试题.面试题目如下: 一共有25匹马,有一个赛场,赛场有5个赛道,就是说最多同时可以有5匹马一起 ...