jQuery学习

最新推荐文章于 2024-05-05 23:51:11 发布

尘子与自由

最新推荐文章于 2024-05-05 23:51:11 发布

阅读量129

点赞数 1

分类专栏： jQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/chenzi_zww/article/details/80350529

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

jQuery语法和选择器：

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

元素选择器：

选取 元素：$(“p”)

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

选取所有 id="demo" 的 元素： $(“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("Hello world!");

. 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()

尘子与自由

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习

jQuery语法和选择器：语法：$(选择符).action()元素选择器：选取 &lt;p&gt; 元素：$(“p”)选取所有 class="intro" 的 &lt;p&gt; 元素：$(.class=”intro”) $(“p.intro”)选取所有 id="demo" 的 &lt;p&gt; 元素： $(“p#demo”) 属性选择器：&lt;a href="http://www.w3...
复制链接

扫一扫