jquery 使用jquery操作Dom

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery操作css</title>
<style type="text/css">

</style>
</head>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#searchtxt").focus(function(){//搜索框获取鼠标焦点
//把value值赋值给变量：
var textvalue=$(this).val();//得到当前文本框的值
if(textvalue=="电风扇"){//判断如果文本框值是电风扇就清空文本框值
$(this).val("");//设置成空 //val用于设定HTML内容的值//可以获取或设置元素的value属性值

}

});
//当我们失去焦点的时候，重新设置成电风扇
$("#searchtxt").blur(function(){
var textvalue=$(this).val();//获取文本框当前值
if(textvalue==""){
$(this).val("电风扇");//失去焦点还原值
}
});
});
</script>
<body>
<input name=""calss="search_txt" value="电风扇"id="searchtxt"></input>
<input type="button" class="search_bin"value="搜索"></input>
<body>
</html>

节点操作与属性操作！（一）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>节点操作</title>
<style type="text/css">
</style>
</head>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".contain :header").css({"background":"blue","color":"pink"});
var newnode="<li>你喜欢谁</li>"//将newnode追加的ul里面
$("ul").append(newnode);//在原来节点上新追加一个节点
var newnode2="<li>贝克汉姆</li>";
$("ul").prepend(newnode2);//在原来节点上新追加一个节点，前置操作
var newnode3="<li>张杰</li>";
$("ul").after(newnode3);//张杰在后面
$(newnode2).insertAfter("ul");//将贝克汉姆插入到ul之后（倒数第二个）
var newnode4="<li>谢娜</li>";
$("ul").before(newnode4);//插入到ul前面
$(".gamelist li:lt(3)").remove();//将节点小于3的删除
$(".gamelist li:lt(3)").empty();//将节点小于3的删除 */
var $newnode="<li>你喜欢哪些项目</li>"//新创建节点
// $(".gamelist li:eq(2)").replaceWith($newnode);//替换ul当中的第3个
//$($newnode).replaceAll(.gamelist li:eq(2));//替换ul当中的第3个
$(".gamelist li:eq(2)").click(function(){
$(this).clone(true).appendTo(".gamelist");//点击的时候复制第三个节点
//不复制事件处理
$(".gamelist li:eq(2)").click(function(){
$(this).clone(false).appendTo(".gamelist");//点击的时候复制第三个节点
*///替换ul当中的第3个
$(".contain img").click(function(){
console.log($(this).attr("alt"));//获取属性值

});
});

在元素内部插入节点：

append（）

概述：append是向每个匹配的元素内部追加内容。$（"ul"）.append("li");li追加到ul中

这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。

appendTo（）是将ul追加到li中 $("ul").appendTo("li");ul追加到li中

转载于:https://www.cnblogs.com/hualishu/p/8820389.html

jquery 使用jquery操作Dom相关推荐

jQuery 操作 DOM
为什么80%的码农都做不了架构师?>>> 操作 DOM 使用jquery 选择器得到节点的 jquery对象.使用 jquery对象可以操作dom! 修改Text和Html ...
jQuery 学习笔记一(认识jQuery jQuery选择器 jQuery中的DOM操作)
第一章认识jQuery jQuery代码风格 $(document).ready(function(){ //... }); 简化 $(function(){ //... }); jQuery对象转 ...
原生JS和jQuery操作DOM的区别小结
一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq ...
jQuery操作Dom、jQuery事件机制、jQuery补充部分
jQuery操作Dom: 修改属性: //使用attr()方法 //attr(name, value) //name:要修改的属性的属性名 //value:对应的值 //attr方法,如果当前标签有要 ...
jQuery 操作DOM总结,DOM Core操作,HTML-DOM操作和CSS-DOM操作
jQuery创建元素节点或文本节点或属性节点.jQuery插入节点.jQuery删除节点.jQuery复制节点.jQuery替换节点.jQuery包裹节点.jQuery属性操作.jQuery样式操作. ...
jQuery学习笔记之DOM操作、事件绑定（2）
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定源码地址: https ...
jQuery操作DOM对象
jQuery操作DOM对象 1.使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,attr(属性名,属性值)格式则是设 ...
jQuery框架的介绍以及基本用法--操作dom
jQuery框架的介绍以及基本用法–操作dom 概念 jQuery是一个优秀的javascript轻量级框架之一,兼容css3和各大浏览器,提供了dom,events,animate,ajax等简易操 ...
jQuery操作Dom元素、jQuery遍历、JavaScript遍历
目录 jQuery操作Dom元素 jQuery遍历几种方式 JavaScript遍历 jQuery操作Dom元素 jQuery的主要用法为"选择某个dom元素,再对其进行某种操作" ...
JQuery 基础 jq选择器 dom操作
目录 JQuery 基础: (***) window.onload 和 $(function) 区别 1. 基本选择器 1. 标签选择器(元素选择器) 2. id选择器 3. 类选择器 2. 层级 ...

jquery 使用jquery操作Dom

jquery 使用jquery操作Dom相关推荐

最新文章

热门文章