一、基础知识

1、jq的使用

在script块中:

方式1:$(function(){
                   
                      $("[使用选择器]").css("background-color","red");
                })

方式1(方式1的另一种表示方法):jQuery(function(){
                  
                   alert("456");
               })

方式2: window.onload=function(){
                   
                    alert("123");
                   
                }

方式3:$(document).ready(function(){
                  
                   alert("789");
               })

2、选择器的使用

2.1  基本选择器

包含:id、元素、类、*、多个选择器

举例:

还有一些基本选择器:(具体用法可以去看JQuery 1.4.1中文参考)

选择器的介绍:

:first   【获取第一个元素】

:last    【获取最后个元素】

:even    【匹配所有索引值为偶数的元素,从 0 开始计数】

:odd     【匹配所有索引值为奇数的元素,从 0 开始计数】

:eq([数值])       【匹配一个给定索引值的元素】

:lt([数值])    【匹配所有小于给定索引值的元素】

:gt([数值])    【匹配所有大于给定索引值的元素】

测试:$("ul li:first").css("background-color","red");

2.2  层次选择器

ancestor descendant【在给定的祖先元素下匹配所有的后代元素】

parent > child         【在给定的父元素下匹配所有的子元素】

prev + next            【匹配所有紧接在 prev 元素后的 next 元素】

prev ~ siblings       【匹配 prev 元素之后的所有 siblings 元素】

举例:

2.3  属性选择器

根据元素的属性进行筛选:

[attribute!=value]举例:

2.4  子元素选择器

:nth-child   【:nth-child 下标是从1开始的,而:eq()是从0算起的!】

:first-child   【':first' 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素】

:last-child    【':last'只匹配一个元素,而此选择符将为每个父元素匹配一个子元素】

:only-child    【如果某个元素是父元素中唯一的子元素,那将会被匹配。如果父元素中含有其他元素,那将不会被匹配。】

2.5  表单选择器和表单对象属性选择器

2.6  其他选择器

JQuery 总结篇的更多相关文章

  1. jquery(入门篇)无缝滚动

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. JQuery全局篇

    学到JavaScript的时候,感觉这个东西很神奇,没想到学到JQuery的时候,发现BS的世界,真的很微妙,不经意的一个方法就可以给人焕然一新的感觉,很喜欢这个阶段学的东西,但是还是感觉少于代码的训 ...

  3. JQuery入门篇

    JQuery入门篇 jQuery选择器 “$”表示JQuery对象 根据ID查找 $(‘#var’)表示将一个id值为var的DOM节点封装成一个jQuery对象,DOM节点必须以“#”开头. 例如: ...

  4. jQuery事件篇---高级事件

    内容提纲: 1.模拟操作 2.命名空间 3.事件委托 4.on.off 和 one 发文不易,转载请注明出处! 一.模拟操作 在事件触发的时候,有时我们需要一些模拟用户行为的操作.例如:当网页加载完毕 ...

  5. jQuery事件篇---事件对象

    内容提纲: 1.事件对象 2.冒泡和默认行为 发文不易,转载请注明出处! JavaScript 在事件处理函数中默认传递了 event 对象,也就是事件对象.但由于浏览器的兼容性,开发者总是会做兼容方 ...

  6. jQuery事件篇---基础事件

    写在前面: 有一段时间未更新博客了,利用这段时间,重新看了<jQuery基础教程 第四版>和<锋利的jQuery 第二版>,这两本书绝对是jQuery入门非常好的书,值得多读几 ...

  7. jquery样式篇

    1.jquery: 1.1简介 jquery是一个轻量级的javascript库.版本号分1.x版本和2.x版本,2.x版本不再支持IE6 7 8,而更好的支 持移动端开发. 每一个版本分为开发版和压 ...

  8. jQuery第二篇 (帅哥)

    1.1 jQuery操作DOM jQuery课程的目标:学会使用jQuery设计常见效果 选择器 基本选择器:#id ..class .element.* . 层级选择器: 空格.>.+.~ 基 ...

  9. jQuery第一篇 (帅哥)

      同学心目中的jQuery: 简单易用,功能强大,对移动端来说,体积稍大. 1.1 回顾前面学到的js我们遇到的一些痛点 window.onload 事件有个事件覆盖的问题,我们只能写一个 代码容错 ...

  10. jQuery初级篇(一)

    知识说明: jQuery库是一个javascript库文件,它比起javascript来,写的更少,但做得更多,下面便对刚开始学习jQuery,一些基础知识整理出来,供后期翻阅. 一.      jQ ...

随机推荐

  1. 数组(定义、遍历、冒泡排序、合并和Join 方法)

    一.数组的定义 1.理解:数组指一组数据,有序的数据,可以一次性存储多个数据,将多个元素(通常统一类型)按照一定的顺序排列放到一个集合里 2.通过构造函数创建数组: var 数组名=new Arrar ...

  2. go语言new和make

    1.new func new(Type) *Type 内建函数,内建函数 new 用来分配内存,它的第一个参数是一个类型,它的返回值是一个指向新分配类型默认值的指针! 2.make func make ...

  3. RESTFull开发风格

  4. Cannot capture jmeter traffic in fiddler

    Cannot capture jmeter traffic in fiddler First, change Fiddler's port back to 8888 as it was origina ...

  5. 360极速浏览器安装vue-devtools插件

    360极速浏览器扩展程序中心并没有提供vue-devtools插件,因此需要自己安装.本文介绍方法适用于所有Chrome内核浏览器. 本人已将编译后的Chrome插件包上传网盘,需要的可以直接下载使用 ...

  6. plsql if

    set serveroutput on accept num prompt '请输入一个数字'; declare pnum number := &num; begin then dbms_ou ...

  7. MySQL之Xtrabackup使用

    Xtrabackup对使用innodb存储引擎的mysql数据库进行备份时,不会影响数据库的读写操作(网上是这么说的,我还没验证过) 1.安装yum源 yum install https://repo ...

  8. [LeetCode] 40. Combination Sum II 组合之和 II

    Given a collection of candidate numbers (candidates) and a target number (target), find all unique c ...

  9. [LeetCode] 167. Two Sum II - Input array is sorted 两数和 II - 输入是有序的数组

    Given an array of integers that is already sorted in ascending order, find two numbers such that the ...

  10. [LeetCode] 529. Minesweeper 扫雷

    Let's play the minesweeper game (Wikipedia, online game)! You are given a 2D char matrix representin ...