JS lesson 2: CSS pseudo class

We can use CSS pseudo class to select items we need.

<select>
<optgroup>
<option selected>1</option>
<option>2</option>
<option>3</option>
</optgroup>
</select>
select option:selected === select > optgroup > option:selected

select option:myproperty  // this is wrong

Javascrint and Jquery way of finding elements
select option:first-child === $(select).find(option).first();
select option:last-child === $(select).find(option).first();

JS lesson 1: var self=this, $.extend, CSS selector

var self=this;

In JS ‘this’ refers to current object where it’s used. However, sometimes we want to use objects that are outside scope. In below example we will do just that:

Note: self is being used in manner of pointer to object that we need

var userItem = {
name: “Yan”,
init: function() {
var self = this; // this == userItem;
$(“#btn”).on(“click”, function(event) {
alert(this.name); // error: this == btn
alert(self.name); // self.name == btn
});
}
};
userItem.init();

JQuery $.extend

$.extend is used to clone add one object to another. This provides sort of expanding the target object with other object.

Object a:

var user = {
name: “Yan”,
address: “Clementi”
}

Object b:

var engineer = $.extent({}, user, {
level: “beginner”
});

Note: engineer now will have it’s on fields and fields from user.

Note2: $.extent({}, user, {——}); means that everything inside {——} and user will be cloned to empty object {} , later it will be assigned to engineer

engineer == {
name: “Yan”,
address: “Clementi”,
level: “beginner”
}

Note 3:  if we don’t use {} but use some other object, new object will be overwritten, see example below:

var manager = $.extent(user, engineer , {
salary: “1”
});

manager == user     // true

Note4: since JQuery api for $.extend overwrites the target, in our case it’s user here, then when we compare user==manager it’s true, because we assigned user with new fields to manager. https://api.jquery.com/jquery.extend/

 CSS selector

<X div class=”question question-enhanced another-class”>
    <X div class=”body”>
       <X div class=”options”>
           <X div id = #1 class=”option”>
           </div>
       </div>
   </div>
</div>
<X div class=”question”>
   <X div class=”body”>
      <X div id = #2 class=”option”>
      </div>
   </div>
</div>

Example1:   .question .body .option (e.g. .option) == #1 and #2
Example2:   .question > .body > .option == #2
Example3:   .question.question-enhanced .body

Note that there is space before . and another version doesn’t have space.
If there is space it means that class are on the same level, but if got no space before . means it belongs to that class. Here is the example

.question.question-enhanced .body          represents

<X div class=”question question-enhanced body”>

.question.question-enhanced.body             represents

<X div class=”question question-enhanced”>

<X div class=”<body”>  </div> </div>

https://www.w3schools.com/cssref/css_selectors.asp

#id   – selects specific id
.class  – selects specific class