码迷,mamicode.com
首页 > Web开发 > 详细

JQuery

时间:2017-08-31 23:13:41      阅读:317      评论:0      收藏:0      [点我收藏+]

标签:dom   jquery库   操作   一个   text   cte   pre   index   查询   

  JQuery是一个JavaScript函数库。极大地简化了JavaScript编程。同时也很容易学习。

  JQuery库包含以下特性:

  • HTML元素的选取
  • HTML元素的操作
  • CSS操作
  • HTML时间函数
  • JavaScript特效和动画
  • HTML DOM 遍历和修改
  • AJAX
  • Utilities

  JQuery库位于一个JavaScript文件中,包含所有的JQuery函数,可以通过<script>标签把JQuery添加到网页上。

  JQuery语法:是为HTML元素的选取编制的,可以对元素执行某些操作。基础语法是:$(selector).action() 

  •   美元符号($)定义JQuery
  •   选择器(selector)查询和查找HTML元素
  •   JQuery的zction()对元素执行操作

  通常,文档中的JQuery函数都位于一个document ready函数中:$(document).ready(function(){......}) ;   这是为了防止文档在完全加载就绪之前运行JQuery代码。

  JQuery选择器

  通过选择器可以对元素组或单个元素进行操作。JQuery元素选择器和属性选择器允许通过标签名、属性名或内容对HTML元素进行选择。选择器允许对HTML元素组或单个元素进行操作。

JQuery元素选择器

  JQuery使用CSS选择器里选取HTML元素

  $("p")选取<p>元素。

  $("p.intro")选取所有class="intro"的<p>元素。

  $("p#demo")选取所有id="demo"的<p>元素。

JQuery属性选择器

  JQuery使用XPath表达式来选择带有给定属性的元素

  $("[href]")选取所有带有href属性的元素。

  $("[href=‘#‘]")选取所有带有href值等于"#"的元素。

  $("[href!=‘#‘]")选取所有带有href值不等于"#"的元素。

  $("[href$=‘.jpg‘]")选取所有href值以".jpg"结尾的元素。

JQuery CSS选择器

  JQuery  CSS选择器可用于改变HTML元素的CSS属性。

    $("p").css("background-color","red") ;

 JQuery选择器:

选择器 实例 选取
* $("*") 所有元素
#id $("#lastname") id="lastname"的元素
.calss $(".intro") 所有class="intro"的元素
element $("p") 所有<p>元素
.class.class $(".intro.demo") 所有class="intro"且class="demo"的元素
     
:first $("p:first") <p>元素的第一个
:last $("p:last") <p>元素的最后一个
:even $("tr:even") 所有偶数的<tr>元素
:odd $("tr:odd") 所有奇数的<tr>元素
     
:eq(index) $("ul li:eq(3)") 列表中的第四个元素(index从0 开始)
:gt(no) $("ul li:gt(3)") 列出index大于3 的元素
:lt(no) $("ul li:lt(3)") 列出index小于3 的元素
:not() $("input:not(:empty)") 所有不为空的input元素
     
:heder $("header") 所有标题元素<h1>--<h6>
:animate   所有动画元素
     
:contains(text) $("contains(W3S)") 编号指定字符串的所有元素
:empty $(":empty") 无子元素的所有元素
:hidden $("p:hidden") 所有隐藏的<p>元素
:visible $("table:visible") 所有可见的表格
     
s1,s2,s3 $("th,td,intro") 所有带匹配选择的元素
     
[attribute] $("[href]") 所有带有href属性的元素
[attribute-value] $("[href=‘#‘]") 所有href属性的值等于"#"的元素
[attribute!=value] $("[href!=‘#‘]") 所有href属性的值不等于"#"的元素
[attribute$=value] $("[href$=‘.jpg‘]") 所有href属性的值包含以".jpg"结尾的元素
     
:input $(":input") 所有<input>元素
:text $(":text") 所有type="text"的元素
:password $(":password") 所有type="password"的元素
:radio $(":radio") 所有type="radio"的元素
:checkbox $(":checkbox") 所有type="checkbox"的元素
:submit $(":submit") 所有type="submit"的元素
:reset $(":reset") 所有type="reset"的元素
:button $(":button") 所有type="button"的元素
:image $(":image") 所有type="image"的元素
:file $(":file") 所有type="file"的元素
     
:enabled $(":enabled") 所有激活的 input 元素
:disabled $(":disabled") 所有禁用的 input 元素
:selected $(":selected") 所有被选取的 input 元素
:checked $(":checked") 所有被选中的 input 元素

JQuery

标签:dom   jquery库   操作   一个   text   cte   pre   index   查询   

原文地址:http://www.cnblogs.com/sdlzspl/p/7458907.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!