jQuery 基础知识

1.jQuery的使用

要想使用 jQuery 的话,我们必须先要官网上下载(  http://jquery.com/  )3.7 到 4.0的开发版本就可以,下载到文件夹以后桌面都可以 ,然后拖动到代码编辑器根目录下即可

 

 在需要使用 jQuery 的页面引入 jquery 的核心 js 文件

2. DOM 对象 与 jQuery 包装集对象

DOM 对象

        通过 js 方式获取的元素对象( documnet )

JQuery 对象

        通过 jquery 方法获取的元素对象,返回的是 jquery 包装集

区别:

        获取 dom 对象时会返回 “  元素  ”  本身的标签及内容

        获取 jQuery 对象时会返回一个 包装集 对象




3.基础选择器

基础选择器

id选择器        #id属性值        $(" #id属性值 ")  选择id为指定的元素对象(  如果有多个同名的id属性,则以第一个为标准 )

类选择器        .class属性值        $('' .class属性值 '')  选择clsss为指定值的元素对象

元素选择器        标签名/元素名        $(" 标签名/元素名 ")  选择所有指定标签的元素对象

通用选择器        *        $('' * '')        选择页面中所有的元素对象

组合选择器        选择器1 , 选择器2        $(''  选择器1,选择器2 '')  选择指定选择器选中的元素对象


		
元素选择器
id选择器1span中的内容
样式选择器

4.层次选择器

层次选择器:

        后代选择器

               格式: 父元素  指定元素( 空格隔开 )

                示例:$( ''  父元素   指定元素  '' )

                选择父元素的所有指定元素(  包含第一代、第二代等 ) 

         子代选择器

                格式:父元素 > 指定元素 (大于号隔开)

                示例:$('''  父元素 >  指定元素 '')

                选择父元素的所有第一代指定元素

        相邻选择器

                格式:元素 + 指定元素 (  加号隔开 )

                示例:$('''  元素 + 指定元素 '')

                选择元素的下一个指定元素( 只会查找下一个元素的 ,如果元素不存在,则获取不到)

        同辈选择器

                格式:元素 ~ 指定元素 (  波浪号隔开 )

                示例:$(''  元素 ~ 指定元素  '')

                选择元素下面的所有指定元素

        


	
层次择器
父选择器
子选择器

p元素

选择器2
选择器2中的div

5.表单选择器

  表单选择器   :input      查找所有的input元素:$(":input");

                      注意:会匹配所有的input、textarea、select和button元素。

      文本框选择器    :text

      密码框选择器    :password

      单选按钮选择器 :radio

      多选按钮选择器 :checkbox

      提交按钮选择器 :sunmit

      图像按钮选择器 :image

      重置按钮选择器 :reset

      文件域选择器    :file

      按钮选择器   :button


	
	

7.操作元素的样式

        attr(‘’ class ‘’)        获取元素的样式名

        attr(‘’  calss  ‘’,样式名)        设置元素样式(设置元素样式。原本的样式会被删除)

        addclass(‘’ 样式名 ‘’)       添加样式( 在原来的基础上添加样式,原本的样式会保留,如果出现相同的样式,则以样式中后定义的为准)

        css()        添加具体的样式( 添加行内样式 )

                css(‘’ 具体样式名 ‘’,‘’  样式值  ‘’)设置单个样式

                css({ “  具体样式  ”:‘’  样式值 ’‘,“  具体样式  ”:‘’  样式值 ’‘ })设置多个样式值

        removeClass(’‘  样式名 '’) 移除样式

css()方法设置元素样式

天蓝色
大红色
天蓝色

8.操作元素的内容

        操作元素的内容

                html()        获取元素的内容,包含 html 标签(非表单元素)

                html(‘’ 内容 ‘’)        设置元素的内容,包含 html 标签(非表单元素)

                text()        获取元素的纯文本内容,不识别html标签(非表单元素)

                text(‘’ 内容 ‘’)        设置元素的纯文本内容,不识别html标签(非表单元素)

                val()        获取元素的值(表单元素)

                val()        设置元素的值(表单元素)

        表单元素:

                 文本框text、密码框password、单选框radio、复选框checkbox、隐藏域hidden、文本域textarea、下拉框select

    非表单元素:

              div、span、h1~h6、table、tr、td、li、p等

script type="text/javascript">
	 	// html("内容")		设置元素的内容,包含html标签(非表单元素)
		$("#html").html("

上海

"); $("#html2").html("上海"); // html() 获取元素的内容,包含html标签(非表单元素) var html = $("#html").html(); var html2 = $("#html2").html(); console.log(html); console.log(html2); // text("内容") 设置元素的纯文本内容,不识别HTML标签(非表单元素) //$("#text").text("北京"); //$("#text2").text("

北京

"); // text() 获取元素的纯文本内容,不识别HTML标签(非表单元素) var txt = $("#text").text(); var txt2 = $("#text2").text(); console.log(txt); console.log(txt2); // val() 获取元素的值(表单元素) var val = $("#op").val(); console.log(val); // val("值") 设置元素的值(表单元素) $("#op").val("今天天气不错");

9.创建元素和添加元素

创建元素和添加元素:创建元素  $(''  内容 '')

添加元素:

1. 前追加子元素

          指定元素.prepend(内容)      在指定元素内部的最前面追加内容,内容可以是字符串、html元素或jquery对象。

          $(内容).prependTo(指定元素);    把内容追加到指定元素内部的最前面,内容可以是字符串、html元素或jquery对象。

2.后追加子元素

        指定元素.append(内容)     在指定元素内部的最后面追加内容,内容可以是字符串、html 元素或jquery对象

        $(内容).appendTo(指定元素)    把内容追加到指定元素内部的最后面,内容可以是字符串、html 或 jquery对象

3.前追加同级元素

before()  指定元素的前面追加内容

3.后追加同级元素

after()     指定元素的后面追加内容

        注:在添加元素时,如果元素本身不存在(新建的元素),此时会将元素追加到指定位置

                如果元素本身存在(已有的元素),会将原来的元素直接剪切设置到指定位置

script type="text/javascript">
	 	// 创建元素
		var p = "

这是一个p标签

"; console.log(p); console.log($(p)); /* 添加元素 */ // 创建元素 var span = "小奶狗"; // 得到指定元素,并在元素的内部最前面追加内容 $(".green").prepend(span); var span2 = "小狼狗"; $(span2).prependTo($(".green")); var span3 = "小奶狗1"; var span4 = "小奶狗2"; $(".green").append(span3); $(span4).appendTo($(".green")); // 将已存在内容追加到指定元素中 $(".green").append($(".red")); /* 同级追加 */ var sp1 = "女神"; var sp2 = "歌手"; $(".blue").before(sp1); $(".blue").after(sp2);

10.删除元素

        remove()

                删除元素及其对应的子元素,标签和内容一起删除

                指定元素.remove()

        empty

                清空元素内容,保留标签

                指定元素.empty()

11.遍历元素

        each()

                $( selector ).each(function(index,element)):遍历元素

                参数 function 为遍历 时的回调函数

                index为遍历元素的序列号,从 0 开始

                element是当前元素,此时是dom元素


		

遍历元素 each()

jquery javase http协议 servlet

你可能感兴趣的:(jquery,javascript,前端)