jQuery学习

jQuery语法和选择器:

 

语法:$(选择符).action()

元素选择器:

选取 <p> 元素:$(“p”)

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

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

 

属性选择器:

<a href="http://www.w3school.com.cn">W3School</a>

$(“[herf”])                     选取所有带有 href 属性的元素:

$("[herf=’#’]”)              选取所有带有 href 值等于"#" 的元素:

$("[herf=!’#’]”)            选取所有带有 href 值不等于"#" 的元素:

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

$(“div#intro.head”)   id="intro"的 <div> 元素中的所有 class="head" 的元素

$(“:input”)         所有input元素

$(“:text” )          所有type=”text”的input元素

 

CSS选择器:

$(“p”).css(“background-color”,”red”)               p 元素的背景颜色更改为红色

 

jQuery事件:

文档就绪函数

$(document).ready(function(){

      ====

})

$("button").click(function(){$("p").hide();});   单击

$(selector).dblclick(function(){   })        双击

$(selector).focus(function(){    })         获得焦点…

 

命名冲突:

jQuery 使用名为 noConflict() 的方法来解决该问题。

var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。

 

jQuery对HTML元素操作:

获取内容:                                            设置内容

.text() -文本内容                                    .text(“hello”)

.html() -内容(包括 HTML 标记)          .html("<b>Hello world!</b>");

. val() -表单字段的值                              .val(“dog”)


获取属性:.attr()  获取属性值   .attr("href")

设置属性:多个属性{}括起来

$(“#w3s”).attr({

“href” : “http://www.baidu.cn”,

“title” : “百度一下你就知道”

})

添加新html内容:

.append() - 在被选元素的结尾插入内容(追加

.prepend() - 在被选元素的开头插入内容

.after() - 在被选元素之后插入内容(和前面无关,之后加

.before() - 在被选元素之前插入内容

示例:

<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").prepend(" <br>Appended text</br>.");
  });
          
  $("#btn2").click(function(){
    $("ol").append("Appended item");
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">追加文本</button>
<button id="btn2">追加列表项</button>
</body>
</html>

删除html元素:

.remove()  删除被选元素

.empty()   清空被选元素

jQuery对CSS元素操作:

.addClass() - 向被选元素添加一个或多个类

.removeClass() - 从被选元素删除一个或多个类

.toggleClass() - 对被选元素进行添加/删除类的切换操作

不完整示例:

$("h1,p").toggleClass("blue");

$("h1,p").addClass("blue");

$("h2").removeClass("blue");


<h1>标题1</h1>

<h2 class="blue">标题2 </h2>

<p>这是一个段落。</p>

<p>这是另一个段落。</p>

.css() - 设置或返回样式属性

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

$("p").css({"background-color":"yellow","font-size":"200%"});     //逗号隔开,大括号括起来

 

jQuery有很多处理尺寸的重要方法

.width()

.height()

.innerWidth()

.innerHeight()

.outerWidth()

.outerHeight()

 

 

 

 

阅读更多
文章标签: jQuery
个人分类: jQuery
想对作者说点什么? 我来说一句

jQuery学习示例 大全

2017年03月16日 25.32MB 下载

JQuery学习资料

2011年08月31日 37KB 下载

没有更多推荐了,返回首页

不良信息举报

jQuery学习

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭